Metadata fetching, expanding filter menu, desktop layout

client/App.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'proptypes';
+import { BrowserRouter } from 'react-router-dom';
 import { connect } from 'react-redux';
-import { ThemeProvider } from '@material-ui/core/styles';
-import { CssBaseline } from '@material-ui/core';
 import { getMetadataRequest } from '@reducers/metadata';
 import Header from '@components/Header';
 import Footer from '@components/Footer';
-import MapContainer from '@components/Map';
-import theme from './theme/theme';
+import Routes from './Routes';
 
 const App = ({
   getMetadata,
@@ -17,12 +15,11 @@ const App = ({
   });
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
+    <BrowserRouter>
       <Header />
-      <MapContainer />
+      <Routes />
       <Footer />
-    </ThemeProvider>
+    </BrowserRouter>
   );
 };
 

client/Routes.jsx

@@ -1,27 +1,18 @@
-/* eslint-disable */
-// temporarily disabling eslint here until v2 refactor
 import React from 'react';
 import {
   Switch,
   Route,
+  Redirect,
 } from 'react-router-dom';
-
-import PrivacyPolicy from '@components/privacyPolicy/PrivacyPolicy';
-import Contact from './components/contact/Contact';
-import About from './components/about/About';
-import Body from './components/main/body/Body';
-import Faq from './components/faq/Faq';
+import Desktop from '@components/main/Desktop';
 
 export default function Routes() {
   return (
     <Switch>
-      <Route path="/contact" component={Contact} />
-      <Route path="/about" component={About} />
-      <Route path="/privacy" component={PrivacyPolicy} />
-      <Route path="/comparison" component={Body} />
-      <Route path="/faq" component={Faq} />
-      <Route path="/data" component={Body} />
-      <Route path="/" component={About} />
+      <Route path="/map" component={Desktop} />
+      <Route path="/">
+        <Redirect to="map" />
+      </Route>
     </Switch>
   );
 }

client/components/FilterMenu/index.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardContent from '@material-ui/core/CardContent';
+import IconButton from '@material-ui/core/IconButton';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
+import Collapse from '@material-ui/core/Collapse';
+import Typography from '@material-ui/core/Typography';
+import GearButton from '../GearButton';
+
+const useStyles = makeStyles(theme => ({
+  card: {
+    width: 300,
+    backgroundColor: theme.palette.primary.main,
+    position: 'absolute',
+    left: 35,
+    top: 75,
+    borderRadius: 10,
+  },
+  header: {
+    color: theme.palette.text.cyan,
+    padding: 5,
+    paddingRight: 0,
+  },
+  headerAction: {
+    margin: 'auto',
+  },
+  headerTitle: {
+    marginLeft: 10,
+    fontSize: 20,
+    fontWeight: 600,
+    letterSpacing: '2px',
+  },
+  button: {
+    padding: 5,
+    paddingRight: 0,
+    color: theme.palette.text.dark,
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+    },
+    '& svg': {
+      fontSize: 30,
+    },
+  },
+}));
+
+const FilterMenu = () => {
+  const [expanded, setExpanded] = useState(false);
+  const classes = useStyles();
+
+  // TODO: add basic/advanced toggle switch
+  return (
+    <Card className={classes.card}>
+      <CardHeader
+        classes={{
+          root: classes.header,
+          action: classes.headerAction,
+        }}
+        title={(
+          <>
+            <GearButton
+              aria-label="toggle map menu"
+              // TODO: toggle left slider menu
+              // eslint-disable-next-line
+              onClick={() => console.log('toggle left slider')}
+            />
+            <Typography
+              className={classes.headerTitle}
+              component="span"
+            >
+              FILTERS
+            </Typography>
+          </>
+        )}
+        action={(
+          <IconButton
+            className={classes.button}
+            aria-label="toggle filter menu"
+            onClick={() => setExpanded(prevExpanded => !prevExpanded)}
+            disableFocusRipple
+            disableRipple
+          >
+            {expanded ? <ArrowDropUpIcon /> : <ArrowDropDownIcon /> }
+          </IconButton>
+        )}
+      />
+      <Collapse in={expanded}>
+        <CardContent>
+          TODO: Selectors
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default FilterMenu;

client/components/Footer.jsx

@@ -8,19 +8,19 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 import moment from 'moment';
 
-// TODO: pull style constants into mui theme
 const useStyles = makeStyles(theme => ({
   footer: {
     position: 'absolute',
     bottom: 0,
-    height: '40px',
+    height: theme.footer.height,
     width: '100%',
     backgroundColor: theme.palette.primary.dark,
   },
   lastUpdated: {
-    color: theme.palette.typography.dark,
-    lineHeight: '40px',
+    color: theme.palette.text.dark,
+    lineHeight: theme.footer.height,
     fontSize: '14px',
+    fontFamily: 'Roboto',
   },
 }));
 

client/components/GearButton/index.jsx

@@ -4,9 +4,9 @@ import { IconButton } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import SettingsSharpIcon from '@material-ui/icons/SettingsSharp';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   gearIcon: {
-    color: 'white',
+    color: theme.palette.text.dark,
     background: '#29404F',
     borderRadius: '12px',
     height: '33px',
@@ -16,7 +16,7 @@ const useStyles = makeStyles({
   button: {
     padding: '0',
   },
-});
+}));
 
 const GearButton = ({ onClick }) => {
   const { gearIcon, button } = useStyles();
@@ -44,6 +44,8 @@ const GearButton = ({ onClick }) => {
       role="button"
       aria-pressed={pressed}
       aria-label="Toggle Sidebar"
+      disableFocusRipple
+      disableRipple
     >
       <SettingsSharpIcon className={gearIcon} />
     </IconButton>

client/components/Header.jsx

@@ -10,15 +10,17 @@ import {
 
 const useStyles = makeStyles(theme => ({
   appBar: {
-    height: theme.palette.header.height,
+    height: theme.header.height,
     backgroundColor: theme.palette.primary.main,
   },
   button: {
     textTransform: 'none',
+    fontFamily: 'Roboto',
+    marginLeft: theme.spacing(2),
   },
   title: {
     flexGrow: 1,
-    fontFamily: theme.palette.typography.fontFamily,
+    fontFamily: theme.typography.fontFamily,
     fontSize: '30px',
     fontWeight: 'bold',
     letterSpacing: '4px',

client/components/Map/index.jsx → client/components/Map/index.js

@@ -12,11 +12,7 @@ import Map from './Map';
 
 const styles = theme => ({
   root: {
-    position: 'absolute',
-    top: theme.palette.header.height,
-    bottom: theme.palette.footer.height,
-    left: 0,
-    right: 0,
+    height: '100%',
   },
 })
 

client/components/main/Desktop/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import MapContainer from '@components/Map';
+import FilterMenu from '@components/FilterMenu';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    position: 'absolute',
+    top: theme.header.height,
+    bottom: theme.footer.height,
+    left: 0,
+    right: 0,
+  },
+}));
+
+const Desktop = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <MapContainer />
+      <FilterMenu />
+    </div>
+  );
+};
+
+export default Desktop;

client/index.js

@@ -5,12 +5,18 @@ import 'regenerator-runtime/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { CssBaseline } from '@material-ui/core';
 import store from './redux/store';
 import App from './App';
+import theme from './theme/theme';
 
 ReactDOM.render(
   <Provider store={store}>
-    <App />
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
   </Provider>,
   document.getElementById('root'),
 );

client/redux/reducers/data.js

@@ -5,8 +5,6 @@ export const types = {
   GET_PIN_INFO_REQUEST: 'GET_PIN_INFO_REQUEST',
   GET_PIN_INFO_SUCCESS: 'GET_PIN_INFO_SUCCESS',
   GET_PIN_INFO_FAILURE: 'GET_PIN_INFO_FAILURE',
-  GET_PIN_CLUSTERS_SUCCESS: 'GET_PIN_CLUSTERS_SUCCESS',
-  GET_PIN_CLUSTERS_FAILURE: 'GET_PIN_CLUSTERS_FAILURE',
   GET_HEATMAP_SUCCESS: 'GET_HEATMAP_SUCCESS',
   GET_HEATMAP_FAILURE: 'GET_HEATMAP_FAILURE',
   GET_VIS_DATA_SUCCESS: 'GET_VIS_DATA_SUCCESS',
@@ -45,16 +43,6 @@ export const getPinInfoFailure = error => ({
   payload: error,
 });
 
-export const getPinClustersSuccess = response => ({
-  type: types.GET_PIN_CLUSTERS_SUCCESS,
-  payload: response,
-});
-
-export const getPinClustersFailure = error => ({
-  type: types.GET_PIN_CLUSTERS_FAILURE,
-  payload: error,
-});
-
 export const getHeatmapSuccess = response => ({
   type: types.GET_HEATMAP_SUCCESS,
   payload: response,
@@ -95,7 +83,6 @@ const initialState = {
   isVisLoading: false,
   error: null,
   pins: [],
-  pinClusters: [],
   heatmap: [],
   pinsInfo: {},
   counts: {},
@@ -159,28 +146,6 @@ export default (state = initialState, action) => {
         },
       };
     }
-    case types.GET_PIN_CLUSTERS_SUCCESS:
-      return {
-        ...state,
-        error: null,
-        pinClusters: action.payload,
-        isMapLoading: false,
-      };
-    case types.GET_PIN_CLUSTERS_FAILURE: {
-      const {
-        response: { status },
-        message,
-      } = action.payload;
-      return {
-        ...state,
-        error: {
-          code: status,
-          message,
-          error: action.payload,
-        },
-        isMapLoading: false,
-      };
-    }
     case types.GET_HEATMAP_SUCCESS:
       return {
         ...state,