From 3cc44f82de3f7f2e3f1309619f836b05002a891e Mon Sep 17 00:00:00 2001
From: Michael Taylor <mtaylor@michaeltaylor.dev>
Date: Mon, 4 Dec 2023 13:19:53 -0500
Subject: [PATCH] fix: redownload data on tab click for units and projects

---
 src/pages/Projects/index.js | 16 ++++++++++++++--
 src/pages/Units/index.js    | 14 ++++++++++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js
index 49eec0db..6a7006a5 100644
--- a/src/pages/Projects/index.js
+++ b/src/pages/Projects/index.js
@@ -174,11 +174,16 @@ const Projects = withTheme(({ theme }) => {
     [setTabValue],
   );
 
-  useEffect(() => {
+  const fetchProject = () => {
     const projectId = searchParams.get('projectId');
     if (projectId) {
       dispatch(getProjectData(projectId));
+      dispatch(getStagingData({ useMockedResponse: false }));
     }
+  };
+
+  useEffect(() => {
+    fetchProject();
     return () => dispatch(clearProjectData());
   }, [searchParams.get('projectId')]);
 
@@ -459,9 +464,13 @@ const Projects = withTheme(({ theme }) => {
         )}
         <StyledSubHeaderContainer>
           <Tabs value={tabValue} onChange={handleTabChange}>
-            <Tab label={intl.formatMessage({ id: 'committed' })} />
+            <Tab
+              onClick={fetchProject}
+              label={intl.formatMessage({ id: 'committed' })}
+            />
             {pageIsMyRegistryPage && (
               <Tab
+                onClick={fetchProject}
                 label={`${intl.formatMessage({ id: 'staging' })} (${
                   totalNumberOfEntries && totalNumberOfEntries.projects.staging
                 })`}
@@ -469,6 +478,7 @@ const Projects = withTheme(({ theme }) => {
             )}
             {pageIsMyRegistryPage && (
               <Tab
+                onClick={fetchProject}
                 label={`${intl.formatMessage({ id: 'pending' })} (${
                   pendingProjects.length
                 })`}
@@ -476,6 +486,7 @@ const Projects = withTheme(({ theme }) => {
             )}
             {pageIsMyRegistryPage && (
               <Tab
+                onClick={fetchProject}
                 label={`${intl.formatMessage({ id: 'failed' })} (${
                   totalNumberOfEntries && totalNumberOfEntries.projects.failed
                 })`}
@@ -483,6 +494,7 @@ const Projects = withTheme(({ theme }) => {
             )}
             {pageIsMyRegistryPage && (
               <Tab
+                onClick={fetchProject}
                 label={`${intl.formatMessage({ id: 'offers' })} (${
                   pendingTransferOffers.length
                 })`}
diff --git a/src/pages/Units/index.js b/src/pages/Units/index.js
index 839155dd..83f351b1 100644
--- a/src/pages/Units/index.js
+++ b/src/pages/Units/index.js
@@ -156,11 +156,15 @@ const Units = withTheme(({ theme }) => {
     [setTabValue],
   );
 
-  useEffect(() => {
+  const fetchUnits = () => {
     const unitId = searchParams.get('unitId');
     if (unitId) {
       dispatch(getUnitData(unitId));
     }
+  };
+
+  useEffect(() => {
+    fetchUnits();
     return () => dispatch(clearUnitData());
   }, [searchParams.get('unitId')]);
 
@@ -395,9 +399,13 @@ const Units = withTheme(({ theme }) => {
         </StyledHeaderContainer>
         <StyledSubHeaderContainer>
           <Tabs value={tabValue} onChange={handleTabChange}>
-            <Tab label={intl.formatMessage({ id: 'committed' })} />
+            <Tab
+              onClick={fetchUnits}
+              label={intl.formatMessage({ id: 'committed' })}
+            />
             {pageIsMyRegistryPage && (
               <Tab
+                onClick={fetchUnits}
                 label={`${intl.formatMessage({ id: 'staging' })} (${
                   totalNumberOfEntries && totalNumberOfEntries.units.staging
                 })`}
@@ -405,6 +413,7 @@ const Units = withTheme(({ theme }) => {
             )}
             {pageIsMyRegistryPage && (
               <Tab
+                onClick={fetchUnits}
                 label={`${intl.formatMessage({ id: 'pending' })} (${
                   totalNumberOfEntries && totalNumberOfEntries.units.pending
                 })`}
@@ -412,6 +421,7 @@ const Units = withTheme(({ theme }) => {
             )}
             {pageIsMyRegistryPage && (
               <Tab
+                onClick={fetchUnits}
                 label={`${intl.formatMessage({ id: 'failed' })} (${
                   totalNumberOfEntries && totalNumberOfEntries.units.failed
                 })`}