From 179857debd74bb394b07dd3b050ff0879a4b1139 Mon Sep 17 00:00:00 2001
From: Stanley Pageot <stanley@rxdu.io>
Date: Thu, 2 Dec 2021 10:15:22 -0800
Subject: [PATCH] fix: heading corrections/wrapped navbar/added to Data Table

---
 src/components/blocks/DataTable.js      |  2 +-
 src/mocks/project-locations.json        | 10 +++++-----
 src/navigation/AppNavigator.js          |  5 ++++-
 src/pages/demo/CoBenefits/index.js      |  2 +-
 src/pages/demo/Locations/index.js       |  2 +-
 src/pages/demo/Projects/index.js        |  3 +--
 src/pages/demo/Qualifications/index.js  |  3 +--
 src/pages/demo/Ratings/index.js         |  2 +-
 src/pages/demo/RelatedProjects/index.js |  3 +--
 src/pages/demo/Units/index.js           |  3 +--
 src/pages/demo/Vintages/index.js        |  3 +--
 11 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/blocks/DataTable.js b/src/components/blocks/DataTable.js
index 38325eb9..b4a6880d 100644
--- a/src/components/blocks/DataTable.js
+++ b/src/components/blocks/DataTable.js
@@ -180,7 +180,7 @@ const DataTable = withTheme(({ headings, data }) => {
             <Tr index={index} selectedTheme={appStore.theme} key={index}>
               {Object.keys(record).map((key, index) => (
                 <Td selectedTheme={appStore.theme} key={index}>
-                  {record[key]}
+                  {record[key].toString()}
                 </Td>
               ))}
             </Tr>
diff --git a/src/mocks/project-locations.json b/src/mocks/project-locations.json
index 644275ba..27a158ba 100644
--- a/src/mocks/project-locations.json
+++ b/src/mocks/project-locations.json
@@ -1,23 +1,23 @@
 [
   {
-    "in_country_region": "true",
+    "in_country_region": true,
     "host_country": "United States"
   },
   {
 
-    "in_country_region": "true",
+    "in_country_region": true,
     "host_country": "United States"
   },
   {
-    "in_country_region": "false",
+    "in_country_region": false,
     "host_country": "China"
   },
   {
-    "in_country_region": "false",
+    "in_country_region": false,
     "host_country": "Russia"
   },
   {
-    "in_country_region": "true",
+    "in_country_region": true,
     "host_country": "United States"
   }
 ]
diff --git a/src/navigation/AppNavigator.js b/src/navigation/AppNavigator.js
index d0467396..0f93fabd 100644
--- a/src/navigation/AppNavigator.js
+++ b/src/navigation/AppNavigator.js
@@ -5,13 +5,16 @@ import { IndeterminateProgressOverlay, NavBar } from '../components/';
 import * as Pages from '../pages';
 
 import { AppContainer, AppHeader } from '../components';
+import { Card } from '@mui/material';
 
 const AppNavigator = () => {
   const { showProgressOverlay } = useSelector(store => store.app);
   return (
     <AppContainer>
       <AppHeader />
-      <NavBar />
+      <Card>
+        <NavBar />
+      </Card>
       <Router>
         {showProgressOverlay && <IndeterminateProgressOverlay />}
         <Suspense fallback={<IndeterminateProgressOverlay />}>
diff --git a/src/pages/demo/CoBenefits/index.js b/src/pages/demo/CoBenefits/index.js
index 7abc4156..c59966fc 100644
--- a/src/pages/demo/CoBenefits/index.js
+++ b/src/pages/demo/CoBenefits/index.js
@@ -17,7 +17,7 @@ const CoBenefits = () => {
         <div>Co-Benefits</div>
         {climateWarehouseStore.coBenefits && (
           <DataTable
-            headings={['Co-Benefit']}
+            headings={Object.keys(climateWarehouseStore.coBenefits[0])}
             data={climateWarehouseStore.coBenefits}
           />
         )}
diff --git a/src/pages/demo/Locations/index.js b/src/pages/demo/Locations/index.js
index fd0dccca..5c1a530d 100644
--- a/src/pages/demo/Locations/index.js
+++ b/src/pages/demo/Locations/index.js
@@ -16,7 +16,7 @@ const Locations = () => {
         <div>Locations</div>
         {climateWarehouseStore.projectLocations && (
           <DataTable
-            headings={['in_country_region', 'host_country']}
+            headings={Object.keys(climateWarehouseStore.projectLocations[0])}
             data={climateWarehouseStore.projectLocations}
           />
         )}
diff --git a/src/pages/demo/Projects/index.js b/src/pages/demo/Projects/index.js
index fc134777..d1d17f43 100644
--- a/src/pages/demo/Projects/index.js
+++ b/src/pages/demo/Projects/index.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Card, DataTable } from '../../../components';
 import { useSelector, useDispatch } from 'react-redux';
-import { projectsResponseStub } from '../../../mocks';
 import { getProjects } from '../../../store/actions/climateWarehouseActions';
 
 const Projects = () => {
@@ -17,7 +16,7 @@ const Projects = () => {
         <div>Projects</div>
         {climateWarehouseStore.projects && (
           <DataTable
-            headings={Object.keys(projectsResponseStub[0])}
+            headings={Object.keys(climateWarehouseStore.projects[0])}
             data={climateWarehouseStore.projects}
           />
         )}
diff --git a/src/pages/demo/Qualifications/index.js b/src/pages/demo/Qualifications/index.js
index 3b073fef..7a90a7d1 100644
--- a/src/pages/demo/Qualifications/index.js
+++ b/src/pages/demo/Qualifications/index.js
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { DataTable } from '../../../components';
 import { Card } from '../../../components';
-import { qualificationsResponseStub } from '../../../mocks';
 import { getQualifications } from '../../../store/actions/climateWarehouseActions';
 
 const Qualifications = () => {
@@ -17,7 +16,7 @@ const Qualifications = () => {
         <div>Qualifications</div>
         {climateWarehouseStore.qualifications && (
           <DataTable
-            headings={Object.keys(qualificationsResponseStub[0])}
+            headings={Object.keys(climateWarehouseStore.qualifications[0])}
             data={climateWarehouseStore.qualifications}
           />
         )}
diff --git a/src/pages/demo/Ratings/index.js b/src/pages/demo/Ratings/index.js
index bcf131aa..07aebd49 100644
--- a/src/pages/demo/Ratings/index.js
+++ b/src/pages/demo/Ratings/index.js
@@ -15,7 +15,7 @@ const Ratings = () => {
         <div>Project Ratings</div>
         {climateWarehouseStore.ratings && (
           <DataTable
-            headings={['type', 'rating', 'link', 'scale']}
+            headings={Object.keys(climateWarehouseStore.ratings[0])}
             data={climateWarehouseStore.ratings}
           />
         )}
diff --git a/src/pages/demo/RelatedProjects/index.js b/src/pages/demo/RelatedProjects/index.js
index c441c3c6..416c46ee 100644
--- a/src/pages/demo/RelatedProjects/index.js
+++ b/src/pages/demo/RelatedProjects/index.js
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { Card, DataTable } from '../../../components';
 import { getRelatedProjects } from '../../../store/actions/climateWarehouseActions';
 import { useSelector, useDispatch } from 'react-redux';
-import { relatedProjectsResponseStub } from '../../../mocks';
 
 const RelatedProjects = () => {
   const dispatch = useDispatch();
@@ -18,7 +17,7 @@ const RelatedProjects = () => {
         <div>Related Project</div>
         {climateWarehouseStore.relatedProjects && (
           <DataTable
-            headings={Object.keys(relatedProjectsResponseStub[0])}
+            headings={Object.keys(climateWarehouseStore.relatedProjects[0])}
             data={climateWarehouseStore.relatedProjects}
           />
         )}
diff --git a/src/pages/demo/Units/index.js b/src/pages/demo/Units/index.js
index d6317773..59a244d4 100644
--- a/src/pages/demo/Units/index.js
+++ b/src/pages/demo/Units/index.js
@@ -2,7 +2,6 @@ import React, { useEffect } from 'react';
 import { Card, DataTable } from '../../../components';
 import { getUnits } from '../../../store/actions/climateWarehouseActions';
 import { useSelector, useDispatch } from 'react-redux';
-import { unitsResponseStub } from '../../../mocks';
 
 const Units = () => {
   const dispatch = useDispatch();
@@ -16,7 +15,7 @@ const Units = () => {
         <div>Units</div>
         {climateWarehouseStore.units && (
           <DataTable
-            headings={Object.keys(unitsResponseStub[0])}
+            headings={Object.keys(climateWarehouseStore.units[0])}
             data={climateWarehouseStore.units}
           />
         )}
diff --git a/src/pages/demo/Vintages/index.js b/src/pages/demo/Vintages/index.js
index 0612649d..2d144527 100644
--- a/src/pages/demo/Vintages/index.js
+++ b/src/pages/demo/Vintages/index.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Card, DataTable } from '../../../components';
 import { useSelector, useDispatch } from 'react-redux';
-import { vintagesResponseStub } from '../../../mocks';
 import { getVintages } from '../../../store/actions/climateWarehouseActions';
 
 const Vintages = () => {
@@ -16,7 +15,7 @@ const Vintages = () => {
         <div>Vintages</div>
         {climateWarehouseStore.vintages && (
           <DataTable
-            headings={Object.keys(vintagesResponseStub[0])}
+            headings={Object.keys(climateWarehouseStore.vintages[0])}
             data={climateWarehouseStore.vintages}
           />
         )}