Move opened state to form

Author: Rokt33r

src/components/PreferencesModal/StorageTab.tsx

@@ -69,16 +69,6 @@ const StorageEditPage = ({ storage }: StorageEditPageProps) => {
     setEditingName(false)
   }, [storage.id, db, newName])
 
-  const [convertPouchFormIsFolded, setConvertPouchFormIsFolded] = useState(true)
-
-  const openConvertPouchForm = useCallback(() => {
-    setConvertPouchFormIsFolded(false)
-  }, [])
-
-  const foldConvertPouchForm = useCallback(() => {
-    setConvertPouchFormIsFolded(true)
-  }, [])
-
   return (
     <div>
       <h2>Storage Name</h2>
@@ -135,21 +125,10 @@ const StorageEditPage = ({ storage }: StorageEditPageProps) => {
       {storage.type === 'pouch' && appIsElectron && (
         <>
           <hr />
-
-          <FormHeading depth={2}>Convert File System based Storage</FormHeading>
-          {convertPouchFormIsFolded ? (
-            <FormGroup>
-              <FormSecondaryButton onClick={openConvertPouchForm}>
-                Convert
-              </FormSecondaryButton>
-            </FormGroup>
-          ) : (
-            <ConvertPouchStorageForm
-              storageId={storage.id}
-              storageName={storage.name}
-              closeForm={foldConvertPouchForm}
-            />
-          )}
+          <ConvertPouchStorageForm
+            storageId={storage.id}
+            storageName={storage.name}
+          />
         </>
       )}
       <hr />

src/components/organisms/ConvertPouchStorageForm.tsx

@@ -6,6 +6,7 @@ import {
   FormPrimaryButton,
   FormBlockquote,
   FormSecondaryButton,
+  FormHeading,
 } from '../atoms/form'
 import FormFolderSelector from '../atoms/FormFolderSelector'
 import { useDb } from '../../lib/db'
@@ -19,22 +20,30 @@ import { usePreferences } from '../../lib/preferences'
 interface ConvertPouchStorageProps {
   storageId: string
   storageName: string
-  closeForm: () => void
 }
 
 const ConvertPouchStorage = ({
   storageId,
   storageName,
-  closeForm,
 }: ConvertPouchStorageProps) => {
-  const [newStorageName, setNewStorageName] = useState(
-    `${storageName} - Converted`
-  )
+  const { push } = useRouter()
   const { setClosed } = usePreferences()
-  const [newStorageLocation, setNewStorageLocation] = useState('')
   const { storageMap, createStorage } = useDb()
+  const [newStorageLocation, setNewStorageLocation] = useState('')
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const { push } = useRouter()
+  const [newStorageName, setNewStorageName] = useState('')
+  const [opened, setOpened] = useState(false)
+
+  const openForm = useCallback(() => {
+    setNewStorageName(`${storageName} - Converted`)
+    setNewStorageLocation('')
+    setErrorMessage(null)
+    setOpened(true)
+  }, [storageName])
+
+  const closeForm = useCallback(() => {
+    setOpened(false)
+  }, [])
 
   const updateNewStorageName = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -113,29 +122,43 @@ const ConvertPouchStorage = ({
 
   return (
     <>
-      <FormBlockquote variant={errorMessage == null ? 'primary' : 'danger'}>
-        {errorMessage == null
-          ? 'This operation will clone data to File System based Storage.'
-          : errorMessage}
-      </FormBlockquote>
+      <FormHeading depth={2}>Convert File System based Storage</FormHeading>
+      {!opened ? (
+        <FormGroup>
+          <FormSecondaryButton onClick={openForm}>Convert</FormSecondaryButton>
+        </FormGroup>
+      ) : (
+        <>
+          <FormBlockquote variant={errorMessage == null ? 'primary' : 'danger'}>
+            {errorMessage == null
+              ? 'This operation will clone data to File System based Storage.'
+              : errorMessage}
+          </FormBlockquote>
 
-      <FormGroup>
-        <FormLabel>Converted Storage Name</FormLabel>
-        <FormTextInput value={newStorageName} onChange={updateNewStorageName} />
-      </FormGroup>
-      <FormGroup>
-        <FormLabel>Converted Storage Location</FormLabel>
-        <FormFolderSelector
-          value={newStorageLocation}
-          setValue={setNewStorageLocation}
-        />
-      </FormGroup>
-      <FormGroup>
-        <FormPrimaryButton onClick={cloneAndConvertStorage}>
-          Convert to File System based Storage
-        </FormPrimaryButton>
-        <FormSecondaryButton onClick={closeForm}>Cancel</FormSecondaryButton>
-      </FormGroup>
+          <FormGroup>
+            <FormLabel>Converted Storage Name</FormLabel>
+            <FormTextInput
+              value={newStorageName}
+              onChange={updateNewStorageName}
+            />
+          </FormGroup>
+          <FormGroup>
+            <FormLabel>Converted Storage Location</FormLabel>
+            <FormFolderSelector
+              value={newStorageLocation}
+              setValue={setNewStorageLocation}
+            />
+          </FormGroup>
+          <FormGroup>
+            <FormPrimaryButton onClick={cloneAndConvertStorage}>
+              Convert to File System based Storage
+            </FormPrimaryButton>
+            <FormSecondaryButton onClick={closeForm}>
+              Cancel
+            </FormSecondaryButton>
+          </FormGroup>
+        </>
+      )}
     </>
   )
 }