From cc4ebcaf98ce103ed7f0ef809005cc4be0f7611c Mon Sep 17 00:00:00 2001 From: kim Date: Wed, 16 Oct 2024 15:25:55 +0200 Subject: [PATCH] refactor: refactor folder form --- src/components/item/edit/EditModal.tsx | 5 +- src/components/item/form/AppForm.tsx | 4 +- src/components/item/form/BaseItemForm.tsx | 6 +- src/components/item/form/DescriptionForm.tsx | 22 +++--- src/components/item/form/FileForm.tsx | 12 ++- src/components/item/form/FolderForm.tsx | 79 +++++++++++++------- src/components/item/form/NameForm.tsx | 9 +-- src/components/item/form/link/LinkForm.tsx | 3 +- src/components/main/NewItemModal.tsx | 5 +- 9 files changed, 83 insertions(+), 62 deletions(-) diff --git a/src/components/item/edit/EditModal.tsx b/src/components/item/edit/EditModal.tsx index 399db14f3..0d1f9d9db 100644 --- 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 ( ); case ItemType.FOLDER: + return ; 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 index f7102e3f8..1daf504c5 100644 --- 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 => { /> @@ -203,7 +203,7 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => { diff --git a/src/components/item/form/BaseItemForm.tsx b/src/components/item/form/BaseItemForm.tsx index 43c4883bb..fa37822cc 100644 --- a/src/components/item/form/BaseItemForm.tsx +++ b/src/components/item/form/BaseItemForm.tsx @@ -13,16 +13,14 @@ const BaseItemForm = ({ diff --git a/src/components/item/form/DescriptionForm.tsx b/src/components/item/form/DescriptionForm.tsx index e42f2ce2c..46c47c58d 100644 --- 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; setChanges: (payload: Partial) => 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 = ({ - {updatedProperties.type !== ItemType.FOLDER && ( + {showPlacement && ( )} diff --git a/src/components/item/form/FileForm.tsx b/src/components/item/form/FileForm.tsx index 8e5b220a2..f96de341c 100644 --- 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 => { <> {mimetype && MimeTypes.isImage(mimetype) && ( { )} ); diff --git a/src/components/item/form/FolderForm.tsx b/src/components/item/form/FolderForm.tsx index 0228181c0..b6214cf3d 100644 --- 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 & { thumbnail?: Blob }, ) => void; - updatedProperties: Partial & { thumbnail?: Blob }; + showThumbnail?: boolean; +}; + +type Inputs = { + name: string; + description: string; + descriptionPlacement: DescriptionPlacementType; }; const FolderForm = ({ item, - updatedProperties, setChanges, -}: FolderFormProps): JSX.Element => ( - - - - { + const { register, setValue, watch } = useForm(); + 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 ( + + + {showThumbnail && } + + + { + if (v.description) { + setValue('description', v.description); + } + if (v.settings?.descriptionPlacement) { + setValue('description', v.settings?.descriptionPlacement); + } + }} + showPlacement={false} + descriptionPlacement={item?.settings?.descriptionPlacement} /> - - -); + ); +}; export default FolderForm; diff --git a/src/components/item/form/NameForm.tsx b/src/components/item/form/NameForm.tsx index 8d877196f..9322209f2 100644 --- 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) => void; - /** - * @deprecated use nameForm - */ - updatedProperties?: Partial; } & { 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: ( @@ -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 index a1bb1c9b6..155665f9a 100644 --- a/src/components/item/form/link/LinkForm.tsx +++ b/src/components/item/form/link/LinkForm.tsx @@ -180,11 +180,10 @@ const LinkForm = ({ onClear={onClickClearURL} /> {translateBuilder(BUILDER.CREATE_ITEM_NEW_FOLDER_TITLE)} - + ); case ItemType.S3_FILE: