Merge pull request #13 from JaDa757/testing

Testing

package.json

@@ -16,6 +16,7 @@
     "@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",
@@ -55,7 +56,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+
     }
   },
   "jest": {

src/components/Layout/Header.jsx

@@ -3,10 +3,14 @@ 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={{
@@ -25,9 +29,15 @@ function HeaderContent() {
         <Link to="/" style={{ color: '#E2F0F7', paddingRight: '75px' }}>
           Home
         </Link>
-        <Link to="/graphs" style={{ color: '#E2F0F7' }}>
+        <Link to="/graphs" style={{ color: '#E2F0F7', paddingRight: '75px' }}>
           Graphs
         </Link>
+        <AuthButton />
+        {isAuthenticated ?
+          <Link to='/profile' style={{ color: '#E2F0F7' }}>
+            Profile
+          </Link> : ''
+        }
       </div>
     </div>
   );

src/components/auth/Login.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const Login = () => {
+    const { loginWithRedirect } = useAuth0();
+    return (
+        <button
+            style={{                 
+                color: '#E2F0F7',
+                paddingRight: '75px',
+                background: 'none',
+                border: 'none',                
+                font: 'inherit',
+                cursor: 'pointer',
+
+            }}
+            className="btn btn-primary btn-block"
+            onClick={() => loginWithRedirect()}
+        >
+            Log In
+        </button >
+
+    );
+};
+
+export default Login;

src/components/auth/Logout.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useAuth0 } from '@auth0/auth0-react';
+
+const Logout = () => {
+  const { logout } = useAuth0();
+  return (
+    <button
+      style={{
+        color: '#E2F0F7',
+        paddingRight: '75px',
+        background: 'none',
+        border: 'none',
+        font: 'inherit',
+        cursor: 'pointer',
+
+      }}
+      className="btn btn-danger btn-block"
+      onClick={() =>
+        logout({
+          returnTo: window.location.origin,
+        })
+      }
+    >
+      Log Out
+    </button>
+  );
+};
+
+export default Logout;

src/components/auth/UserProfile.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { useAuth0 } from '@auth0/auth0-react';
+
+const Profile = () => {
+  const { user } = useAuth0();
+  const { name, picture, email } = user;
+
+  return (
+    <div>
+      <div className="row align-items-center profile-header">
+        <div className="col-md-2 mb-3">
+          <img
+            src={picture}
+            alt="Profile"
+            className="rounded-circle img-fluid profile-picture mb-3 mb-md-0"
+          />
+        </div>
+        <div className="col-md text-center text-md-left">
+          <h2>{name}</h2>
+          <p className="lead text-muted">{email}</p>
+        </div>
+      </div>
+      <div className="row">
+        <pre className="col-12 text-light bg-dark p-4">
+          {JSON.stringify(user, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+export default Profile;

src/components/auth/auth0-provider-with-history.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { Auth0Provider } from '@auth0/auth0-react';
+
+const Auth0ProviderWithHistory = ({ children }) => {
+  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
+  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
+
+
+
+  const history = useHistory();
+
+  const onRedirectCallback = (appState) => {
+    history.push(appState?.returnTo || window.location.pathname);
+  };
+
+  return (
+    <Auth0Provider
+      domain={domain}
+      clientId={clientId}
+      redirectUri={window.location.origin}
+      onRedirectCallback={onRedirectCallback}
+    >
+      {children}
+    </Auth0Provider>
+  );
+};
+
+export default Auth0ProviderWithHistory;

src/components/auth/authButton.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import Login from './Login';
+import Logout from './Logout';
+
+
+import { useAuth0 } from '@auth0/auth0-react';
+
+const AuthButton = () => {
+    const { isAuthenticated } = useAuth0();
+
+    return isAuthenticated ? <Logout /> : <Login />;
+};
+
+export default AuthButton;

src/components/pages/DataVisualizations/GraphWrapper.jsx

@@ -10,7 +10,8 @@ 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';
+// import test_data from '../../../data/test_data.json';
+// comment out unused test data import
 import { colors } from '../../../styles/data_vis_colors';
 import ScrollToTopOnMount from '../../../utils/scrollToTopOnMount';
 
@@ -50,7 +51,16 @@ function GraphWrapper(props) {
         break;
     }
   }
-  function updateStateWithNewData(years, view, office, stateSettingCallback) {
+
+  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
+
     /*
           _                                                                             _
         |                                                                                 |
@@ -73,39 +83,43 @@ function GraphWrapper(props) {
     
     */
 
-    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],
-          },
-        })
-        .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,
+    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,
           },
-        })
-        .then(result => {
-          stateSettingCallback(view, office, test_data); // <-- `test_data` here can be simply replaced by `result.data` in prod!
-        })
-        .catch(err => {
-          console.error(err);
-        });
-    }
+        ];
+        //combines data from responses into one array
+
+        stateSettingCallback(view, office, [combinedData][0]);
+        // pass all relevant data based on paramaters
+      })
+      .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 } from 'react';
+import React, { useState, useEffect, Fragment } from 'react';
 import Plot from 'react-plotly.js';
 import { connect } from 'react-redux';
 import Table from './TableComponents/Table';
@@ -115,8 +115,12 @@ function CitizenshipMapAll(props) {
       />
       <label htmlFor="regionSelect">Select another region below</label>
       <select name="regionSelect" onChange={handleScopeChange}>
-        {geoScopeArray.map(a => {
-          return <option value={a}>{a.toUpperCase()}</option>;
+        {geoScopeArray.map((a, idx) => {
+          return (
+            <Fragment key={idx}>
+              <option value={a}>{a.toUpperCase()}</option>;
+            </Fragment>
+          );
         })}
       </select>
       <p>Table view</p>

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

@@ -17,6 +17,7 @@ function TableRow(props) {
       }}
     >
       {columns.map((property, idx) => {
+        //eslint-disable-line
         if (row) {
           if (typeof row[property] === 'object') {
             return (
@@ -28,7 +29,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}