fix: heading corrections/wrapped navbar/added to Data Table

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>

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"
   }
 ]

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 />}>

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}
           />
         )}

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}
           />
         )}

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}
           />
         )}

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}
           />
         )}

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}
           />
         )}

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}
           />
         )}

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}
           />
         )}

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}
           />
         )}