fix: update notifs and dismiss uppy status (#1120)

* fix: dismiss uppy status on complete and use stacked notifs * fix: add on complete close new item modal
graasp · Mar 28, 2024 · 571ddc2 · 571ddc2
1 parent 93daa68
commit 571ddc2
Show file tree

Hide file tree

Showing 6 changed files with 692 additions and 1,831 deletions.
diff --git a/src/components/Root.tsx b/src/components/Root.tsx
@@ -33,7 +33,7 @@ const Root = (): JSX.Element => (
     <I18nextProvider i18n={i18nConfig}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <ToastContainer position="bottom-right" theme="colored" />
+        <ToastContainer stacked position="bottom-right" theme="colored" />
         <Router>
           <Sentry.ErrorBoundary fallback={<FallbackComponent />}>
             <ModalProviders>

diff --git a/src/components/file/FileDashboardUploader.tsx b/src/components/file/FileDashboardUploader.tsx
@@ -18,7 +18,10 @@ import { humanFileSize } from '../../utils/uppy';
 import ErrorAlert from '../common/ErrorAlert';
 import { UppyContext } from './UppyContext';
 
-const FileDashboardUploader = (): JSX.Element => {
+type Props = {
+  onComplete: () => void;
+};
+const FileDashboardUploader = ({ onComplete }: Props): JSX.Element => {
   const { uppy } = useContext(UppyContext);
   const { t: translateBuilder, i18n } = useBuilderTranslation();
   const uppyLocales = i18n.options.resources?.[i18n.language]
@@ -28,6 +31,13 @@ const FileDashboardUploader = (): JSX.Element => {
     return <ErrorAlert />;
   }
 
+  // when uppy is done, notify parent
+  // this should close the dialog
+  uppy.on('complete', () => {
+    uppy.cancelAll();
+    onComplete();
+  });
+
   return (
     <>
       <Typography variant="h6">

diff --git a/src/components/file/UppyContext.tsx b/src/components/file/UppyContext.tsx
@@ -43,6 +43,7 @@ const UppyContextProvider = ({
       // @ts-ignore
       const data = result.successful[0].response?.body;
       onFileUploadComplete({ id: itemId, data });
+      setOpenStatusBar(false);
     }
 
     return false;

diff --git a/src/components/item/header/ModeButton.tsx b/src/components/item/header/ModeButton.tsx
@@ -49,7 +49,11 @@ const ModeButton = (): JSX.Element | null => {
       </IconButton>
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
         {Object.values(ItemLayoutMode).map((value) => (
-          <MenuItem onClick={() => handleChange(value)} value={value}>
+          <MenuItem
+            key={value}
+            onClick={() => handleChange(value)}
+            value={value}
+          >
             {modeToIcon(value)}
           </MenuItem>
         ))}

diff --git a/src/components/main/NewItemModal.tsx b/src/components/main/NewItemModal.tsx
@@ -163,7 +163,7 @@ const NewItemModal = ({ open, handleClose }: Props): JSX.Element => {
         );
       case ItemType.S3_FILE:
       case ItemType.LOCAL_FILE:
-        return <FileDashboardUploader />;
+        return <FileDashboardUploader onComplete={handleClose} />;
       case InternalItemType.ZIP:
         return <ImportZip />;
       case ItemType.H5P: