refactor: refactor edit shortcut modal (#1583)

graasp · Nov 26, 2024 · 43a83ec · 43a83ec
1 parent f9f701a
commit 43a83ec
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 16 deletions.
diff --git a/src/components/item/edit/EditModal.tsx b/src/components/item/edit/EditModal.tsx
@@ -72,8 +72,6 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
     switch (item.type) {
       case ItemType.DOCUMENT:
         return <DocumentForm setChanges={setChanges} item={item} />;
-      case ItemType.SHORTCUT:
-        return <EditShortcutForm item={item} setChanges={setChanges} />;
       case ItemType.LINK:
       case ItemType.APP:
       case ItemType.ETHERPAD:
@@ -128,6 +126,9 @@ const EditModal = ({ item, onClose, open }: Props): JSX.Element => {
     if (item.type === ItemType.LOCAL_FILE || item.type === ItemType.S3_FILE) {
       return <FileForm onClose={onClose} item={item} />;
     }
+    if (item.type === ItemType.SHORTCUT) {
+      return <EditShortcutForm onClose={onClose} item={item} />;
+    }
 
     return (
       <>

diff --git a/src/components/item/shortcut/EditShortcutForm.tsx b/src/components/item/shortcut/EditShortcutForm.tsx
@@ -1,7 +1,18 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+import { Box, Button, DialogActions, DialogContent } from '@mui/material';
+
 import { DiscriminatedItem } from '@graasp/sdk';
+import { COMMON } from '@graasp/translations';
+
+import CancelButton from '@/components/common/CancelButton';
+import { useCommonTranslation } from '@/config/i18n';
+import { mutations } from '@/config/queryClient';
+import {
+  EDIT_ITEM_MODAL_CANCEL_BUTTON_ID,
+  ITEM_FORM_CONFIRM_BUTTON_ID,
+} from '@/config/selectors';
 
 import { ItemNameField } from '../form/ItemNameField';
 
@@ -11,29 +22,53 @@ type Inputs = {
 
 function EditShortcutForm({
   item,
-  setChanges,
+  onClose,
 }: {
   item: DiscriminatedItem;
-  setChanges: (args: { name: string }) => void;
+  onClose: () => void;
 }): ReactNode {
+  const { t: translateCommon } = useCommonTranslation();
   const methods = useForm<Inputs>({
     defaultValues: { name: item.name },
   });
-  const { watch } = methods;
-
-  const name = watch('name');
+  const {
+    handleSubmit,
+    formState: { isValid },
+  } = methods;
 
-  // synchronize upper state after async local state change
-  useEffect(() => {
-    setChanges({
-      name,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name]);
+  const { mutateAsync: editItem } = mutations.useEditItem();
+  async function onSubmit(data: Inputs) {
+    try {
+      await editItem({
+        id: item.id,
+        name: data.name,
+      });
+      onClose();
+    } catch (e) {
+      console.error(e);
+    }
+  }
 
   return (
     <FormProvider {...methods}>
-      <ItemNameField required />
+      <Box component="form" onSubmit={handleSubmit(onSubmit)}>
+        <DialogContent>
+          <ItemNameField required />
+        </DialogContent>
+        <DialogActions>
+          <CancelButton
+            id={EDIT_ITEM_MODAL_CANCEL_BUTTON_ID}
+            onClick={onClose}
+          />
+          <Button
+            id={ITEM_FORM_CONFIRM_BUTTON_ID}
+            type="submit"
+            disabled={!isValid}
+          >
+            {translateCommon(COMMON.SAVE_BUTTON)}
+          </Button>
+        </DialogActions>
+      </Box>
     </FormProvider>
   );
 }