ref(UploadModal): simplify the use of Dialog (#948)

Author: ddecrulle

web/package.json

@@ -60,7 +60,7 @@
         "flexsearch": "0.7.43",
         "i18nifty": "^3.2.5",
         "json5": "2.2.3",
-        "keycloakify": "^11.8.17",
+        "keycloakify": "^11.8.19",
         "memoizee": "^0.4.17",
         "minimal-polyfills": "^2.2.3",
         "mui-icons-material-lazy": "^1.0.4",

web/src/ui/pages/myFiles/Explorer/ExplorerUploadModal/ExplorerUploadModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, memo } from "react";
+import { memo } from "react";
 import { useTranslation } from "ui/i18n";
 import { tss } from "tss";
 import { ExplorerUploadModalDropArea } from "./ExplorerUploadModalDropArea";
@@ -7,10 +7,7 @@ import { ExplorerUploadProgress } from "./ExplorerUploadProgress";
 import { Dialog } from "onyxia-ui/Dialog";
 import { Button } from "onyxia-ui/Button";
 import { useArrayDiff } from "powerhooks/useArrayDiff";
-import type { StatefulReadonlyEvt } from "evt";
-import { useRerenderOnStateChange } from "evt/hooks/useRerenderOnStateChange";
-import { useConst } from "powerhooks/useConst";
-import { Evt } from "evt";
+
 import { declareComponentKeys } from "i18nifty";
 
 export type ExplorerUploadModalProps = {
@@ -37,34 +34,6 @@ export const ExplorerUploadModal = memo((props: ExplorerUploadModalProps) => {
         }
     });
 
-    const evtFilesBeingUploaded = useConst(() => Evt.create(filesBeingUploaded));
-
-    useEffect(() => {
-        evtFilesBeingUploaded.state = filesBeingUploaded;
-    }, [filesBeingUploaded]);
-
-    return (
-        <DialogWrapper
-            isOpen={isOpen}
-            onClose={onClose}
-            evtFilesBeingUploaded={evtFilesBeingUploaded}
-            onFileSelected={onFileSelected}
-        />
-    );
-});
-
-type DialogWrapperProps = Omit<ExplorerUploadModalProps, "filesBeingUploaded"> & {
-    evtFilesBeingUploaded: StatefulReadonlyEvt<
-        ExplorerUploadModalProps["filesBeingUploaded"]
-    >;
-};
-
-//NOTE: Dialog can't re-render the Dialog without unmounting and recreating body and button.
-// we use a stateful evt that is a constant so that this wrapper component doesn't re render
-// wen filesBeingUploaded changes.
-const DialogWrapper = memo((props: DialogWrapperProps) => {
-    const { evtFilesBeingUploaded, isOpen, onClose, onFileSelected } = props;
-
     const { t } = useTranslation({ ExplorerUploadModal });
 
     return (
@@ -74,7 +43,7 @@ const DialogWrapper = memo((props: DialogWrapperProps) => {
             title={t("import files")}
             body={
                 <ExplorerUploadModalBody
-                    evtFilesBeingUploaded={evtFilesBeingUploaded}
+                    filesBeingUploaded={filesBeingUploaded}
                     onFileSelected={onFileSelected}
                 />
             }
@@ -88,20 +57,17 @@ const DialogWrapper = memo((props: DialogWrapperProps) => {
 });
 
 const { ExplorerUploadModalBody } = (() => {
-    type Props = Pick<DialogWrapperProps, "evtFilesBeingUploaded"> &
-        Pick<ExplorerUploadModalProps, "onFileSelected">;
+    type Props = Pick<ExplorerUploadModalProps, "onFileSelected" | "filesBeingUploaded">;
 
     const ExplorerUploadModalBody = memo((props: Props) => {
-        const { onFileSelected, evtFilesBeingUploaded } = props;
+        const { onFileSelected, filesBeingUploaded } = props;
 
         const { classes } = useStyles();
 
-        useRerenderOnStateChange(evtFilesBeingUploaded);
-
         return (
             <div className={classes.root}>
                 <ExplorerUploadModalDropArea onFileSelected={onFileSelected} />
-                {evtFilesBeingUploaded.state.map(
+                {filesBeingUploaded.map(
                     ({ directoryPath, basename, size, uploadPercent }) => (
                         <ExplorerUploadProgress
                             className={classes.progress}

web/yarn.lock

@@ -5224,10 +5224,10 @@ jsonify@^0.0.1:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
   integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
 
-keycloakify@^11.8.17:
-  version "11.8.17"
-  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-11.8.17.tgz#9e4fda7959ab2cfad1c388e54a5d9df5e6056e0f"
-  integrity sha512-4VaQADY77wyiu1YeDnJMoH0QQsYZUFJ58wa7vCw6QkB8Ktgp3NAIWver5/cNSB2VYXHoeWXe3Wa13dzqqdKSWg==
+keycloakify@^11.8.19:
+  version "11.8.19"
+  resolved "https://registry.yarnpkg.com/keycloakify/-/keycloakify-11.8.19.tgz#1d7d7961ebdc3c56e2d0600b997c9336dcfcf7aa"
+  integrity sha512-a698r7KvAGycJGfs07cIs8W+jFJZfKj2ze/cJgYAzXwbFAZ1ST0WneoECfXz6Dxqwi1bg/9R3WG8p59IRufNBw==
   dependencies:
     tsafe "^1.8.5"