diff --git a/src/components/item/edit/EditModal.tsx b/src/components/item/edit/EditModal.tsx
index 0d1f9d9db..07e707c02 100644
--- a/src/components/item/edit/EditModal.tsx
+++ b/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 (
-
- );
+ return ;
}
};
diff --git a/src/components/item/form/BaseItemForm.tsx b/src/components/item/form/BaseItemForm.tsx
index fa37822cc..553dfc201 100644
--- a/src/components/item/form/BaseItemForm.tsx
+++ b/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 => (
-
-
-
-
-
+}: {
+ item?: DiscriminatedItem;
+ setChanges: (payload: Partial) => void;
+}): JSX.Element => {
+ const { register, watch, setValue } = useForm();
+
+ 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 (
+
+
+
+
+ {
+ if (v.description) {
+ setValue('description', v.description);
+ }
+ if (v.settings?.descriptionPlacement) {
+ setValue(
+ 'descriptionPlacement',
+ v.settings?.descriptionPlacement,
+ );
+ }
+ }}
+ />
+
-
-);
+ );
+};
export default BaseItemForm;
diff --git a/src/components/item/form/FolderForm.tsx b/src/components/item/form/FolderForm.tsx
index b6214cf3d..9d992456e 100644
--- a/src/components/item/form/FolderForm.tsx
+++ b/src/components/item/form/FolderForm.tsx
@@ -67,7 +67,9 @@ const FolderForm = ({
}
}}
showPlacement={false}
- descriptionPlacement={item?.settings?.descriptionPlacement}
+ descriptionPlacement={
+ descriptionPlacement ?? item?.settings?.descriptionPlacement
+ }
/>
);