From 7803a2f785c70e0bf4df2847830551546cccf342 Mon Sep 17 00:00:00 2001
From: Stanley Pageot <stanley@rxdu.io>
Date: Thu, 30 Dec 2021 10:05:09 -0800
Subject: [PATCH] fix: no pending data message

---
 src/components/blocks/StagingDataTable.js | 14 +-------------
 src/pages/Projects/index.js               | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/blocks/StagingDataTable.js b/src/components/blocks/StagingDataTable.js
index 34e4948d..a68d3281 100644
--- a/src/components/blocks/StagingDataTable.js
+++ b/src/components/blocks/StagingDataTable.js
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import styled, { withTheme } from 'styled-components';
 import { TableCellHeaderText, TableCellText } from '../typography';
 import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';
-import { MinusIcon, H3 } from '..';
+import { MinusIcon } from '..';
 import { TableDrawer } from './';
 import { useWindowSize } from '../hooks/useWindowSize';
 
@@ -76,13 +76,6 @@ const StagingDataTableContainer = styled('div')`
   height: 100%;
 `;
 
-const NoDataMessageContainer = styled('div')`
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-`;
-
 const ChangeGroupHeader = ({ headings, appStore }) => {
   return (
     <THead selectedTheme={appStore.theme}>
@@ -202,11 +195,6 @@ const StagingDataTable = withTheme(({ headings, data, deleteStagingData }) => {
   return (
     <StagingDataTableContainer ref={ref}>
       <div style={{ height: `${height}px`, overflow: 'auto' }}>
-        {data.length === 0 && (
-          <NoDataMessageContainer>
-            <H3>No staged data at this time</H3>
-          </NoDataMessageContainer>
-        )}
         {data &&
           headings &&
           data.map((changeGroup, index) => (
diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js
index 4ae15ade..a8a310aa 100644
--- a/src/pages/Projects/index.js
+++ b/src/pages/Projects/index.js
@@ -17,6 +17,7 @@ import {
   SelectSizeEnum,
   SelectTypeEnum,
   CreateProjectForm,
+  H3
 } from '../../components';
 
 import {
@@ -48,6 +49,13 @@ const StyledSubHeaderContainer = styled('div')`
   padding-right: 27.23px;
 `;
 
+const NoDataMessageContainer = styled('div')`
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+
 const Projects = withRouter(() => {
   const dispatch = useDispatch();
   const [create, setCreate] = useState(false);
@@ -155,6 +163,11 @@ const Projects = withRouter(() => {
           )}
         </TabPanel>
         <TabPanel value={tabValue} index={1} style={{ height: '100%' }}>
+          {climateWarehouseStore.stagingData && climateWarehouseStore.stagingData.projects.staging.length === 0 && (
+            <NoDataMessageContainer>
+              <H3>No staged data at this time</H3>
+            </NoDataMessageContainer>
+          )}
           {climateWarehouseStore.stagingData && (
             <StagingDataTable
               headings={headings}
@@ -164,6 +177,11 @@ const Projects = withRouter(() => {
           )}
         </TabPanel>
         <TabPanel value={tabValue} index={2} style={{ height: '100%' }}>
+          {climateWarehouseStore.stagingData && climateWarehouseStore.stagingData.projects.pending.length === 0 && (
+            <NoDataMessageContainer>
+              <H3>No pending data at this time</H3>
+            </NoDataMessageContainer>
+          )}
           {climateWarehouseStore.stagingData && (
             <StagingDataTable
               headings={headings}