refactor: remove setchanges and updatedProperties from descriptionpla…

…cement
graasp · Oct 25, 2024 · 9adf561 · 9adf561
1 parent 760b77a
commit 9adf561
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 63 deletions.
diff --git a/src/components/item/form/BaseItemForm.tsx b/src/components/item/form/BaseItemForm.tsx
@@ -49,16 +49,11 @@ const BaseItemForm = ({
           descriptionPlacement={
             descriptionPlacement ?? item?.settings?.descriptionPlacement
           }
-          setChanges={(v) => {
-            if (v.description) {
-              setValue('description', v.description);
-            }
-            if (v.settings?.descriptionPlacement) {
-              setValue(
-                'descriptionPlacement',
-                v.settings?.descriptionPlacement,
-              );
-            }
+          onPlacementChange={(newValue) =>
+            setValue('descriptionPlacement', newValue)
+          }
+          onDescriptionChange={(newValue) => {
+            setValue('description', newValue);
           }}
         />
       </Box>

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

diff --git a/src/components/item/form/DescriptionPlacementForm.tsx b/src/components/item/form/DescriptionPlacementForm.tsx
@@ -1,10 +1,6 @@
 import { MenuItem, Select } from '@mui/material';
 
-import {
-  DescriptionPlacement,
-  DescriptionPlacementType,
-  DiscriminatedItem,
-} from '@graasp/sdk';
+import { DescriptionPlacement, DescriptionPlacementType } from '@graasp/sdk';
 
 import { CornerDownRightIcon, CornerUpRightIcon } from 'lucide-react';
 
@@ -20,22 +16,19 @@ import ItemSettingProperty from '../settings/ItemSettingProperty';
 const DEFAULT_PLACEMENT = DescriptionPlacement.BELOW;
 
 type DescriptionPlacementFormProps = {
-  updatedProperties: Partial<DiscriminatedItem>;
-  onPlacementChanged: (payload: DescriptionPlacementType) => void;
+  onPlacementChange: (payload: DescriptionPlacementType) => void;
+  descriptionPlacement?: DescriptionPlacementType;
 };
 
 const DescriptionPlacementForm = ({
-  updatedProperties,
-  onPlacementChanged,
+  onPlacementChange,
+  descriptionPlacement = DEFAULT_PLACEMENT,
 }: DescriptionPlacementFormProps): JSX.Element | null => {
   const { t } = useBuilderTranslation();
 
   const handlePlacementChanged = (placement: string): void => {
-    onPlacementChanged(placement as DescriptionPlacementType);
+    onPlacementChange(placement as DescriptionPlacementType);
   };
-  const descriptionPlacement =
-    updatedProperties.settings?.descriptionPlacement ?? DEFAULT_PLACEMENT;
-
   return (
     <ItemSettingProperty
       title={t(BUILDER.ITEM_SETTINGS_DESCRIPTION_PLACEMENT_TITLE)}

diff --git a/src/components/item/form/FileForm.tsx b/src/components/item/form/FileForm.tsx
@@ -92,16 +92,11 @@ const FileForm = ({
           />
         )}
         <DescriptionForm
-          setChanges={(v) => {
-            if (v.description) {
-              setValue('description', v.description);
-            }
-            if (v.settings?.descriptionPlacement) {
-              setValue(
-                'descriptionPlacement',
-                v.settings?.descriptionPlacement,
-              );
-            }
+          onPlacementChange={(newValue) =>
+            setValue('descriptionPlacement', newValue)
+          }
+          onDescriptionChange={(newValue) => {
+            setValue('description', newValue);
           }}
           description={description ?? item?.description ?? ''}
           descriptionPlacement={

diff --git a/src/components/item/form/FolderForm.tsx b/src/components/item/form/FolderForm.tsx
@@ -58,13 +58,11 @@ const FolderForm = ({
       <DescriptionForm
         id={FOLDER_FORM_DESCRIPTION_ID}
         description={description ?? item?.description}
-        setChanges={(v) => {
-          if (v.description) {
-            setValue('description', v.description);
-          }
-          if (v.settings?.descriptionPlacement) {
-            setValue('descriptionPlacement', v.settings?.descriptionPlacement);
-          }
+        onPlacementChange={(newValue) =>
+          setValue('descriptionPlacement', newValue)
+        }
+        onDescriptionChange={(newValue) => {
+          setValue('description', newValue);
         }}
         showPlacement={false}
         descriptionPlacement={

diff --git a/src/components/item/settings/ItemSettingsProperties.tsx b/src/components/item/settings/ItemSettingsProperties.tsx
@@ -180,10 +180,10 @@ const ItemSettingsProperties = ({ item }: Props): JSX.Element => {
 
       {item.type !== ItemType.FOLDER && (
         <DescriptionPlacementForm
-          updatedProperties={item}
-          onPlacementChanged={(newPlacement) =>
+          onPlacementChange={(newPlacement) =>
             handleSettingChanged('descriptionPlacement', newPlacement)
           }
+          descriptionPlacement={item.settings.descriptionPlacement}
         />
       )}
     </Stack>