From 295f2d87e506355f78f7d4e182a7c117bcdfd84d Mon Sep 17 00:00:00 2001
From: Samir Kamal <1954121+skamril@users.noreply.github.com>
Date: Thu, 21 Mar 2024 18:47:54 +0100
Subject: [PATCH] feat(clusters-ui): use async loading from GroupedDataTable

---
 .../Modelization/Areas/Renewables/index.tsx   | 27 ++++++----------
 .../Modelization/Areas/Storages/index.tsx     | 31 +++++++------------
 .../Modelization/Areas/Thermal/index.tsx      | 27 ++++++----------
 3 files changed, 29 insertions(+), 56 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
index 316a15ca0f..e133d40cec 100644
--- 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
index 2f071850fe..6dd0f99ee5 100644
--- 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,7 +7,6 @@ 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,
@@ -15,8 +14,6 @@ import {
   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
index 467d908cc4..23f4811de6 100644
--- 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}
     />
   );
 }