Merge pull request #14 from BloomTech-Labs/revert-13-testing

Revert "Testing"

package.json

@@ -16,7 +16,6 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-form": "^1.52.13",
     "@ant-design/pro-table": "^2.62.7",
-    "@auth0/auth0-react": "^1.12.1",
     "@craco/craco": "^6.4.3",
     "@material-ui/core": "^4.12.4",
     "@reduxjs/toolkit": "^1.8.2",
@@ -56,7 +55,7 @@
   },
   "husky": {
     "hooks": {
-
+      "pre-commit": "lint-staged"
     }
   },
   "jest": {

src/components/Layout/Header.jsx

@@ -3,14 +3,10 @@ import { Image } from 'antd';
 import { Link } from 'react-router-dom';
 import Logo from '../../styles/Images/WhiteLogo.png';
 import { colors } from '../../styles/data_vis_colors';
-import AuthButton from '../auth/authButton';
-import { useAuth0 } from '@auth0/auth0-react';
-
 
 const { primary_accent_color } = colors;
 
 function HeaderContent() {
-  const { isAuthenticated } = useAuth0();
   return (
     <div
       style={{
@@ -29,15 +25,9 @@ function HeaderContent() {
         <Link to="/" style={{ color: '#E2F0F7', paddingRight: '75px' }}>
           Home
         </Link>
-        <Link to="/graphs" style={{ color: '#E2F0F7', paddingRight: '75px' }}>
+        <Link to="/graphs" style={{ color: '#E2F0F7' }}>
           Graphs
         </Link>
-        <AuthButton />
-        {isAuthenticated ?
-          <Link to='/profile' style={{ color: '#E2F0F7' }}>
-            Profile
-          </Link> : ''
-        }
       </div>
     </div>
   );

src/components/pages/DataVisualizations/GraphWrapper.jsx

@@ -10,8 +10,7 @@ import YearLimitsSelect from './YearLimitsSelect';
 import ViewSelect from './ViewSelect';
 import axios from 'axios';
 import { resetVisualizationQuery } from '../../../state/actionCreators';
-// import test_data from '../../../data/test_data.json';
-// comment out unused test data import
+import test_data from '../../../data/test_data.json';
 import { colors } from '../../../styles/data_vis_colors';
 import ScrollToTopOnMount from '../../../utils/scrollToTopOnMount';
 
@@ -51,16 +50,7 @@ function GraphWrapper(props) {
         break;
     }
   }
-
-  async function updateStateWithNewData(
-    years,
-    view,
-    office,
-    stateSettingCallback
-  ) {
-    const apiUrl = 'https://hrf-asylum-be-b.herokuapp.com/cases';
-    // declare url once to make easier to manage and update
-
+  function updateStateWithNewData(years, view, office, stateSettingCallback) {
     /*
           _                                                                             _
         |                                                                                 |
@@ -83,43 +73,39 @@ function GraphWrapper(props) {
     
     */
 
-    Promise.all([
-      await axios.get(`${apiUrl}/fiscalSummary`, {
-        params: {
-          from: years[0],
-          to: years[1],
-        },
-      }),
-
-      await axios.get(`${apiUrl}/citizenshipSummary`, {
-        params: {
-          from: years[0],
-          to: years[1],
-          office: office,
-        },
-      }),
-    ])
-      .then(([fiscalCall, citizenCall]) => {
-        // handle both requests and handle response together
-        // recieves an array containing the responses of both api calls
-        const fiscalData = fiscalCall.data;
-        const citizenshipData = citizenCall.data;
-        const combinedData = [
-          {
-            yearResults: fiscalData.yearResults,
-            citizenshipResults: citizenshipData,
+    if (office === 'all' || !office) {
+      axios
+        .get(process.env.REACT_APP_API_URI, {
+          // mock URL, can be simply replaced by `${Real_Production_URL}/summary` in prod!
+          params: {
+            from: years[0],
+            to: years[1],
           },
-        ];
-        //combines data from responses into one array
-
-        stateSettingCallback(view, office, [combinedData][0]);
-        // pass all relevant data based on paramaters
-      })
-      .catch(err => {
-        console.error(err);
-      });
+        })
+        .then(result => {
+          stateSettingCallback(view, office, test_data); // <-- `test_data` here can be simply replaced by `result.data` in prod!
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    } else {
+      axios
+        .get(process.env.REACT_APP_API_URI, {
+          // mock URL, can be simply replaced by `${Real_Production_URL}/summary` in prod!
+          params: {
+            from: years[0],
+            to: years[1],
+            office: office,
+          },
+        })
+        .then(result => {
+          stateSettingCallback(view, office, test_data); // <-- `test_data` here can be simply replaced by `result.data` in prod!
+        })
+        .catch(err => {
+          console.error(err);
+        });
+    }
   }
-
   const clearQuery = (view, office) => {
     dispatch(resetVisualizationQuery(view, office));
   };

src/components/pages/DataVisualizations/Graphs/CitizenshipMapAll.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { useState, useEffect } from 'react';
 import Plot from 'react-plotly.js';
 import { connect } from 'react-redux';
 import Table from './TableComponents/Table';
@@ -115,12 +115,8 @@ function CitizenshipMapAll(props) {
       />
       <label htmlFor="regionSelect">Select another region below</label>
       <select name="regionSelect" onChange={handleScopeChange}>
-        {geoScopeArray.map((a, idx) => {
-          return (
-            <Fragment key={idx}>
-              <option value={a}>{a.toUpperCase()}</option>;
-            </Fragment>
-          );
+        {geoScopeArray.map(a => {
+          return <option value={a}>{a.toUpperCase()}</option>;
         })}
       </select>
       <p>Table view</p>

src/components/pages/DataVisualizations/Graphs/TableComponents/TableRow.jsx

@@ -17,7 +17,6 @@ function TableRow(props) {
       }}
     >
       {columns.map((property, idx) => {
-        //eslint-disable-line
         if (row) {
           if (typeof row[property] === 'object') {
             return (
@@ -29,7 +28,7 @@ function TableRow(props) {
             );
           } else {
             return (
-              <div key={idx} style={{ overflow: 'hidden', flex: '1' }}>
+              <div  key={idx} style={{ overflow: 'hidden', flex: '1' }}>
                 <TableInnerSquare
                   innerData={row[property]}
                   rowHeight={rowHeight}