refactor: refactor file upload modal (#1572)

graasp · Nov 20, 2024 · 307586d · 307586d
1 parent eb07472
commit 307586d
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 23 deletions.
diff --git a/src/components/item/edit/EditModal.tsx b/src/components/item/edit/EditModal.tsx
@@ -28,8 +28,8 @@ import { isItemValid } from '@/utils/item';
 
 import { BUILDER } from '../../../langs/constants';
 import BaseItemForm from '../form/BaseItemForm';
-import FileForm from '../form/FileForm';
 import DocumentForm from '../form/document/DocumentForm';
+import FileForm from '../form/file/FileForm';
 import { FolderEditForm } from '../form/folder/FolderEditForm';
 import EditShortcutForm from '../shortcut/EditShortcutForm';
 

diff --git a/src/components/item/form/FileForm.tsx → src/components/item/form/file/FileForm.tsx b/src/components/item/form/FileForm.tsx → src/components/item/form/file/FileForm.tsx
@@ -30,9 +30,9 @@ import {
 } from '@/config/selectors';
 import { getExtraFromPartial } from '@/utils/itemExtra';
 
-import { BUILDER } from '../../../langs/constants';
-import { ItemNameField } from './ItemNameField';
-import { DescriptionAndPlacementForm } from './description/DescriptionAndPlacementForm';
+import { BUILDER } from '../../../../langs/constants';
+import { ItemNameField } from '../ItemNameField';
+import { DescriptionAndPlacementForm } from '../description/DescriptionAndPlacementForm';
 
 type Inputs = {
   name: string;

diff --git a/src/components/item/form/file/UploadFileModalContent.tsx b/src/components/item/form/file/UploadFileModalContent.tsx
@@ -0,0 +1,34 @@
+import { DialogActions, DialogContent, DialogTitle } from '@mui/material';
+
+import { DiscriminatedItem } from '@graasp/sdk';
+
+import CancelButton from '@/components/common/CancelButton';
+import FileUploader from '@/components/file/FileUploader';
+import { useBuilderTranslation } from '@/config/i18n';
+import { BUILDER } from '@/langs/constants';
+
+import { EDIT_ITEM_MODAL_CANCEL_BUTTON_ID } from '../../../../config/selectors';
+
+type UploadFileModalContentProps = {
+  previousItemId?: DiscriminatedItem['id'];
+  onClose: () => void;
+};
+
+export function UploadFileModalContent({
+  previousItemId,
+  onClose,
+}: UploadFileModalContentProps): JSX.Element {
+  const { t: translateBuilder } = useBuilderTranslation();
+
+  return (
+    <>
+      <DialogTitle>{translateBuilder(BUILDER.UPLOAD_FILE_TITLE)}</DialogTitle>
+      <DialogContent>
+        <FileUploader previousItemId={previousItemId} onComplete={onClose} />
+      </DialogContent>
+      <DialogActions>
+        <CancelButton id={EDIT_ITEM_MODAL_CANCEL_BUTTON_ID} onClick={onClose} />
+      </DialogActions>
+    </>
+  );
+}
diff --git a/src/components/item/form/link/LinkForm.tsx b/src/components/item/form/link/LinkForm.tsx
@@ -166,7 +166,7 @@ export const LinkForm = ({
   return (
     <Box component="form" onSubmit={handleSubmit(onSubmit)}>
       <DialogTitle>
-        {translateBuilder(BUILDER.CREATE_ITEM_NEW_FOLDER_TITLE)}
+        {translateBuilder(BUILDER.CREATE_ITEM_LINK_TITLE)}
       </DialogTitle>
       <FormProvider {...methods}>
         <DialogContent>

diff --git a/src/components/main/NewItemModal.tsx b/src/components/main/NewItemModal.tsx
@@ -33,10 +33,10 @@ import { InternalItemType, NewItemTabType } from '../../config/types';
 import { BUILDER } from '../../langs/constants';
 import { isItemValid } from '../../utils/item';
 import CancelButton from '../common/CancelButton';
-import FileUploader from '../file/FileUploader';
 import { EtherpadForm } from '../item/form/EtherpadForm';
 import AppForm from '../item/form/app/AppForm';
 import DocumentForm from '../item/form/document/DocumentForm';
+import { UploadFileModalContent } from '../item/form/file/UploadFileModalContent';
 import { FolderCreateForm } from '../item/form/folder/FolderCreateForm';
 import { LinkForm } from '../item/form/link/LinkForm';
 import ImportH5P from './ImportH5P';
@@ -148,22 +148,9 @@ const NewItemModal = ({
     });
   };
 
-  // folders, apps, etherpad and links are handled beforehand
+  // folders, apps, files, etherpad and links are handled beforehand
   const renderContent = () => {
     switch (selectedItemType) {
-      case ItemType.S3_FILE:
-      case ItemType.LOCAL_FILE:
-        return (
-          <>
-            <Typography variant="h6" color="primary">
-              {translateBuilder(BUILDER.UPLOAD_FILE_TITLE)}
-            </Typography>
-            <FileUploader
-              previousItemId={previousItemId}
-              onComplete={handleClose}
-            />
-          </>
-        );
       case InternalItemType.ZIP:
         return (
           <>
@@ -219,8 +206,6 @@ const NewItemModal = ({
             </Button>
           </>
         );
-      case ItemType.S3_FILE:
-      case ItemType.LOCAL_FILE:
       case InternalItemType.ZIP:
       case ItemType.H5P:
         return (
@@ -270,9 +255,20 @@ const NewItemModal = ({
         );
         break;
       }
-      case ItemType.ETHERPAD:
+      case ItemType.ETHERPAD: {
         content = <EtherpadForm onClose={handleClose} parentId={parentId} />;
         break;
+      }
+      case ItemType.S3_FILE:
+      case ItemType.LOCAL_FILE: {
+        content = (
+          <UploadFileModalContent
+            previousItemId={previousItemId}
+            onClose={handleClose}
+          />
+        );
+        break;
+      }
       default: {
         content = renderContent();
       }