Integrate Dash reports into the app

client/Routes.jsx

@@ -1,15 +1,13 @@
 import React from 'react';
-import {
-  Switch,
-  Route,
-  Redirect,
-} from 'react-router-dom';
+import { Switch, Route, Redirect } from 'react-router-dom';
 import Desktop from '@components/main/Desktop';
+import Reports from '@components/main/Reports';
 
 export default function Routes() {
   return (
     <Switch>
       <Route path="/map" component={Desktop} />
+      <Route path="/reports" component={Reports} />
       <Route path="/">
         <Redirect to="map" />
       </Route>

client/components/Header.jsx

@@ -1,22 +1,30 @@
 import React from 'react';
-// import { NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   AppBar,
   Button,
   Toolbar,
   Typography,
+  Menu,
+  MenuItem,
 } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
+  MuiMenuItemButton: {
+    color: 'white',
+  },
   appBar: {
     height: theme.header.height,
     backgroundColor: theme.palette.primary.main,
   },
   button: {
     textTransform: 'none',
     fontFamily: 'Roboto',
-    marginLeft: theme.spacing(2),
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    color: 'white',
+    textDecoration: 'none',
   },
   title: {
     ...theme.typography.h1,
@@ -30,14 +38,65 @@ const useStyles = makeStyles(theme => ({
 // TODO: links/routing, mobile
 const Header = () => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
   return (
     <AppBar position="static" className={classes.appBar}>
       <Toolbar>
         <Typography variant="h1" className={classes.title}>
           311DATA
         </Typography>
-        <Button className={classes.button}>Explore 311 Data</Button>
+        <Button
+          id="report-anchor"
+          onClick={handleClick}
+          className={classes.button}
+        >
+          Reports
+        </Button>
+        <Menu
+          id="report-menu"
+          anchorEl={anchorEl}
+          keepMounted
+          open={Boolean(anchorEl)}
+          onClose={handleClose}
+          getContentAnchorEl={null}
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+        >
+          <Link to="/reports/dashboards/overview">
+            <MenuItem onClick={handleClose} button className={classes.button}>
+              Overview
+            </MenuItem>
+          </Link>
+          <Link to="/reports/dashboards/recent">
+            <MenuItem onClick={handleClose} button className={classes.button}>
+              Recent
+            </MenuItem>
+          </Link>
+          <Link to="/reports/dashboards/neighborhood">
+            <MenuItem onClick={handleClose} button className={classes.button}>
+              Neighborhood
+            </MenuItem>
+          </Link>
+          <Link to="/reports/dashboards/neighborhood_recent">
+            <MenuItem onClick={handleClose} button className={classes.button}>
+              Neighborhood Recent
+            </MenuItem>
+          </Link>
+        </Menu>
+        <Link to="/map">
+          <Button className={classes.button}>Explore 311 Data</Button>
+        </Link>
         <Button className={classes.button}>About 311 Data</Button>
         <Button className={classes.button}>Contact Us</Button>
         <Button className={classes.button}>Help Center</Button>

client/components/main/Reports.jsx

@@ -0,0 +1,66 @@
+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',
+    backgroundColor: 'black',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: theme.header.height,
+    bottom: theme.footer.height,
+    height: `calc(100vh - ${theme.header.height} - ${theme.footer.height})`,
+  },
+}));
+
+const Reports = () => {
+  const [isLoading, setIsLoading] = React.useState(true);
+  const classes = useStyles();
+
+  const url = process.env.REPORT_URL;
+  let reportPath = '/dashboards/overview';
+  const location = useLocation();
+  reportPath = location.pathname.slice(8);
+  const reportRef = React.useRef(reportPath);
+
+  /* eslint-disable consistent-return */
+  React.useEffect(() => {
+    if (reportPath !== reportRef.current) {
+      setIsLoading(true);
+    }
+
+    if (isLoading) {
+      const timer = setTimeout(() => setIsLoading(false), 2000);
+      return () => clearTimeout(timer);
+    }
+    reportRef.current = reportPath;
+  }, [reportPath, isLoading]);
+
+  return (
+    <div
+      className={classes.root}
+    >
+      <Backdrop
+        className={classes.backdrop}
+        style={{ zIndex: 100 }}
+        open={isLoading}
+        invisible={!isLoading}
+      >
+        <CircularProgress />
+      </Backdrop>
+      <iframe
+        title="reportFrame"
+        src={url + reportPath}
+        frameBorder="0"
+        allowFullScreen
+        style={{ width: '100%', height: '100%', minHeight: '55em' }}
+      />
+    </div>
+  );
+};
+
+export default Reports;