refactor: use react hook form for base item form

src/components/item/edit/EditModal.tsx

@@ -95,13 +95,7 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
       case ItemType.ETHERPAD:
       case ItemType.H5P:
       default:
-        return (
-          <BaseItemForm
-            updatedProperties={updatedItem}
-            setChanges={setChanges}
-            item={item}
-          />
-        );
+        return <BaseItemForm setChanges={setChanges} item={item} />;
     }
   };
 

src/components/item/form/BaseItemForm.tsx

@@ -1,30 +1,69 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
 import { Box } from '@mui/material';
 
+import { DescriptionPlacementType, DiscriminatedItem } from '@graasp/sdk';
+
 import { FOLDER_FORM_DESCRIPTION_ID } from '../../../config/selectors';
-import type { EditModalContentPropType } from '../edit/EditModal';
 import DescriptionForm from './DescriptionForm';
 import NameForm from './NameForm';
 
+type Inputs = {
+  name: string;
+  description: string;
+  descriptionPlacement: DescriptionPlacementType;
+};
+
 const BaseItemForm = ({
   item,
-  updatedProperties,
   setChanges,
-}: EditModalContentPropType): JSX.Element => (
-  <Box overflow="auto">
-    <NameForm
-      setChanges={setChanges}
-      name={updatedProperties?.name ?? item?.name}
-      required
-    />
-
-    <Box sx={{ mt: 2 }}>
-      <DescriptionForm
-        id={FOLDER_FORM_DESCRIPTION_ID}
-        description={updatedProperties?.description ?? item?.description ?? ''}
-        setChanges={setChanges}
-      />
+}: {
+  item?: DiscriminatedItem;
+  setChanges: (payload: Partial<DiscriminatedItem>) => void;
+}): JSX.Element => {
+  const { register, watch, setValue } = useForm<Inputs>();
+
+  const name = watch('name');
+  const descriptionPlacement = watch('descriptionPlacement');
+  const description = watch('description');
+
+  // synchronize upper state after async local state change
+  useEffect(() => {
+    setChanges({
+      name,
+      description,
+      settings: { descriptionPlacement },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [description, descriptionPlacement, name]);
+
+  return (
+    <Box overflow="auto">
+      <NameForm nameForm={register('name', { value: item?.name })} required />
+
+      <Box sx={{ mt: 2 }}>
+        <DescriptionForm
+          id={FOLDER_FORM_DESCRIPTION_ID}
+          description={description ?? item?.description}
+          descriptionPlacement={
+            descriptionPlacement ?? item?.settings?.descriptionPlacement
+          }
+          setChanges={(v) => {
+            if (v.description) {
+              setValue('description', v.description);
+            }
+            if (v.settings?.descriptionPlacement) {
+              setValue(
+                'descriptionPlacement',
+                v.settings?.descriptionPlacement,
+              );
+            }
+          }}
+        />
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 export default BaseItemForm;

src/components/item/form/FolderForm.tsx

@@ -67,7 +67,9 @@ const FolderForm = ({
           }
         }}
         showPlacement={false}
-        descriptionPlacement={item?.settings?.descriptionPlacement}
+        descriptionPlacement={
+          descriptionPlacement ?? item?.settings?.descriptionPlacement
+        }
       />
     </Stack>
   );