From feb4133bf269da234d1873908e3d1bcc97094bbc Mon Sep 17 00:00:00 2001
From: v-rocheleau <victor.rocheleau@mcgill.ca>
Date: Wed, 10 Jul 2024 20:22:33 +0000
Subject: [PATCH] dataset data types fetch/refresh logic

---
 src/components/datasets/DatasetOverview.js | 23 +++++++++++++++-------
 src/modules/datasets/hooks.js              | 12 +++++++++--
 src/modules/datasets/reducers.js           |  2 ++
 3 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/src/components/datasets/DatasetOverview.js b/src/components/datasets/DatasetOverview.js
index 1b9d86260..58abaeffa 100644
--- a/src/components/datasets/DatasetOverview.js
+++ b/src/components/datasets/DatasetOverview.js
@@ -8,13 +8,22 @@ import { useDatasetDataTypesByID } from "@/modules/datasets/hooks";
 import { datasetPropTypesShape, projectPropTypesShape } from "@/propTypes";
 
 const DatasetOverview = ({ isPrivate, project, dataset }) => {
-  const datasetDataTypes = useDatasetDataTypesByID(dataset.identifier);
-  const isFetchingDataset = datasetDataTypes?.isFetching;
+  const { dataTypesByID, isFetchingDataTypes, hasAttemptedDataTypes } = useDatasetDataTypesByID(dataset.identifier);
+
   // Count data types which actually have data in them for showing in the overview
-  const dataTypeCount = useMemo(
-    () => Object.values(datasetDataTypes?.itemsByID || {}).filter((value) => (value.count || 0) > 0).length,
-    [datasetDataTypes, dataset],
+  const dataTypesCount = useMemo(
+    () => Object.values(dataTypesByID ?? {}).filter((value) => (value.count || 0) > 0).length,
+    [dataTypesByID],
   );
+  const dataTypeDisplay = useMemo(() => {
+    if (isFetchingDataTypes) {
+      // refresh: display count based on previous state
+      if (hasAttemptedDataTypes) return dataTypesCount;
+      // first fetch: wait for data to display count
+      return EM_DASH;
+    }
+    return dataTypesCount;
+  }, [dataTypesCount, isFetchingDataTypes, hasAttemptedDataTypes]);
 
   return (
     <>
@@ -52,8 +61,8 @@ const DatasetOverview = ({ isPrivate, project, dataset }) => {
           <Statistic title="Created" value={new Date(Date.parse(dataset.created)).toLocaleString()} />
         </Col>
         <Col span={isPrivate ? 12 : 8}>
-          <Spin spinning={isFetchingDataset}>
-            <Statistic title="Data types" value={isFetchingDataset ? EM_DASH : dataTypeCount} />
+          <Spin spinning={isFetchingDataTypes}>
+            <Statistic title="Data types" value={dataTypeDisplay} />
           </Spin>
         </Col>
       </Row>
diff --git a/src/modules/datasets/hooks.js b/src/modules/datasets/hooks.js
index 0f83f6441..f21a3f191 100644
--- a/src/modules/datasets/hooks.js
+++ b/src/modules/datasets/hooks.js
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { useProjects } from "@/modules/metadata/hooks";
 import { useAppDispatch, useAppSelector } from "@/store";
 import { fetchDatasetDataTypesSummariesIfPossible, fetchDatasetsDataTypes } from "@/modules/datasets/actions";
@@ -27,5 +27,13 @@ export const useDatasetDataTypesByID = (datasetId) => {
   useEffect(() => {
     dispatch(fetchDatasetDataTypesSummariesIfPossible(datasetId));
   }, [datasetId]);
-  return useAppSelector((state) => state.datasetDataTypes.itemsByID[datasetId]);
+
+  const dataTypes = useAppSelector((state) => state.datasetDataTypes.itemsByID[datasetId]);
+  return useMemo(() => {
+    return {
+      dataTypesByID: dataTypes?.itemsByID,
+      isFetchingDataTypes: dataTypes?.isFetching ?? true,
+      hasAttemptedDataTypes: dataTypes?.hasAttempted ?? false,
+    };
+  }, [dataTypes]);
 };
diff --git a/src/modules/datasets/reducers.js b/src/modules/datasets/reducers.js
index 88b9d1dbb..5c241d047 100644
--- a/src/modules/datasets/reducers.js
+++ b/src/modules/datasets/reducers.js
@@ -26,6 +26,7 @@ export const datasetDataTypes = (
           ...state.itemsByID,
           [datasetID]: {
             itemsByID: state.itemsByID[datasetID]?.itemsByID ?? {},
+            hasAttempted: state.itemsByID[datasetID]?.hasAttempted ?? false,
             isFetching: true,
           },
         },
@@ -57,6 +58,7 @@ export const datasetDataTypes = (
           [datasetID]: {
             ...state.itemsByID[datasetID],
             isFetching: false,
+            hasAttempted: true,
           },
         },
       };