refactor(ui): review changes

AntaresSimulatorTeam · Dec 17, 2024 · ff2dedc · ff2dedc
1 parent e7fda56
commit ff2dedc
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 29 deletions.
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/index.tsx
@@ -58,7 +58,8 @@ function BindingConstraints() {
 
     const firstConstraintId = data[0].id;
     dispatch(setCurrentBindingConst(firstConstraintId));
-  }, [constraintsRes, currentConstraintId, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [constraintsRes.data, currentConstraintId, dispatch]);
 
   ////////////////////////////////////////////////////////////////
   // Event Handlers

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Links/LinkView/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Links/LinkView/index.tsx
@@ -19,7 +19,6 @@ import Form from "../../../../../../common/Form";
 import LinkForm from "./LinkForm";
 import { getDefaultValues } from "./utils";
 import UsePromiseCond from "../../../../../../common/utils/UsePromiseCond";
-import { Skeleton } from "@mui/material";
 
 interface Props {
   link: LinkElement;
@@ -45,7 +44,6 @@ function LinkView(props: Props) {
           <LinkForm link={link} study={study} />
         </Form>
       )}
-      ifPending={() => <Skeleton sx={{ height: 1, transform: "none" }} />}
     />
   );
 }

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Links/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Links/index.tsx
@@ -12,7 +12,6 @@
  * This file is part of the Antares project.
  */
 
-import { Skeleton } from "@mui/material";
 import { useOutletContext } from "react-router";
 import { StudyMetadata } from "../../../../../../common/types";
 import EmptyView from "../../../../../common/page/SimpleContent";
@@ -44,6 +43,7 @@ function Links() {
     [study.id],
   );
 
+  // Handle automatic selection of the first link
   useEffect(() => {
     const { data } = linksRes;
 
@@ -53,7 +53,8 @@ function Links() {
 
     const firstLinkId = makeLinkId(data[0].area1, data[0].area2);
     dispatch(setCurrentLink(firstLinkId));
-  }, [linksRes, currentLink, dispatch]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [linksRes.data, currentLink, dispatch]);
 
   ////////////////////////////////////////////////////////////////
   // Event Handlers
@@ -75,7 +76,6 @@ function Links() {
       <ViewWrapper>
         <UsePromiseCond
           response={linksRes}
-          ifPending={() => <Skeleton sx={{ height: 1, transform: "none" }} />}
           ifFulfilled={(data) =>
             data.length > 0 && currentLink ? (
               <LinkView link={currentLink} />

diff --git a/webapp/src/components/App/Singlestudy/explore/TableModeList/index.tsx b/webapp/src/components/App/Singlestudy/explore/TableModeList/index.tsx
@@ -45,7 +45,7 @@ function TableModeList() {
 
   const [selectedTemplateId, setSelectedTemplateId] = useState<
     TableTemplate["id"] | undefined
-  >();
+  >(templates[0]?.id);
 
   const [dialog, setDialog] = useState<{
     type: "add" | "edit" | "delete";
@@ -57,11 +57,12 @@ function TableModeList() {
   const dialogTemplate =
     dialog && templates.find((tp) => tp.id === dialog.templateId);
 
+  // Handle automatic selection of the first element
   useEffect(() => {
-    if (templates.length > 0 && !selectedTemplateId) {
+    if (templates.length > 0 && !selectedTemplate) {
       setSelectedTemplateId(templates[0].id);
     }
-  }, [templates, selectedTemplateId]);
+  }, [templates, selectedTemplate]);
 
   // Update local storage
   useUpdateEffect(() => {

diff --git a/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/index.tsx b/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/index.tsx
@@ -16,7 +16,7 @@ import { useEffect, useState } from "react";
 import { useOutletContext, useNavigate } from "react-router-dom";
 import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
-import { Backdrop, Box, CircularProgress, Skeleton } from "@mui/material";
+import { Backdrop, Box, CircularProgress } from "@mui/material";
 import { usePromise as usePromiseWrapper } from "react-use";
 import { useSnackbar } from "notistack";
 import { StudyMetadata } from "../../../../../../common/types";
@@ -46,6 +46,7 @@ import SplitView from "../../../../../common/SplitView";
 import { getLinks } from "@/services/api/studies/links";
 import { MatrixDataDTO } from "@/components/common/Matrix/shared/types";
 import ViewWrapper from "@/components/common/page/ViewWrapper";
+import SimpleLoader from "@/components/common/loaders/SimpleLoader";
 
 function Candidates() {
   const [t] = useTranslation();
@@ -115,6 +116,7 @@ function Candidates() {
       { errorMessage: t("xpansion.error.loadConfiguration"), deps: [study] },
     );
 
+  // Handle automatic selection of the first element
   useEffect(() => {
     if (candidates && candidates.length > 0 && !selectedItem) {
       setSelectedItem(candidates[0].name);
@@ -233,7 +235,7 @@ function Candidates() {
   };
 
   if (isCandidatesLoading || isLinksLoading) {
-    return <Skeleton sx={{ height: 1, transform: "none" }} />;
+    return <SimpleLoader />;
   }
 
   if (isRejected) {

diff --git a/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/index.tsx b/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/index.tsx
@@ -16,7 +16,6 @@ import { useState } from "react";
 import { useOutletContext } from "react-router-dom";
 import { AxiosError } from "axios";
 import { useTranslation } from "react-i18next";
-import { Skeleton } from "@mui/material";
 import { useSnackbar } from "notistack";
 import { StudyMetadata } from "../../../../../../common/types";
 import { XpansionResourceType, XpansionSettings } from "../types";
@@ -35,6 +34,7 @@ import { removeEmptyFields } from "../../../../../../services/utils/index";
 import DataViewerDialog from "../../../../../common/dialogs/DataViewerDialog";
 import usePromiseWithSnackbarError from "../../../../../../hooks/usePromiseWithSnackbarError";
 import ViewWrapper from "@/components/common/page/ViewWrapper";
+import UsePromiseCond from "@/components/common/utils/UsePromiseCond";
 
 const resourceContentFetcher = (
   resourceType: string,
@@ -56,11 +56,7 @@ function Settings() {
   const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
   const { enqueueSnackbar } = useSnackbar();
 
-  const {
-    data: settings,
-    isLoading: settingsLoading,
-    reload: reloadSettings,
-  } = usePromiseWithSnackbarError(
+  const settingsRes = usePromiseWithSnackbarError(
     async () => {
       if (study) {
         return getXpansionSettings(study.id);
@@ -129,7 +125,7 @@ function Settings() {
     } catch (e) {
       enqueueErrorSnackbar(t("xpansion.error.updateSettings"), e as AxiosError);
     } finally {
-      reloadSettings();
+      settingsRes.reload();
       enqueueSnackbar(t("studies.success.saveData"), {
         variant: "success",
       });
@@ -158,20 +154,21 @@ function Settings() {
   // JSX
   ////////////////////////////////////////////////////////////////
 
-  if (settingsLoading || !settings) {
-    return <Skeleton sx={{ height: 1, transform: "none" }} />;
-  }
-
   return (
     <>
       <ViewWrapper>
-        <SettingsForm
-          settings={settings}
-          candidates={candidates || []}
-          constraints={constraints || []}
-          weights={weights || []}
-          updateSettings={updateSettings}
-          onRead={getResourceContent}
+        <UsePromiseCond
+          response={settingsRes}
+          ifFulfilled={(data) => (
+            <SettingsForm
+              settings={data}
+              candidates={candidates || []}
+              constraints={constraints || []}
+              weights={weights || []}
+              updateSettings={updateSettings}
+              onRead={getResourceContent}
+            />
+          )}
         />
       </ViewWrapper>