Merge pull request #1459 from hackforla/1447-navigation-text-dashboard

Updated navigation text and routes from 'Reports' to 'Dashboard'
hackforla · Feb 16, 2023 · 725e5db · 725e5db
2 parents d2ed129 + 231d64a
commit 725e5db
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 7 deletions.
diff --git a/client/Routes.jsx b/client/Routes.jsx
@@ -10,7 +10,7 @@ import theme, { darkTheme } from '@theme/theme';
 import Paper from '@material-ui/core/Paper';
 import Box from '@material-ui/core/Box';
 import Desktop from '@components/main/Desktop';
-import Reports from '@components/main/Reports';
+import Dashboard from '@components/main/Dashboard';
 import Privacy from '@components/main/Privacy';
 import Faqs from '@components/main/Faqs';
 import About from '@components/main/About';
@@ -36,7 +36,7 @@ export default function Routes() {
       <ThemeProvider theme={theme}>
         <Paper elevation={0}>
           <Switch>
-            <Route path="/reports" component={Reports} />
+            <Route path="/dashboard" component={Dashboard} />
             <Route path="/privacy" component={Privacy} />
             <Route path="/faqs" component={Faqs} />
             <Route path="/research" component={Research} />

diff --git a/client/components/Header.jsx b/client/components/Header.jsx
@@ -75,14 +75,14 @@ const Header = () => {
           <Button className={classes.button}>Map</Button>
         </NavLink>
         <Button
-          id="report-anchor"
+          id="dashboard-anchor"
           onClick={handleClick}
           className={classes.button}
         >
-          Reports
+          Dashboard
         </Button>
         <Menu
-          id="report-menu"
+          id="dashboard-menu"
           anchorEl={anchorEl}
           keepMounted
           open={Boolean(anchorEl)}
@@ -94,12 +94,12 @@ const Header = () => {
           }}
           classes={{ paper: classes.menuPaper }}
         >
-          <Link to="/reports/overview-combined">
+          <Link to="/dashboard/overview-combined">
             <MenuItem onClick={handleClose} className={classes.menuItem}>
               Overview
             </MenuItem>
           </Link>
-          <Link to="/reports/nc-summary-comparison">
+          <Link to="/dashboard/nc-summary-comparison">
             <MenuItem onClick={handleClose} className={classes.menuItem}>
               Compare Two Neighborhoods
             </MenuItem>

diff --git a/client/components/main/Dashboard.jsx b/client/components/main/Dashboard.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
+import { Backdrop, CircularProgress } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    height: `calc(100vh - ${theme.header.height} - ${theme.footer.height})`,
+    width: '100vw',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: theme.header.height,
+    bottom: theme.footer.height,
+    height: `calc(100vh - ${theme.header.height} - ${theme.footer.height})`,
+  },
+}));
+
+const DASHBOARD_PATH = '/dashboard/';
+
+const Dashboard = () => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const classes = useStyles();
+
+  const url = process.env.REPORT_URL;
+  const location = useLocation();
+  const dashboardPath = location.pathname.slice(DASHBOARD_PATH.length - 1);
+  const dashboardRef = React.useRef(dashboardPath);
+
+  React.useEffect(() => {
+    if (dashboardPath !== dashboardRef.current) {
+      setIsLoading(true);
+    }
+
+    if (isLoading) {
+      const timer = setTimeout(() => setIsLoading(false), 2000);
+      return () => clearTimeout(timer);
+    }
+    dashboardRef.current = dashboardPath;
+
+    return () => {
+      // componentWillUnmount code goes here...
+    };
+  }, [dashboardPath, isLoading]);
+
+  return (
+    <div className={classes.root}>
+      <Backdrop
+        className={classes.backdrop}
+        style={{ zIndex: 100 }}
+        open={isLoading}
+        invisible={!isLoading}
+      >
+        <CircularProgress />
+      </Backdrop>
+      <iframe
+        title="dashboardFrame"
+        src={url + dashboardPath}
+        frameBorder="0"
+        allowFullScreen
+        style={{ width: '100%', height: '100%' }}
+      />
+    </div>
+  );
+};
+
+export default Dashboard;