Mattyweb/issue1025

client/Routes.jsx

@@ -2,12 +2,18 @@ import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 import Desktop from '@components/main/Desktop';
 import Reports from '@components/main/Reports';
+import Privacy from '@components/main/Privacy';
+import Faqs from '@components/main/Faqs';
+import Blog from '@components/main/Blog';
 
 export default function Routes() {
   return (
     <Switch>
       <Route path="/map" component={Desktop} />
       <Route path="/reports" component={Reports} />
+      <Route path="/privacy" component={Privacy} />
+      <Route path="/faqs" component={Faqs} />
+      <Route path="/blog" component={Blog} />
       <Route path="/">
         <Redirect to="map" />
       </Route>

client/components/Footer.jsx

@@ -10,8 +10,6 @@ import moment from 'moment';
 
 const useStyles = makeStyles(theme => ({
   footer: {
-    position: 'absolute',
-    bottom: 0,
     height: theme.footer.height,
     width: '100%',
     backgroundColor: theme.palette.primary.dark,

client/components/Header.jsx

@@ -54,6 +54,9 @@ const Header = () => {
         <Typography variant="h1" className={classes.title}>
           311DATA
         </Typography>
+        <Link to="/map">
+          <Button className={classes.button}>Map</Button>
+        </Link>
         <Button
           id="report-anchor"
           onClick={handleClick}
@@ -94,12 +97,15 @@ const Header = () => {
             </MenuItem>
           </Link>
         </Menu>
-        <Link to="/map">
-          <Button className={classes.button}>Explore 311 Data</Button>
+        <Link to="/faqs">
+          <Button className={classes.button}>FAQ</Button>
+        </Link>
+        <Link to="/blog">
+          <Button className={classes.button}>Blog</Button>
+        </Link>
+        <Link to="/privacy">
+          <Button className={classes.button}>Privacy</Button>
         </Link>
-        <Button className={classes.button}>About 311 Data</Button>
-        <Button className={classes.button}>Contact Us</Button>
-        <Button className={classes.button}>Help Center</Button>
       </Toolbar>
     </AppBar>
   );

client/components/main/Blog.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import {
+  makeStyles,
+  Container,
+  Box,
+  Grid,
+  List,
+  ListItem,
+} from '@material-ui/core';
+import useContentful from '../../hooks/useContentful';
+
+const query = `
+  query {
+    blogPostCollection(order: publishDate_DESC) {
+      items {
+        sys { id }
+        slug
+        title
+        body
+        publishDate
+      }
+    }
+  }
+`;
+
+const useStyles = makeStyles({
+  root: {
+    color: 'black',
+    backgroundColor: 'white',
+    padding: '2em',
+    '& h1': {
+      fontSize: '2.5em',
+    },
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+      display: 'block',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+  },
+});
+
+const Blog = () => {
+  const { data, errors } = useContentful(query);
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    if (errors) console.log(errors);
+  }, [errors]);
+
+  return (
+    <>
+      { data
+        && (
+          <Container className={classes.root} maxWidth="md">
+            <Grid container spacing={2}>
+              <Grid item xs={9}>
+                { data.blogPostCollection.items.map(item => (
+                  <Box key={item.sys.id} style={{ marginBottom: '3em' }}>
+                    <h1 id={`${item.slug}`}>{item.title}</h1>
+                    <h4>
+                      {new Date(item.publishDate).toLocaleDateString()}
+                    </h4>
+                    <ReactMarkdown>{item.body}</ReactMarkdown>
+                  </Box>
+                ))}
+              </Grid>
+              <Grid item xs={3}>
+                <List dense>
+                  { data.blogPostCollection.items.map(item => (
+                    <ListItem key={item.sys.id} component="a" href={`#${item.slug}`}>
+                      {item.title}
+                    </ListItem>
+                  ))}
+                </List>
+              </Grid>
+            </Grid>
+          </Container>
+        )}
+    </>
+  );
+};
+
+export default Blog;

client/components/main/Faqs.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import {
+  makeStyles,
+  Container,
+  Box,
+  List,
+  ListItem,
+  Grid,
+} from '@material-ui/core';
+import useContentful from '../../hooks/useContentful';
+
+const query = `
+  query {
+    faqCollection(order: priority_ASC) {
+      items {
+        sys { id }
+        question
+        answer
+      }
+    }
+  }
+`;
+
+const useStyles = makeStyles({
+  root: {
+    color: 'black',
+    backgroundColor: 'white',
+    padding: '2em',
+    '& h1': {
+      fontSize: '2.5em',
+    },
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+      display: 'block',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+  },
+});
+
+const Faqs = () => {
+  const { data, errors } = useContentful(query);
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    if (errors) console.log(errors);
+  }, [errors]);
+
+  return (
+    <>
+      { data
+        && (
+          <Container className={classes.root} maxWidth="md">
+            <Grid container spacing={2}>
+              <Grid item xs={9}>
+                <h1>Frequently Asked Questions</h1>
+                <List dense>
+                  { data.faqCollection.items.map(item => (
+                    <ListItem key={item.sys.id} component="a" href={`#${item.question}`}>{item.question}</ListItem>
+                  ))}
+                </List>
+                { data.faqCollection.items.map(item => (
+                  <Box key={item.sys.id} style={{ marginBottom: '3em' }}>
+                    <h2 id={item.question}>{item.question}</h2>
+                    <ReactMarkdown>{item.answer}</ReactMarkdown>
+                  </Box>
+                ))}
+              </Grid>
+            </Grid>
+          </Container>
+        )}
+    </>
+  );
+};
+
+export default Faqs;

client/components/main/Privacy.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import {
+  makeStyles,
+  Container,
+  Grid,
+} from '@material-ui/core';
+import useContentful from '../../hooks/useContentful';
+
+const query = `
+  query {
+    simplePageCollection(where: {slug: "privacy"}) {
+      items {
+        title
+        body
+      }
+    }
+  }
+`;
+
+const useStyles = makeStyles({
+  root: {
+    color: 'black',
+    backgroundColor: 'white',
+    padding: '2em',
+    '& h1': {
+      fontSize: '2.5em',
+    },
+    '& img': {
+      maxWidth: '100%',
+      height: 'auto',
+      display: 'block',
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+  },
+});
+
+const Privacy = () => {
+  const { data, errors } = useContentful(query);
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    if (errors) console.log(errors);
+  }, [errors]);
+
+  return (
+    <>
+      { data
+        && (
+          <Container className={classes.root} maxWidth="md">
+            <Grid container spacing={2}>
+              <Grid item xs={9}>
+                <h1>{data.simplePageCollection.items[0].title}</h1>
+                <ReactMarkdown>{data.simplePageCollection.items[0].body}</ReactMarkdown>
+              </Grid>
+            </Grid>
+          </Container>
+        )}
+    </>
+  );
+};
+
+export default Privacy;

client/components/main/Reports.jsx

@@ -57,7 +57,7 @@ const Reports = () => {
         src={url + reportPath}
         frameBorder="0"
         allowFullScreen
-        style={{ width: '100%', height: '100%', minHeight: '55em' }}
+        style={{ width: '100%', height: '100%' }}
       />
     </div>
   );

client/hooks/useContentful.js

@@ -0,0 +1,30 @@
+/* eslint no-shadow: ["error", { "allow": ["data", "errors"] }] */
+import React from 'react';
+
+const url = `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE}`;
+
+const useContentful = query => {
+  const [data, setData] = React.useState(null);
+  const [errors, setErrors] = React.useState(null);
+
+  React.useEffect(() => {
+    fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${process.env.CONTENTFUL_TOKEN}`,
+      },
+      body: JSON.stringify({ query }),
+    })
+    .then(response => response.json())
+    .then(({ data, errors }) => {
+      if (errors) setErrors(errors);
+      if (data) setData(data);
+    })
+    .catch(error => setErrors([error]));
+  }, [query]);
+
+  return { data, errors };
+};
+
+export default useContentful;