Merge pull request #876 from adamkendis/FRONT-client-layout

Metadata fetching, expanding filter menu, desktop layout

client/App.jsx

@@ -1,29 +1,22 @@
 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 PersistentDrawerLeft from '@components/LeftDrawer';
-import GearButton from '@components/GearButton';
 import { toggleMenu as reduxToggleMenu } from '@reducers/ui';
 import { useSwipeable } from 'react-swipeable';
-import theme from './theme/theme';
+
+import Header from '@components/Header';
+import Footer from '@components/Footer';
+import Routes from './Routes';
 
 const menuStyles = {
   swipeAreaOpen: {
     float: 'left',
     position: 'fixed',
-    width: '30%',
+    width: 150,
     height: '100%',
   },
-  gear: {
-    marginLeft: '85vw',
-    marginTop: '70vh',
-  },
 };
 
 const App = ({
@@ -41,17 +34,14 @@ const App = ({
   });
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
+    <BrowserRouter>
       <Header />
-      <PersistentDrawerLeft />
-      <MapContainer />
+      <Routes />
       {/* area where you can swipe the menu sidebar */}
       {/* eslint-disable-next-line react/jsx-props-no-spreading */}
       <div {...handleSwipeMenu} style={menuStyles.swipeAreaOpen} />
-      <GearButton onClick={toggleMenu} style={menuStyles.gear} />
       <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,111 @@
+import React, { useState } from 'react';
+import PropTypes from 'proptypes';
+import { connect } from 'react-redux';
+import { toggleMenu as reduxToggleMenu } from '@reducers/ui';
+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,
+    zIndex: 2000,
+  },
+  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 = ({
+  toggleMenu,
+}) => {
+  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"
+              onClick={toggleMenu}
+            />
+            <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>
+  );
+};
+
+const mapDispatchToProps = dispatch => ({
+  toggleMenu: () => dispatch(reduxToggleMenu()),
+});
+
+export default connect(null, mapDispatchToProps)(FilterMenu);
+
+FilterMenu.propTypes = {
+  toggleMenu: PropTypes.func.isRequired,
+};

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,12 +16,14 @@ const useStyles = makeStyles({
   button: {
     padding: '0',
   },
-});
+}));
 
-const GearButton = props => {
+const GearButton = ({
+  onClick,
+}) => {
   const { gearIcon, button } = useStyles();
   const [pressed, setPressed] = useState(false);
-  const { onClick, style } = props;
+
   const onKeyDown = e => {
     e.preventDefault();
     if (e.key === ' '
@@ -32,10 +34,12 @@ const GearButton = props => {
       onClick();
     }
   };
+
   const toggleClick = () => {
     setPressed(!pressed);
     onClick();
   };
+
   return (
     <IconButton
       className={button}
@@ -44,7 +48,8 @@ const GearButton = props => {
       role="button"
       aria-pressed={pressed}
       aria-label="Toggle Sidebar"
-      style={style}
+      disableFocusRipple
+      disableRipple
     >
       <SettingsSharpIcon className={gearIcon} />
     </IconButton>
@@ -53,11 +58,9 @@ const GearButton = props => {
 
 GearButton.propTypes = {
   onClick: PropTypes.func,
-  style: PropTypes.obj,
 };
 GearButton.defaultProps = {
   onClick: undefined,
-  style: undefined,
 };
 
 export default GearButton;

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/LeftDrawer/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'proptypes';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
@@ -31,6 +31,7 @@ const useStyles = makeStyles(theme => ({
   drawer: {
     width: drawerWidth,
     flexShrink: 0,
+    zIndex: 2100,
   },
   drawerPaper: {
     width: drawerWidth,
@@ -89,20 +90,18 @@ const PersistentDrawerLeft = ({ menuIsOpen, toggleMenu }) => {
     // TODO ADD FUNCTIONALITY
   };
 
-  const escFunction = e => {
-    e.preventDefault();
-    if (e.key === 'Escape'
-    ) {
-      toggleMenu();
-    }
-  };
+  useEffect(() => {
+    const escFunction = e => {
+      e.preventDefault();
+      if (e.key === 'Escape') {
+        toggleMenu();
+      }
+    };
 
-  React.useEffect(() => {
     document.addEventListener('keypress', escFunction, false);
-    return () => {
-      document.removeEventListener('keypress', escFunction, false);
-    };
-  }, [escFunction]);
+
+    return () => document.removeEventListener('keypress', escFunction, false);
+  }, [toggleMenu]);
 
   return (
     <div className={classes.root}>

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%',
   },
 })