refactor: split document form into create and edit forms (#1523)

* refactor: split document form into create and edit forms

* fix: show previous for document edit

* fix: show previous for document edit

* refactor: merge create and edit document

.eslintrc

@@ -87,6 +87,7 @@
         "tsx": "never",
       },
     ],
+    "react/jsx-props-no-spreading": "off",
     "react/prop-types": "off",
     "react/require-default-props": "off",
     // eslint rule reports false error

package.json

@@ -49,6 +49,7 @@
     "react-dom": "18.3.1",
     "react-ga4": "2.1.0",
     "react-helmet-async": "2.0.5",
+    "react-hook-form": "7.53.0",
     "react-i18next": "15.0.2",
     "react-image-crop": "11.0.7",
     "react-qr-code": "2.0.15",

src/components/item/edit/EditModal.tsx

@@ -28,9 +28,9 @@ import { isItemValid } from '@/utils/item';
 
 import { BUILDER } from '../../../langs/constants';
 import BaseItemForm from '../form/BaseItemForm';
-import DocumentForm from '../form/DocumentForm';
 import FileForm from '../form/FileForm';
 import NameForm from '../form/NameForm';
+import DocumentForm from '../form/document/DocumentForm';
 
 const { editItemRoutine } = routines;
 
@@ -63,24 +63,46 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
     }
   }, [item, updatedItem.id]);
 
-  const ComponentType = ((): EditModalContentType => {
+  const setChanges = (payload: Partial<DiscriminatedItem>) => {
+    setUpdatedItem({ ...updatedItem, ...payload } as DiscriminatedItem);
+  };
+
+  const renderComponent = (): JSX.Element => {
     switch (item.type) {
       case ItemType.DOCUMENT:
-        return DocumentForm;
+        return <DocumentForm setChanges={setChanges} item={item} />;
       case ItemType.LOCAL_FILE:
       case ItemType.S3_FILE:
-        return FileForm;
+        return (
+          <FileForm
+            updatedProperties={updatedItem}
+            setChanges={setChanges}
+            item={item}
+          />
+        );
       case ItemType.SHORTCUT:
-        return NameForm;
+        return (
+          <NameForm
+            updatedProperties={updatedItem}
+            setChanges={setChanges}
+            item={item}
+          />
+        );
       case ItemType.FOLDER:
       case ItemType.LINK:
       case ItemType.APP:
       case ItemType.ETHERPAD:
       case ItemType.H5P:
       default:
-        return BaseItemForm;
+        return (
+          <BaseItemForm
+            updatedProperties={updatedItem}
+            setChanges={setChanges}
+            item={item}
+          />
+        );
     }
-  })();
+  };
 
   const submit = () => {
     if (
@@ -120,10 +142,6 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
     onClose();
   };
 
-  const setChanges = (payload: Partial<DiscriminatedItem>) => {
-    setUpdatedItem({ ...updatedItem, ...payload } as DiscriminatedItem);
-  };
-
   return (
     <Dialog
       onClose={onClose}
@@ -141,11 +159,7 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
           flexDirection: 'column',
         }}
       >
-        <ComponentType
-          updatedProperties={updatedItem}
-          setChanges={setChanges}
-          item={item}
-        />
+        {renderComponent()}
       </DialogContent>
       <DialogActions>
         <CancelButton id={EDIT_ITEM_MODAL_CANCEL_BUTTON_ID} onClick={onClose} />

src/components/item/form/BaseItemForm.tsx

@@ -13,7 +13,7 @@ const BaseItemForm = ({
   <Box overflow="auto">
     <NameForm
       setChanges={setChanges}
-      item={item}
+      name={item?.name}
       required
       updatedProperties={updatedProperties}
     />