refactor: refactor folder form (#1524)

graasp · Oct 18, 2024 · e9b8d9f · e9b8d9f
1 parent d5f3986
commit e9b8d9f
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 62 deletions.
diff --git a/src/components/item/edit/EditModal.tsx b/src/components/item/edit/EditModal.tsx
@@ -29,6 +29,7 @@ import { isItemValid } from '@/utils/item';
 import { BUILDER } from '../../../langs/constants';
 import BaseItemForm from '../form/BaseItemForm';
 import FileForm from '../form/FileForm';
+import FolderForm from '../form/FolderForm';
 import NameForm from '../form/NameForm';
 import DocumentForm from '../form/document/DocumentForm';
 
@@ -83,12 +84,12 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
       case ItemType.SHORTCUT:
         return (
           <NameForm
-            updatedProperties={updatedItem}
+            name={updatedItem?.name ?? item?.name}
             setChanges={setChanges}
-            item={item}
           />
         );
       case ItemType.FOLDER:
+        return <FolderForm setChanges={setChanges} item={item} />;
       case ItemType.LINK:
       case ItemType.APP:
       case ItemType.ETHERPAD:

diff --git a/src/components/item/form/AppForm.tsx b/src/components/item/form/AppForm.tsx
@@ -161,7 +161,7 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
         />
         <NameForm
           setChanges={onChange}
-          updatedProperties={updatedProperties}
+          name={updatedProperties?.name}
           autoFocus={false}
         />
       </Stack>
@@ -203,7 +203,7 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
       </Box>
       <NameForm
         setChanges={onChange}
-        updatedProperties={updatedProperties}
+        name={updatedProperties?.name}
         autoFocus={false}
       />
     </Stack>

diff --git a/src/components/item/form/BaseItemForm.tsx b/src/components/item/form/BaseItemForm.tsx
@@ -13,16 +13,14 @@ const BaseItemForm = ({
   <Box overflow="auto">
     <NameForm
       setChanges={setChanges}
-      name={item?.name}
+      name={updatedProperties?.name ?? item?.name}
       required
-      updatedProperties={updatedProperties}
     />
 
     <Box sx={{ mt: 2 }}>
       <DescriptionForm
         id={FOLDER_FORM_DESCRIPTION_ID}
-        item={item}
-        updatedProperties={updatedProperties}
+        description={updatedProperties?.description ?? item?.description ?? ''}
         setChanges={setChanges}
       />
     </Box>

diff --git a/src/components/item/form/DescriptionForm.tsx b/src/components/item/form/DescriptionForm.tsx
@@ -1,10 +1,6 @@
 import { Box, FormLabel, Stack, Typography } from '@mui/material';
 
-import {
-  DescriptionPlacementType,
-  DiscriminatedItem,
-  ItemType,
-} from '@graasp/sdk';
+import { DescriptionPlacementType, DiscriminatedItem } from '@graasp/sdk';
 import TextEditor from '@graasp/ui/text-editor';
 
 import { useBuilderTranslation } from '@/config/i18n';
@@ -14,16 +10,18 @@ import DescriptionPlacementForm from './DescriptionPlacementForm';
 
 type DescriptionFormProps = {
   id?: string;
-  item?: DiscriminatedItem;
-  updatedProperties: Partial<DiscriminatedItem>;
   setChanges: (payload: Partial<DiscriminatedItem>) => void;
+  description?: string;
+  descriptionPlacement?: DescriptionPlacementType;
+  showPlacement?: boolean;
 };
 
 const DescriptionForm = ({
   id,
-  updatedProperties,
-  item,
+  description,
+  descriptionPlacement,
   setChanges,
+  showPlacement = true,
 }: DescriptionFormProps): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const onChange = (content: string): void => {
@@ -50,15 +48,15 @@ const DescriptionForm = ({
         </FormLabel>
         <TextEditor
           id={id}
-          value={(updatedProperties?.description || item?.description) ?? ''}
+          value={description ?? ''}
           onChange={onChange}
           showActions={false}
         />
       </Box>
 
-      {updatedProperties.type !== ItemType.FOLDER && (
+      {showPlacement && (
         <DescriptionPlacementForm
-          updatedProperties={updatedProperties}
+          updatedProperties={{ settings: { descriptionPlacement } }}
           onPlacementChanged={onPlacementChanged}
         />
       )}

diff --git a/src/components/item/form/FileForm.tsx b/src/components/item/form/FileForm.tsx
@@ -35,8 +35,7 @@ const FileForm = (props: EditModalContentPropType): JSX.Element | null => {
       <>
         <NameForm
           setChanges={setChanges}
-          name={item?.name}
-          updatedProperties={updatedProperties}
+          name={updatedProperties?.name ?? item?.name}
         />
         {mimetype && MimeTypes.isImage(mimetype) && (
           <TextField
@@ -71,8 +70,13 @@ const FileForm = (props: EditModalContentPropType): JSX.Element | null => {
         )}
         <DescriptionForm
           setChanges={setChanges}
-          updatedProperties={updatedProperties}
-          item={item}
+          description={
+            updatedProperties?.description ?? item?.description ?? ''
+          }
+          descriptionPlacement={
+            updatedProperties?.settings?.descriptionPlacement ??
+            item?.settings?.descriptionPlacement
+          }
         />
       </>
     );

diff --git a/src/components/item/form/FolderForm.tsx b/src/components/item/form/FolderForm.tsx
@@ -1,6 +1,9 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
 import { Stack } from '@mui/material';
 
-import { DiscriminatedItem } from '@graasp/sdk';
+import { DescriptionPlacementType, DiscriminatedItem } from '@graasp/sdk';
 
 import { FOLDER_FORM_DESCRIPTION_ID } from '../../../config/selectors';
 import ThumbnailCrop from '../../thumbnails/ThumbnailCrop';
@@ -12,36 +15,62 @@ export type FolderFormProps = {
   setChanges: (
     payload: Partial<DiscriminatedItem> & { thumbnail?: Blob },
   ) => void;
-  updatedProperties: Partial<DiscriminatedItem> & { thumbnail?: Blob };
+  showThumbnail?: boolean;
+};
+
+type Inputs = {
+  name: string;
+  description: string;
+  descriptionPlacement: DescriptionPlacementType;
 };
 
 const FolderForm = ({
   item,
-  updatedProperties,
   setChanges,
-}: FolderFormProps): JSX.Element => (
-  <Stack direction="column" gap={2}>
-    <Stack
-      direction="row"
-      justifyContent="flex-start"
-      alignItems="flex-end"
-      gap={3}
-    >
-      <ThumbnailCrop setChanges={setChanges} />
-      <NameForm
-        required
-        setChanges={setChanges}
-        name={item?.name}
-        updatedProperties={updatedProperties}
+  showThumbnail = false,
+}: FolderFormProps): JSX.Element => {
+  const { register, setValue, watch } = useForm<Inputs>();
+  const description = watch('description');
+  const descriptionPlacement = watch('descriptionPlacement');
+  const name = watch('name');
+
+  // 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 (
+    <Stack direction="column" gap={2}>
+      <Stack
+        direction="row"
+        justifyContent="flex-start"
+        alignItems="flex-end"
+        gap={3}
+      >
+        {showThumbnail && <ThumbnailCrop setChanges={setChanges} />}
+        <NameForm required nameForm={register('name', { value: item?.name })} />
+      </Stack>
+      <DescriptionForm
+        id={FOLDER_FORM_DESCRIPTION_ID}
+        description={description ?? item?.description}
+        setChanges={(v) => {
+          if (v.description) {
+            setValue('description', v.description);
+          }
+          if (v.settings?.descriptionPlacement) {
+            setValue('description', v.settings?.descriptionPlacement);
+          }
+        }}
+        showPlacement={false}
+        descriptionPlacement={item?.settings?.descriptionPlacement}
       />
     </Stack>
-    <DescriptionForm
-      id={FOLDER_FORM_DESCRIPTION_ID}
-      item={item}
-      updatedProperties={updatedProperties}
-      setChanges={setChanges}
-    />
-  </Stack>
-);
+  );
+};
 
 export default FolderForm;
diff --git a/src/components/item/form/NameForm.tsx b/src/components/item/form/NameForm.tsx
@@ -19,10 +19,6 @@ export type NameFormProps = {
    * @deprecated use nameForm
    */
   setChanges?: (payload: Partial<DiscriminatedItem>) => void;
-  /**
-   * @deprecated use nameForm
-   */
-  updatedProperties?: Partial<DiscriminatedItem>;
 } & {
   required?: boolean;
   /**
@@ -37,7 +33,6 @@ export type NameFormProps = {
 const NameForm = ({
   nameForm,
   required,
-  updatedProperties,
   setChanges,
   name,
   autoFocus = true,
@@ -68,7 +63,7 @@ const NameForm = ({
         endAdornment: (
           <IconButton
             onClick={handleClearClick}
-            sx={{ visibility: updatedProperties?.name ? 'visible' : 'hidden' }}
+            sx={{ visibility: name ? 'visible' : 'hidden' }}
           >
             <ClearIcon fontSize="small" />
           </IconButton>
@@ -81,7 +76,7 @@ const NameForm = ({
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-expect-error
       onChange={handleNameInput}
-      value={updatedProperties?.name ?? name}
+      value={name}
       {...(nameForm ?? {})}
     />
   );

diff --git a/src/components/item/form/link/LinkForm.tsx b/src/components/item/form/link/LinkForm.tsx
@@ -180,11 +180,10 @@ const LinkForm = ({
         onClear={onClickClearURL}
       />
       <NameForm
-        name={item?.name}
+        name={updatedProperties?.name ?? item?.name}
         autoFocus={false}
         required
         setChanges={onChange}
-        updatedProperties={updatedProperties}
       />
       <LinkDescriptionField
         value={updatedProperties.description}

diff --git a/src/components/main/NewItemModal.tsx b/src/components/main/NewItemModal.tsx
@@ -170,10 +170,7 @@ const NewItemModal = ({
             <Typography variant="h6" color="primary">
               {translateBuilder(BUILDER.CREATE_ITEM_NEW_FOLDER_TITLE)}
             </Typography>
-            <FolderForm
-              setChanges={updateItem}
-              updatedProperties={updatedPropertiesPerType[ItemType.FOLDER]}
-            />
+            <FolderForm setChanges={updateItem} showThumbnail />
           </>
         );
       case ItemType.S3_FILE: