From e24f1da828a0c1d57a5ddc8c2fa3b77de7abbe69 Mon Sep 17 00:00:00 2001
From: Anis SMAIL <anis.smail_externe@rte-france.com>
Date: Thu, 5 Dec 2024 18:02:50 +0100
Subject: [PATCH] refactor(ui): refactor duplicate code and fix style

---
 .../App/Studies/StudiesList/index.tsx         | 13 ++-
 .../App/Studies/StudyTree/index.tsx           | 91 +++++++------------
 2 files changed, 41 insertions(+), 63 deletions(-)

diff --git a/webapp/src/components/App/Studies/StudiesList/index.tsx b/webapp/src/components/App/Studies/StudiesList/index.tsx
index 2b4c2d7cb0..b88f1a5490 100644
--- a/webapp/src/components/App/Studies/StudiesList/index.tsx
+++ b/webapp/src/components/App/Studies/StudiesList/index.tsx
@@ -26,8 +26,6 @@ import {
   FormControl,
   InputLabel,
   IconButton,
-  Checkbox,
-  FormControlLabel,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
@@ -67,6 +65,7 @@ import RefreshButton from "../RefreshButton";
 import { scanFolder } from "../../../../services/api/study";
 import useEnqueueErrorSnackbar from "../../../../hooks/useEnqueueErrorSnackbar";
 import ConfirmationDialog from "../../../common/dialogs/ConfirmationDialog";
+import CheckBoxFE from "@/components/common/fieldEditors/CheckBoxFE";
 
 const CARD_TARGET_WIDTH = 500;
 const CARD_HEIGHT = 250;
@@ -263,13 +262,13 @@ function StudiesList(props: StudiesListProps) {
           </Typography>
 
           {strictFolderFilter ? (
-            <Tooltip title={t("studies.filters.strictfolder") as string}>
+            <Tooltip title={t("studies.filters.strictfolder")}>
               <IconButton onClick={toggleStrictFolder}>
                 <FolderIcon color="secondary" />
               </IconButton>
             </Tooltip>
           ) : (
-            <Tooltip title={t("studies.filters.showAllDescendants") as string}>
+            <Tooltip title={t("studies.filters.showAllDescendants")}>
               <IconButton onClick={toggleStrictFolder}>
                 <AccountTreeIcon color="secondary" />
               </IconButton>
@@ -295,11 +294,11 @@ function StudiesList(props: StudiesListProps) {
               open
             >
               {`${t("studies.scanFolder")} ${folder}?`}
-              <FormControlLabel
-                control={<Checkbox checked={isRecursiveScan} />}
+              <CheckBoxFE
                 label={t("studies.requestDeepScan")}
+                value={isRecursiveScan}
                 onChange={handleRecursiveScan}
-              />{" "}
+              />
             </ConfirmationDialog>
           )}
         </Box>
diff --git a/webapp/src/components/App/Studies/StudyTree/index.tsx b/webapp/src/components/App/Studies/StudyTree/index.tsx
index f7bd95aec5..354082b4de 100644
--- a/webapp/src/components/App/Studies/StudyTree/index.tsx
+++ b/webapp/src/components/App/Studies/StudyTree/index.tsx
@@ -26,7 +26,7 @@ import useEnqueueErrorSnackbar from "@/hooks/useEnqueueErrorSnackbar";
 import useUpdateEffectOnce from "@/hooks/useUpdateEffectOnce";
 import { fetchAndInsertSubfolders, fetchAndInsertWorkspaces } from "./utils";
 import { useTranslation } from "react-i18next";
-import { AxiosError } from "axios";
+import { toError } from "@/utils/fnUtils";
 
 function StudyTree() {
   const initialStudiesTree = useAppSelector(getStudiesTree);
@@ -36,81 +36,60 @@ function StudyTree() {
   const dispatch = useAppDispatch();
   const [t] = useTranslation();
 
-  // Initialize folders once we have the tree
-  // we use useUpdateEffectOnce because at first render initialStudiesTree isn't initialized
-  useUpdateEffectOnce(() => {
-    const initializeFolders = async () => {
-      try {
-        const treeWithWorkspaces =
-          await fetchAndInsertWorkspaces(initialStudiesTree);
-        const childrenPaths = treeWithWorkspaces.children.map(
-          (child) => `root${child.path}`,
-        );
-        const [updatedTree, failedPaths] = await fetchAndInsertSubfolders(
-          childrenPaths,
-          treeWithWorkspaces,
-        );
-        setStudiesTree(updatedTree);
-        failedPaths.forEach((path) => {
-          enqueueErrorSnackbar(
-            t("studies.tree.error.failToFetchFolder", {
-              path,
-              interpolation: { escapeValue: false },
-            }),
-            t("studies.tree.error.detailsInConsole"),
-          );
-        });
-      } catch (error) {
-        setStudiesTree(initialStudiesTree);
-        enqueueErrorSnackbar(
-          t("studies.tree.error.failToFetchWorkspace"),
-          error as AxiosError,
-        );
-      }
-    };
-
-    initializeFolders();
-  }, [initialStudiesTree]);
-
-  ////////////////////////////////////////////////////////////////
-  // Event Handlers
-  ////////////////////////////////////////////////////////////////
+  const updateTree = async (itemId: string, studyTreeNode: StudyTreeNode) => {
+    let treeAfterWorkspacesUpdate = studiesTree;
+    let chidrenPaths = studyTreeNode.children.map(
+      (child) => `root${child.path}`,
+    );
 
-  const handleTreeItemClick = async (
-    itemId: string,
-    studyTreeNode: StudyTreeNode,
-  ) => {
-    dispatch(updateStudyFilters({ folder: itemId }));
     if (itemId === "root") {
       try {
-        const nextTree = await fetchAndInsertWorkspaces(studiesTree);
-        setStudiesTree(nextTree);
+        treeAfterWorkspacesUpdate = await fetchAndInsertWorkspaces(studiesTree);
+        chidrenPaths = treeAfterWorkspacesUpdate.children.map(
+          (child) => `root${child.path}`,
+        );
       } catch (error) {
         enqueueErrorSnackbar(
           "studies.tree.error.failToFetchWorkspace",
-          error as AxiosError,
+          toError(error),
         );
       }
     }
-    const chidrenPaths = studyTreeNode.children.map(
-      (child) => `root${child.path}`,
-    );
     // children paths and current element path
-    const [nextTree, failedPath] = await fetchAndInsertSubfolders(
+    let [treeAfterChildrenUpdate, failedPath] = await fetchAndInsertSubfolders(
       chidrenPaths,
-      studiesTree,
+      treeAfterWorkspacesUpdate,
     );
-    setStudiesTree(nextTree);
-    for (const path of failedPath) {
+    if (failedPath.length > 0) {
       enqueueErrorSnackbar(
         t("studies.tree.error.failToFetchFolder", {
-          path,
+          path: failedPath.join(" "),
           interpolation: { escapeValue: false },
         }),
         t("studies.tree.error.detailsInConsole"),
       );
     }
+    setStudiesTree(treeAfterChildrenUpdate);
+  };
+
+  // Initialize folders once we have the tree
+  // we use useUpdateEffectOnce because at first render initialStudiesTree isn't initialized
+  useUpdateEffectOnce(() => {
+    updateTree("root", initialStudiesTree);
+  }, [initialStudiesTree]);
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleTreeItemClick = async (
+    itemId: string,
+    studyTreeNode: StudyTreeNode,
+  ) => {
+    dispatch(updateStudyFilters({ folder: itemId }));
+    updateTree(itemId, studyTreeNode);
   };
+
   ////////////////////////////////////////////////////////////////
   // JSX
   ////////////////////////////////////////////////////////////////