vault category auto select

frontend/src/components/templates/vault-create/index.tsx

@@ -19,6 +19,7 @@ import { SelectCategory } from './select-category'
 export interface IOption {
   readonly label: string
   readonly value: number
+  readonly disabled: boolean
 }
 
 interface IVaultCreateTemplate {

frontend/src/components/templates/vault-create/select-category/index.tsx

@@ -14,20 +14,26 @@ interface ISelectCategory {
   clearErrors?(): void
 }
 
-const createOption = (label: string, value: number): IOption => ({
+const createOption = (
+  label: string,
+  value: number,
+  disabled?: boolean
+): IOption => ({
   label,
   value: value,
+  disabled: disabled ?? false,
 })
 
 export const SelectCategory: React.FC<ISelectCategory> = ({
   vaultCategories,
   createVaultCategory,
   setCategorySelected,
   categorySelected,
-  clearErrors
+  clearErrors,
 }) => {
   const [isLoading, setIsLoading] = useState(false)
   const [options, setOptions] = useState<IOption[]>([])
+  const [value, setValue] = useState<IOption>()
 
   const { colorMode } = useColorMode()
 
@@ -41,14 +47,16 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
       setIsLoading(false)
       setOptions(prev => [...prev, newOption])
       setCategorySelected(newOption)
+      setValue(newOption)
     }, 1000)
   }
 
   useEffect(() => {
-    const ops = vaultCategories?.map(
+    let ops = vaultCategories?.map(
       (vaultCategory: Hooks.UseVaultsTypes.IVaultCategory) =>
         createOption(vaultCategory.name, vaultCategory.id)
     )
+    ops = [...(ops || []), createOption('Type to create...', 0, true)]
     setOptions(ops || [])
   }, [vaultCategories])
 
@@ -59,13 +67,19 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
       isLoading={isLoading}
       onCreateOption={handleVaultCategory}
       options={options}
+      value={value}
+      isOptionDisabled={(option): boolean => option.disabled}
       onChange={(newValue): void => {
         if (clearErrors) clearErrors()
         setCategorySelected(newValue)
       }}
       defaultValue={
         categorySelected
-          ? { value: categorySelected.value, label: categorySelected.label }
+          ? {
+              value: categorySelected.value,
+              label: categorySelected.label,
+              disabled: false,
+            }
           : undefined
       }
       styles={{
@@ -80,9 +94,10 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
           ...base,
           backgroundColor: colorMode === 'dark' ? '#303448' : undefined,
         }),
-        option: (styles, { isFocused, isSelected }) => ({
+        option: (styles, { isFocused, isSelected, isDisabled }) => ({
           ...styles,
           color: colorMode === 'dark' ? 'white' : 'black',
+          opacity: isDisabled ? '0.5' : undefined,
           background: isFocused
             ? colorMode === 'dark'
               ? '#292d3e'

frontend/src/components/templates/vault-detail/components/header/index.tsx

@@ -59,7 +59,7 @@ const Form: React.FC<IHeader> = ({
 }) => {
   const [categorySelected, setCategorySelected] = useState<
     IOption | null | undefined
-  >(category && { label: category?.name, value: category?.id })
+  >(category && { label: category?.name, value: category?.id, disabled: false })
 
   const [name, setName] = useState<string | undefined>(vault.name)