Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added react router #462

Merged
merged 1 commit into from
Mar 25, 2020
Merged

Added react router #462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 5 additions & 6 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -16,13 +16,12 @@ const App = () => {
}, []);

return (
<>
<Router>
<Header />
<Body />
<Footer />
<Routes />
<Tooltip />
<SnapshotRenderer />
</>
</Router>
);
};

Expand Down
26 changes: 26 additions & 0 deletions src/Routes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
9 changes: 9 additions & 0 deletions src/components/about/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';

const About = () => (
<div>
About
</div>
);

export default About;
9 changes: 9 additions & 0 deletions src/components/contact/Contact.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';

const Contact = () => (
<div>
Contact
</div>
);

export default Contact;
18 changes: 8 additions & 10 deletions src/components/main/body/Body.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);

Expand Down
65 changes: 42 additions & 23 deletions src/components/main/footer/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 = () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just want to confirm my understanding of this. Will this let us add other switch case(s) where location.pathname === /about or /contact that sets toRender to the /about or /contact specific footer content and renders it on those routes?

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,
Expand Down
26 changes: 14 additions & 12 deletions src/components/main/header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';

import { Link } from 'react-router-dom';
import COLORS from '../../../styles/COLORS';

const Header = () => {
Expand Down Expand Up @@ -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>
Expand Down
37 changes: 32 additions & 5 deletions src/components/main/menu/Menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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">
Expand All @@ -52,11 +83,7 @@ const Menu = ({
/>

<div className="menu-content">
<h1>Filters</h1>
<DateSelector />
<NCSelector />
<RequestTypeSelector />
<Submit />
{renderMenu()}
</div>
</div>
);
Expand Down