Merge pull request #462 from hackforla/feature_react_router

Added react router
hackforla · Mar 25, 2020 · b1049d9 · b1049d9
2 parents 68f5fee + 58df8e2
commit b1049d9
Show file tree

Hide file tree

Showing 9 changed files with 147 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,8 @@
     "react-leaflet-heatmap-layer": "^2.0.0",
     "react-leaflet-markercluster": "^2.0.0-rc3",
     "react-redux": "^7.1.3",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
     "react-test-renderer": "^16.12.0",
     "react-tooltip": "^4.0.3",
     "react-vis": "^1.11.7",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
+import { BrowserRouter as Router } from 'react-router-dom';
 
+import Routes from './Routes';
 import Header from './components/main/header/Header';
-import Body from './components/main/body/Body';
-import Footer from './components/main/footer/Footer';
 import Tooltip from './components/main/tooltip/Tooltip';
 import SnapshotService, { SnapshotRenderer } from './components/export/SnapshotService';
 import Visualizations from './components/Visualizations';
@@ -16,13 +16,12 @@ const App = () => {
   }, []);
 
   return (
-    <>
+    <Router>
       <Header />
-      <Body />
-      <Footer />
+      <Routes />
       <Tooltip />
       <SnapshotRenderer />
-    </>
+    </Router>
   );
 };
 

diff --git a/src/Routes.jsx b/src/Routes.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  Switch,
+  Route,
+} from 'react-router-dom';
+
+import Contact from './components/contact/Contact';
+import About from './components/about/About';
+import Body from './components/main/body/Body';
+import Footer from './components/main/footer/Footer';
+
+export default function Routes() {
+  return (
+    <>
+      <Switch>
+        <Route path="/contact" component={Contact} />
+        <Route path="/about" component={About} />
+        <Route path="/comparison" component={Body} />
+        <Route path="/" component={Body} />
+      </Switch>
+      <Switch>
+        <Footer />
+      </Switch>
+    </>
+  );
+}
diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const About = () => (
+  <div>
+    About
+  </div>
+);
+
+export default About;
diff --git a/src/components/contact/Contact.jsx b/src/components/contact/Contact.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Contact = () => (
+  <div>
+    Contact
+  </div>
+);
+
+export default Contact;
diff --git a/src/components/main/body/Body.jsx b/src/components/main/body/Body.jsx
@@ -13,17 +13,15 @@ const Body = ({
   openErrorModal,
   error,
 }) => (
-  <div id="body-container" className="body is-relative">
+  <div className="body is-relative">
     <Menu />
-    <main id="body-wrap">
-      <PinMap />
-      <Visualizations />
-      <Loader />
-      <Modal
-        open={openErrorModal}
-        content={<DataRequestError error={error} />}
-      />
-    </main>
+    <PinMap />
+    <Visualizations />
+    <Loader />
+    <Modal
+      open={openErrorModal}
+      content={<DataRequestError error={error} />}
+    />
   </div>
 );
 

diff --git a/src/components/main/footer/Footer.jsx b/src/components/main/footer/Footer.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import propTypes from 'proptypes';
 import moment from 'moment';
 
@@ -13,29 +14,47 @@ const footerTextStyle = {
 
 const Footer = ({
   lastUpdated,
-}) => (
-  <footer
-    className="navbar has-navbar-fixed-bottom"
-    style={{
-      position: 'fixed',
-      bottom: '0',
-      height: '45px',
-      background: '#002449',
-      // Really high z-index here to ensure Footer is on top of modal
-      zIndex: '20000',
-    }}
-  >
-    <div className="level has-text-centered">
-      <div className="level-item">
-        <p style={footerTextStyle}>
-          Data Updated Through:
-          &nbsp;
-          {lastUpdated && moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
-        </p>
-      </div>
-    </div>
-  </footer>
-);
+}) => {
+  const location = useLocation();
+
+  const renderFooter = () => {
+    let toRender;
+
+    switch (location.pathname) {
+      default:
+        toRender = (
+          <div className="level has-text-centered">
+            <div className="level-item">
+              <p style={footerTextStyle}>
+                Data Updated Through:
+                &nbsp;
+                {lastUpdated && moment(1000 * lastUpdated).format('MMMM Do YYYY, h:mm:ss a')}
+              </p>
+            </div>
+          </div>
+        );
+        break;
+    }
+
+    return toRender;
+  };
+
+  return (
+    <footer
+      className="navbar has-navbar-fixed-bottom"
+      style={{
+        position: 'fixed',
+        bottom: '0',
+        height: '45px',
+        background: '#002449',
+        // Really high z-index here to ensure Footer is on top of modal
+        zIndex: '20000',
+      }}
+    >
+      {renderFooter()}
+    </footer>
+  );
+};
 
 const mapStateToProps = state => ({
   lastUpdated: state.data.lastUpdated,

diff --git a/src/components/main/header/Header.jsx b/src/components/main/header/Header.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import { Link } from 'react-router-dom';
 import COLORS from '../../../styles/COLORS';
 
 const Header = () => {
@@ -32,28 +32,30 @@ const Header = () => {
       }}
     >
       <div className="navbar-brand">
-        <div className="navbar-item">
-          <p style={cta1Style}>311</p>
-          <p style={cta2Style}>Data</p>
-        </div>
+        <Link to="/" className="navbar-item">
+          <div className="navbar-item">
+            <p style={cta1Style}>311</p>
+            <p style={cta2Style}>Data</p>
+          </div>
+        </Link>
       </div>
 
       <div id="navbar" className="navbar-menu">
         <div className="navbar-end">
           <div className="navbar-item">
-            <a href="/" style={cta2Style}>
-              CSV Reporter
-            </a>
+            <Link to="/comparison" style={cta2Style}>
+              Comparison Tool
+            </Link>
           </div>
           <div className="navbar-item">
-            <a href="/" style={backgroundStyle}>
+            <Link to="/about" style={backgroundStyle}>
               About 311 Data
-            </a>
+            </Link>
           </div>
           <div className="navbar-item">
-            <a href="/" style={backgroundStyle}>
+            <Link to="/contact" style={backgroundStyle}>
               Contact Us
-            </a>
+            </Link>
           </div>
         </div>
       </div>

diff --git a/src/components/main/menu/Menu.jsx b/src/components/main/menu/Menu.jsx
@@ -5,6 +5,7 @@ import React from 'react';
 import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
 import clx from 'classnames';
+import { useLocation } from 'react-router-dom';
 
 import {
   toggleMenu as reduxToggleMenu,
@@ -24,11 +25,41 @@ const Menu = ({
   toggleMenu,
   setMenuTab,
 }) => {
+  const location = useLocation();
   const tabs = [
     MENU_TABS.MAP,
     MENU_TABS.VISUALIZATIONS,
   ];
 
+  const renderMenu = () => {
+    let toRender;
+
+    switch (location.pathname) {
+      case '/comparison':
+        toRender = (
+          <>
+            <h1>Comparison Tool</h1>
+            <DateSelector />
+            <Submit />
+          </>
+        );
+        break;
+      default:
+        toRender = (
+          <>
+            <h1>Filters</h1>
+            <DateSelector />
+            <NCSelector />
+            <RequestTypeSelector />
+            <Submit />
+          </>
+        );
+        break;
+    }
+
+    return toRender;
+  };
+
   return (
     <div className={clx('menu-container', { open: isOpen })}>
       <div className="menu-tabs">
@@ -52,11 +83,7 @@ const Menu = ({
       />
 
       <div className="menu-content">
-        <h1>Filters</h1>
-        <DateSelector />
-        <NCSelector />
-        <RequestTypeSelector />
-        <Submit />
+        {renderMenu()}
       </div>
     </div>
   );