Completed first labs build sprint ticket

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": "^2.2.4",
     "@craco/craco": "^6.4.3",
     "@material-ui/core": "^4.12.4",
     "@reduxjs/toolkit": "^1.8.2",

src/auth0-provider-with-history.js

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

src/callback-page.js

@@ -0,0 +1,12 @@
+import React from 'react';
+// import { NavBar } from "../components/navigation/desktop/nav-bar";
+// import { MobileNavBar } from "../components/navigation/mobile/mobile-nav-bar";
+
+export const CallbackPage = () => {
+  return (
+    <div className="page-layout">
+      <h1>CALLBACK PAGE</h1>
+      <div className="page-layout__content" />
+    </div>
+  );
+};

src/components/Layout/Header.jsx

@@ -1,12 +1,18 @@
+import { useAuth0 } from '@auth0/auth0-react';
 import React from 'react';
 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 { LoginButton } from '../common/login-button';
+import { LogoutButton } from '../common/logout-button';
+import { SignupButton } from '../common/signup-button';
 
 const { primary_accent_color } = colors;
 
 function HeaderContent() {
+  const { isAuthenticated } = useAuth0();
+
   return (
     <div
       style={{
@@ -25,9 +31,26 @@ 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>
+        {!isAuthenticated && (
+          <>
+            <SignupButton />
+            <LoginButton style={{ color: '#E2F0F7', paddingRight: '75px' }} />
+          </>
+        )}
+        {isAuthenticated && (
+          <>
+            <Link
+              to="/profile"
+              style={{ color: '#E2F0F7', paddingRight: '75px' }}
+            >
+              Profile
+            </Link>
+            <LogoutButton style={{ color: '#E2F0F7', paddingRight: '75px' }} />
+          </>
+        )}
       </div>
     </div>
   );

src/components/common/login-button.js

@@ -0,0 +1,32 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import React from 'react';
+
+export const LoginButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  const handleLogin = async () => {
+    await loginWithRedirect({
+      appState: {
+        returnTo: '/profile',
+      },
+      authorizationParams: {
+        screen_hint: 'signup',
+      },
+    });
+  };
+
+  return (
+    <button
+      className="button__login"
+      onClick={handleLogin}
+      style={{
+        backgroundColor: 'transparent',
+        color: '#E2F0F7',
+        border: 'none',
+        cursor: 'pointer',
+      }}
+    >
+      Log In
+    </button>
+  );
+};

src/components/common/logout-button.js

@@ -0,0 +1,29 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import React from 'react';
+
+export const LogoutButton = () => {
+  const { logout } = useAuth0();
+
+  const handleLogout = () => {
+    logout({
+      logoutParams: {
+        returnTo: window.location.origin,
+      },
+    });
+  };
+
+  return (
+    <button
+      className="button__logout"
+      onClick={handleLogout}
+      style={{
+        backgroundColor: 'transparent',
+        color: '#E2F0F7',
+        border: 'none',
+        cursor: 'pointer',
+      }}
+    >
+      Log Out
+    </button>
+  );
+};

src/components/common/signup-button.js

@@ -0,0 +1,33 @@
+import { useAuth0 } from '@auth0/auth0-react';
+import React from 'react';
+
+export const SignupButton = () => {
+  const { loginWithRedirect } = useAuth0();
+
+  const handleSignUp = async () => {
+    await loginWithRedirect({
+      appState: {
+        returnTo: '/profile',
+      },
+      authorizationParams: {
+        screen_hint: 'signup',
+      },
+    });
+  };
+
+  return (
+    <button
+      className="button__sign-up"
+      onClick={handleSignUp}
+      style={{
+        backgroundColor: 'transparent',
+        color: '#E2F0F7',
+        marginRight: '75px',
+        border: 'none',
+        cursor: 'pointer',
+      }}
+    >
+      Sign Up
+    </button>
+  );
+};

src/components/pages/DataVisualizations/GraphWrapper.jsx

@@ -10,7 +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';
+//import test_data from '../../../data/test_data.json';
 import { colors } from '../../../styles/data_vis_colors';
 import ScrollToTopOnMount from '../../../utils/scrollToTopOnMount';
 
@@ -19,10 +19,12 @@ const { background_color } = colors;
 function GraphWrapper(props) {
   const { set_view, dispatch } = props;
   let { office, view } = useParams();
+
   if (!view) {
     set_view('time-series');
     view = 'time-series';
   }
+
   let map_to_render;
   if (!office) {
     switch (view) {
@@ -50,6 +52,7 @@ function GraphWrapper(props) {
         break;
     }
   }
+
   function updateStateWithNewData(years, view, office, stateSettingCallback) {
     /*
           _                                                                             _
@@ -73,33 +76,49 @@ function GraphWrapper(props) {
 
     */
 
+    // updated test data to API data (SR 3/16/24)
+    const baseURL = `https://hrf-asylum-be-b.herokuapp.com/cases`;
+    let endpoint =
+      view === 'citizenship' ? '/citizenshipSummary' : '/fiscalSummary';
+
     if (office === 'all' || !office) {
       axios
-        .get(process.env.REACT_APP_API_URI, {
+        //.get(process.env.REACT_APP_API_URI, {
+        .get(`${baseURL}${endpoint}`, {
           // 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!
+          //stateSettingCallback(view, office, view === 'citizenship' ? result.data : [result.data]); // <-- `test_data` here can be simply replaced by `result.data` in prod!
+          stateSettingCallback(
+            view,
+            office,
+            view === 'citizenship' ? result.data : [result.data]
+          );
         })
         .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!
+        //.get(process.env.REACT_APP_API_URI, {
+        // mock URL, can be simply replaced by `${Real_Production_URL}/summary` in prod!
+        .get(`${baseURL}${endpoint}`, {
           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!
+          stateSettingCallback(
+            view,
+            office,
+            view === 'citizenship' ? result.data : [result.data]
+          ); // <-- `test_data` here can be simply replaced by `result.data` in prod!
         })
         .catch(err => {
           console.error(err);

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

@@ -58,7 +58,7 @@ function CitizenshipMapAll(props) {
     'Citizenship',
     'Total Cases',
     '% Granted',
-    '% Admin Close / Dismissal',
+    '% Admin Closed / Dismissal',
     '% Denied',
   ];
 
@@ -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, index) => {
+          return (
+            <option key={index} value={a}>
+              {a.toUpperCase()}
+            </option>
+          );
         })}
       </select>
       <p>Table view</p>

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

@@ -57,7 +57,7 @@ function CitizenshipMapSingleOffice(props) {
     'Citizenship',
     'Total Cases',
     '% Granted',
-    '% Admin Close / Dismissal',
+    '% Admin Closed / Dismissal',
     '% Denied',
   ];
   return (
@@ -107,10 +107,14 @@ function CitizenshipMapSingleOffice(props) {
         }}
         style={{ width: '100%', fontWeight: '900' }}
       />
-      <label for="regionSelect">Select another region below</label>
+      <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, index) => {
+          return (
+            <option key={index} value={a}>
+              {a.toUpperCase()}
+            </option>
+          );
         })}
       </select>
       <p>Table view</p>