feat(clusters-ui): use async loading from GroupedDataTable

AntaresSimulatorTeam · Mar 21, 2024 · 465be71 · 465be71
1 parent 4c1e1f3
commit 465be71
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 68 deletions.
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Renewables/index.tsx
@@ -19,9 +19,6 @@ import {
   capacityAggregationFn,
   useClusterDataWithCapacity,
 } from "../common/utils";
-import SimpleLoader from "../../../../../../common/loaders/SimpleLoader";
-import SimpleContent from "../../../../../../common/page/SimpleContent";
-import UsePromiseCond from "../../../../../../common/utils/UsePromiseCond";
 
 function Renewables() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -32,11 +29,11 @@ function Renewables() {
   const columnHelper = createMRTColumnHelper<RenewableClusterWithCapacity>();
 
   const {
-    clusters,
     clustersWithCapacity,
     totalUnitCount,
     totalInstalledCapacity,
     totalEnabledCapacity,
+    isLoading,
   } = useClusterDataWithCapacity<RenewableCluster>(
     () => getRenewableClusters(study.id, areaId),
     t("studies.error.retrieveData"),
@@ -130,20 +127,14 @@ function Renewables() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <UsePromiseCond
-      response={clusters}
-      ifPending={() => <SimpleLoader />}
-      ifResolved={() => (
-        <GroupedDataTable
-          data={clustersWithCapacity}
-          columns={columns}
-          groups={RENEWABLE_GROUPS}
-          onCreate={handleCreateRow}
-          onDelete={handleDeleteSelection}
-          onNameClick={handleNameClick}
-        />
-      )}
-      ifRejected={(error) => <SimpleContent title={error?.toString()} />}
+    <GroupedDataTable
+      isLoading={isLoading}
+      data={clustersWithCapacity}
+      columns={columns}
+      groups={RENEWABLE_GROUPS}
+      onCreate={handleCreateRow}
+      onDelete={handleDeleteSelection}
+      onNameClick={handleNameClick}
     />
   );
 }

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Storages/index.tsx
@@ -7,16 +7,13 @@ import { StudyMetadata } from "../../../../../../../common/types";
 import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
 import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 import GroupedDataTable from "../../../../../../common/GroupedDataTable";
-import SimpleLoader from "../../../../../../common/loaders/SimpleLoader";
 import {
   Storage,
   getStorages,
   deleteStorages,
   createStorage,
   STORAGE_GROUPS,
 } from "./utils";
-import SimpleContent from "../../../../../../common/page/SimpleContent";
-import UsePromiseCond from "../../../../../../common/utils/UsePromiseCond";
 import usePromiseWithSnackbarError from "../../../../../../../hooks/usePromiseWithSnackbarError";
 
 function Storages() {
@@ -27,7 +24,7 @@ function Storages() {
   const areaId = useAppSelector(getCurrentAreaId);
   const columnHelper = createMRTColumnHelper<Storage>();
 
-  const storages = usePromiseWithSnackbarError(
+  const { data: storages, isLoading } = usePromiseWithSnackbarError(
     () => getStorages(study.id, areaId),
     {
       errorMessage: t("studies.error.retrieveData"),
@@ -37,14 +34,14 @@ function Storages() {
 
   const { totalWithdrawalNominalCapacity, totalInjectionNominalCapacity } =
     useMemo(() => {
-      if (!storages.data) {
+      if (!storages) {
         return {
           totalWithdrawalNominalCapacity: 0,
           totalInjectionNominalCapacity: 0,
         };
       }
 
-      return storages.data.reduce(
+      return storages.reduce(
         (acc, { withdrawalNominalCapacity, injectionNominalCapacity }) => {
           acc.totalWithdrawalNominalCapacity += withdrawalNominalCapacity;
           acc.totalInjectionNominalCapacity += injectionNominalCapacity;
@@ -175,20 +172,14 @@ function Storages() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <UsePromiseCond
-      response={storages}
-      ifPending={() => <SimpleLoader />}
-      ifResolved={(data) => (
-        <GroupedDataTable
-          data={data}
-          columns={columns}
-          groups={STORAGE_GROUPS}
-          onCreate={handleCreateRow}
-          onDelete={handleDeleteSelection}
-          onNameClick={handleNameClick}
-        />
-      )}
-      ifRejected={(error) => <SimpleContent title={error?.toString()} />}
+    <GroupedDataTable
+      isLoading={isLoading}
+      data={storages || []}
+      columns={columns}
+      groups={STORAGE_GROUPS}
+      onCreate={handleCreateRow}
+      onDelete={handleDeleteSelection}
+      onNameClick={handleNameClick}
     />
   );
 }

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/index.tsx
@@ -15,13 +15,10 @@ import {
 import useAppSelector from "../../../../../../../redux/hooks/useAppSelector";
 import { getCurrentAreaId } from "../../../../../../../redux/selectors";
 import GroupedDataTable from "../../../../../../common/GroupedDataTable";
-import SimpleLoader from "../../../../../../common/loaders/SimpleLoader";
-import SimpleContent from "../../../../../../common/page/SimpleContent";
 import {
   capacityAggregationFn,
   useClusterDataWithCapacity,
 } from "../common/utils";
-import UsePromiseCond from "../../../../../../common/utils/UsePromiseCond";
 
 function Thermal() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -32,11 +29,11 @@ function Thermal() {
   const columnHelper = createMRTColumnHelper<ThermalClusterWithCapacity>();
 
   const {
-    clusters,
     clustersWithCapacity,
     totalUnitCount,
     totalInstalledCapacity,
     totalEnabledCapacity,
+    isLoading,
   } = useClusterDataWithCapacity<ThermalCluster>(
     () => getThermalClusters(study.id, areaId),
     t("studies.error.retrieveData"),
@@ -144,20 +141,14 @@ function Thermal() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <UsePromiseCond
-      response={clusters}
-      ifPending={() => <SimpleLoader />}
-      ifResolved={() => (
-        <GroupedDataTable
-          data={clustersWithCapacity}
-          columns={columns}
-          groups={THERMAL_GROUPS}
-          onCreate={handleCreateRow}
-          onDelete={handleDeleteSelection}
-          onNameClick={handleNameClick}
-        />
-      )}
-      ifRejected={(error) => <SimpleContent title={error?.toString()} />}
+    <GroupedDataTable
+      isLoading={isLoading}
+      data={clustersWithCapacity}
+      columns={columns}
+      groups={THERMAL_GROUPS}
+      onCreate={handleCreate}
+      onDelete={handleDelete}
+      onNameClick={handleNameClick}
     />
   );
 }

diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/common/utils.ts b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/common/utils.ts
@@ -6,7 +6,6 @@ import { editStudy } from "../../../../../../../services/api/study";
 import { ThermalClusterWithCapacity } from "../Thermal/utils";
 import { RenewableClusterWithCapacity } from "../Renewables/utils";
 import usePromiseWithSnackbarError from "../../../../../../../hooks/usePromiseWithSnackbarError";
-import { UsePromiseResponse } from "../../../../../../../hooks/usePromise";
 
 export const saveField = R.curry(
   (
@@ -64,35 +63,32 @@ type ClusterWithCapacity<T extends BaseCluster> = T & {
 };
 
 interface UseClusterDataWithCapacityReturn<T extends BaseCluster> {
-  clusters: UsePromiseResponse<T[]>;
   clustersWithCapacity: Array<ClusterWithCapacity<T>>;
   totalUnitCount: number;
   totalInstalledCapacity: number;
   totalEnabledCapacity: number;
+  isLoading: boolean;
 }
 
 export const useClusterDataWithCapacity = <T extends BaseCluster>(
   fetchFn: () => Promise<T[]>,
   errorMessage: string,
   deps: DependencyList,
 ): UseClusterDataWithCapacityReturn<T> => {
-  const clusters: UsePromiseResponse<T[]> = usePromiseWithSnackbarError(
-    fetchFn,
-    {
-      errorMessage,
-      deps,
-    },
-  );
+  const { data: clusters, isLoading } = usePromiseWithSnackbarError(fetchFn, {
+    errorMessage,
+    deps,
+  });
 
   const clustersWithCapacity: Array<ClusterWithCapacity<T>> = useMemo(
     () =>
-      clusters.data?.map((cluster) => {
+      clusters?.map((cluster) => {
         const { unitCount, nominalCapacity, enabled } = cluster;
         const installedCapacity = unitCount * nominalCapacity;
         const enabledCapacity = enabled ? installedCapacity : 0;
         return { ...cluster, installedCapacity, enabledCapacity };
       }) || [],
-    [clusters.data],
+    [clusters],
   );
 
   const { totalUnitCount, totalInstalledCapacity, totalEnabledCapacity } =
@@ -113,10 +109,10 @@ export const useClusterDataWithCapacity = <T extends BaseCluster>(
     }, [clustersWithCapacity]);
 
   return {
-    clusters,
     clustersWithCapacity,
     totalUnitCount: Math.floor(totalUnitCount),
     totalInstalledCapacity: Math.floor(totalInstalledCapacity),
     totalEnabledCapacity: Math.floor(totalEnabledCapacity),
+    isLoading,
   };
 };