refactor: use react hook form in edit file form (#1531)

graasp · Oct 22, 2024 · 3d39e46 · 3d39e46
1 parent 474c7db
commit 3d39e46
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 54 deletions.
diff --git a/src/components/item/edit/EditModal.tsx b/src/components/item/edit/EditModal.tsx
@@ -74,13 +74,7 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
         return <DocumentForm setChanges={setChanges} item={item} />;
       case ItemType.LOCAL_FILE:
       case ItemType.S3_FILE:
-        return (
-          <FileForm
-            updatedProperties={updatedItem}
-            setChanges={setChanges}
-            item={item}
-          />
-        );
+        return <FileForm setChanges={setChanges} item={item} />;
       case ItemType.SHORTCUT:
         return (
           <NameForm

diff --git a/src/components/item/form/FileForm.tsx b/src/components/item/form/FileForm.tsx
@@ -1,6 +1,18 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
 import { TextField } from '@mui/material';
 
-import { FileItemProperties, ItemType, MimeTypes } from '@graasp/sdk';
+import {
+  DescriptionPlacementType,
+  DiscriminatedItem,
+  ItemType,
+  LocalFileItemExtra,
+  LocalFileItemType,
+  MimeTypes,
+  S3FileItemExtra,
+  S3FileItemType,
+} from '@graasp/sdk';
 
 import { useBuilderTranslation } from '@/config/i18n';
 import { ITEM_FORM_IMAGE_ALT_TEXT_EDIT_FIELD_ID } from '@/config/selectors';
@@ -11,71 +23,89 @@ import type { EditModalContentPropType } from '../edit/EditModal';
 import DescriptionForm from './DescriptionForm';
 import NameForm from './NameForm';
 
-const FileForm = (props: EditModalContentPropType): JSX.Element | null => {
-  const { item, setChanges, updatedProperties } = props;
+type Inputs = {
+  name: string;
+  altText: string;
+  description: string;
+  descriptionPlacement: DescriptionPlacementType;
+};
 
+const FileForm = ({
+  item,
+  setChanges,
+}: {
+  item: DiscriminatedItem;
+  setChanges: EditModalContentPropType['setChanges'];
+}): JSX.Element | null => {
   const { t: translateBuilder } = useBuilderTranslation();
+  const { register, watch, setValue } = useForm<Inputs>();
+  const altText = watch('altText');
+  const description = watch('description');
+  const descriptionPlacement = watch('descriptionPlacement');
+  const name = watch('name');
 
-  if (!item) {
-    return null;
-  }
+  useEffect(() => {
+    let newExtra: S3FileItemExtra | LocalFileItemExtra | undefined;
+
+    if (item.type === ItemType.S3_FILE) {
+      newExtra = {
+        [ItemType.S3_FILE]: {
+          ...item.extra[ItemType.S3_FILE],
+          altText,
+        },
+      };
+    } else if (item.type === ItemType.LOCAL_FILE) {
+      newExtra = {
+        [ItemType.LOCAL_FILE]: {
+          ...item.extra[ItemType.LOCAL_FILE],
+          altText,
+        },
+      };
+    }
+
+    setChanges({
+      name,
+      description,
+      settings: { descriptionPlacement },
+      extra: newExtra,
+    } as S3FileItemType | LocalFileItemType);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [altText, description, descriptionPlacement, name, setChanges]);
 
-  if (
-    item &&
-    (item.type === ItemType.LOCAL_FILE || item.type === ItemType.S3_FILE) &&
-    (updatedProperties.type === ItemType.LOCAL_FILE ||
-      updatedProperties.type === ItemType.S3_FILE)
-  ) {
+  if (item) {
     const itemExtra = getExtraFromPartial(item);
-    const { mimetype, altText } = itemExtra;
-    const updatedExtra = updatedProperties.extra
-      ? getExtraFromPartial(updatedProperties)
-      : {};
+    const { mimetype, altText: previousAltText } = itemExtra;
     return (
       <>
-        <NameForm
-          setChanges={setChanges}
-          name={updatedProperties?.name ?? item?.name}
-        />
+        <NameForm nameForm={register('name', { value: item.name })} />
         {mimetype && MimeTypes.isImage(mimetype) && (
           <TextField
             variant="standard"
             id={ITEM_FORM_IMAGE_ALT_TEXT_EDIT_FIELD_ID}
             label={translateBuilder(BUILDER.EDIT_ITEM_IMAGE_ALT_TEXT_LABEL)}
-            value={updatedExtra?.altText ?? altText}
-            onChange={(e) => {
-              const newExtra = {
-                ...itemExtra,
-                ...updatedExtra,
-                altText: e.target.value,
-              } as FileItemProperties;
-
-              setChanges(
-                item.type === ItemType.S3_FILE
-                  ? {
-                      extra: {
-                        [ItemType.S3_FILE]: newExtra,
-                      },
-                    }
-                  : {
-                      extra: { [ItemType.LOCAL_FILE]: newExtra },
-                    },
-              );
-            }}
             // always shrink because setting name from defined app does not shrink automatically
             InputLabelProps={{ shrink: true }}
             sx={{ width: '50%', my: 1 }}
             multiline
+            {...register('altText', { value: previousAltText })}
           />
         )}
         <DescriptionForm
-          setChanges={setChanges}
-          description={
-            updatedProperties?.description ?? item?.description ?? ''
-          }
+          setChanges={(v) => {
+            if (v.description) {
+              setValue('description', v.description);
+            }
+            if (v.settings?.descriptionPlacement) {
+              setValue(
+                'descriptionPlacement',
+                v.settings?.descriptionPlacement,
+              );
+            }
+          }}
+          description={description ?? item?.description ?? ''}
           descriptionPlacement={
-            updatedProperties?.settings?.descriptionPlacement ??
-            item?.settings?.descriptionPlacement
+            descriptionPlacement ?? item?.settings?.descriptionPlacement
           }
         />
       </>

diff --git a/src/components/item/form/FolderForm.tsx b/src/components/item/form/FolderForm.tsx
@@ -63,7 +63,7 @@ const FolderForm = ({
             setValue('description', v.description);
           }
           if (v.settings?.descriptionPlacement) {
-            setValue('description', v.settings?.descriptionPlacement);
+            setValue('descriptionPlacement', v.settings?.descriptionPlacement);
           }
         }}
         showPlacement={false}