Merge pull request #845 from adamkendis/FRONT-v2Layout

Super basic v2 starter

client/.eslintignore

@@ -1,2 +1,4 @@
 *.json
 *.test.js*
+v1/*
+

client/.eslintrc.js

@@ -56,7 +56,8 @@ module.exports = {
         tags: [],
         roles: ['tabpanel'],
       },
-    ]
+    ],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
   },
 
 };

client/App.jsx

@@ -1,18 +1,13 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import 'focus-visible';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { CssBaseline } from '@material-ui/core';
 import { getMetadataRequest } from '@reducers/metadata';
-
-import RouteChange from '@components/main/util/RouteChange';
-import actions from '@components/main/util/routeChangeActions';
-import CookieNotice from '@components/main/body/CookieNotice';
-import Header from '@components/main/header/Header';
-import Footer from '@components/main/footer/Footer';
-import StaticFooter from '@components/main/footer/StaticFooter';
-import { SnapshotRenderer } from '@components/export/SnapshotService';
-import Routes from './Routes';
+import Header from '@components/Header';
+import Footer from '@components/Footer';
+import Map from '@components/Map';
+import theme from './theme/theme';
 
 const App = ({
   getMetadata,
@@ -22,17 +17,12 @@ const App = ({
   });
 
   return (
-    <Router>
-      <RouteChange actions={actions} />
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
       <Header />
-      <Routes />
-      <Switch>
-        <Route path="/(about|contact|privacy|faq)" component={StaticFooter} />
-        <Route path="/" component={Footer} />
-      </Switch>
-      <SnapshotRenderer />
-      <CookieNotice />
-    </Router>
+      <Map />
+      <Footer />
+    </ThemeProvider>
   );
 };
 

client/Routes.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable */
+// temporarily disabling eslint here until v2 refactor
 import React from 'react';
 import {
   Switch,

client/components/Footer.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'proptypes';
+import {
+  Container,
+  Typography,
+} from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import moment from 'moment';
+
+// TODO: pull style constants into mui theme
+const useStyles = makeStyles({
+  footer: {
+    position: 'absolute',
+    bottom: 0,
+    height: '40px',
+    width: '100%',
+    backgroundColor: '#2A404E',
+  },
+  lastUpdated: {
+    lineHeight: '40px',
+    fontSize: '14px',
+  },
+});
+
+// TODO: check with UI/UX re placement of social media, privacy policy links
+const Footer = ({
+  lastUpdated,
+}) => {
+  const classes = useStyles();
+
+  return (
+    <footer className={classes.footer}>
+      <Container maxWidth="xs">
+        { lastUpdated && (
+          <Typography className={classes.lastUpdated}>
+            Data Updated Through:
+            &nbsp;
+            {moment(lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
+          </Typography>
+        )}
+      </Container>
+    </footer>
+  );
+};
+
+const mapStateToProps = state => ({
+  lastUpdated: state.metadata.lastPulled,
+});
+
+Footer.propTypes = {
+  lastUpdated: PropTypes.string,
+};
+
+Footer.defaultProps = {
+  lastUpdated: undefined,
+};
+
+export default connect(mapStateToProps, null)(Footer);

client/components/Header.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+// import { NavLink } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  AppBar,
+  Button,
+  Toolbar,
+  Typography,
+} from '@material-ui/core';
+
+const useStyles = makeStyles({
+  appBar: {
+    height: '62px',
+    backgroundColor: '#2A404E',
+  },
+  button: {
+    textTransform: 'none',
+  },
+  title: {
+    flexGrow: 1,
+    fontFamily: 'Oswald, sans-serif',
+    fontSize: '30px',
+    fontWeight: 'bold',
+    letterSpacing: '4px',
+  },
+});
+
+// TODO: links/routing, mobile
+const Header = () => {
+  const classes = useStyles();
+
+  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 className={classes.button}>About 311 Data</Button>
+        <Button className={classes.button}>Contact Us</Button>
+        <Button className={classes.button}>Help Center</Button>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

client/components/Map/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Map = () => (
+  <div>Map goes here</div>
+);
+
+export default Map;

client/components/common/CONSTANTS.js

@@ -1,5 +1,7 @@
 export default {};
 
+// TODO: fetch constants from backend
+
 // 'primary' or 'alt' to change request type colors
 const COLOR_SELECTION = 'alt';
 

client/index.js

@@ -5,8 +5,6 @@ import 'regenerator-runtime/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import './styles/styles.scss';
-
 import store from './redux/store';
 import App from './App';