Add Contentful as headless CMS

Fixes #1025
- Implementing useContentful hook
- Temp FAQ, Privacy, Blog

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/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>
-        <Button className={classes.button}>About 311 Data</Button>
-        <Button className={classes.button}>Contact Us</Button>
-        <Button className={classes.button}>Help Center</Button>
+        <Link to="/privacy">
+          <Button className={classes.button}>Privacy</Button>
+        </Link>        
       </Toolbar>
     </AppBar>
   );

client/components/main/Blog.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import useContentful from '../../hooks/useContentful'
+import { 
+  makeStyles,
+  Container,
+  Box,
+  Typography,
+  Grid,
+  List,
+  ListItem
+} from '@material-ui/core';
+
+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',
+    },
+  }
+});
+
+const Blog = () => {
+  let { 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 => {
+                return (
+                  <Box key={item.sys.id} style={{marginBottom:'3em'}}>
+                    <h1 id={`#${item.slug}`}>{item.title}</h1>
+                    <h5>Posted {new Date(item.publishDate).toLocaleDateString()}</h5>
+                    <ReactMarkdown>{item.body}</ReactMarkdown>
+                  </Box>
+                )
+              })}
+            </Grid>
+            <Grid item xs={3}>
+              <List dense>
+                { data.blogPostCollection.items.map(item => {
+                  return (
+                    <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,75 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import useContentful from '../../hooks/useContentful'
+import { 
+  makeStyles,
+  Container,
+  Box,
+  Typography,
+  List,
+  ListItem
+} from '@material-ui/core';
+
+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',
+    },
+  }
+});
+
+const Faqs = () => {
+  let { data, errors } = useContentful(query)
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    if (errors)
+      console.log(errors)
+  }, [errors])
+
+  return (
+    <>
+      { data &&
+        <Container className={classes.root} maxWidth='md'>
+          <h1>Frequently Asked Questions</h1>
+          <List dense>
+            { data.faqCollection.items.map(item => {
+              return (
+                <ListItem key={item.sys.id} component='a' href={`#${item.question}`}>{item.question}</ListItem>
+              )
+            })}
+          </List>
+          { data.faqCollection.items.map(item => {
+            return (
+              <Box key={item.sys.id} style={{marginTop:'3em'}}>
+                <h2 id={item.question}>{item.question}</h2>
+                <ReactMarkdown>{item.answer}</ReactMarkdown>
+              </Box>
+            )
+          })}
+        </Container>
+      }
+    </>
+  )
+}
+
+export default Faqs;

client/components/main/Privacy.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import useContentful from '../../hooks/useContentful'
+import { 
+  makeStyles,
+  Container,
+  Typography
+} from '@material-ui/core';
+
+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',
+    },
+  }
+});
+
+const Privacy = () => {
+  let { data, errors } = useContentful(query)
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    if (errors)
+      console.log(errors)
+  }, [errors])
+
+  return (
+    <>
+      { data &&
+        <Container className={classes.root} maxWidth='md'>
+          <h1>{data.simplePageCollection.items[0].title}</h1>
+          <ReactMarkdown>{data.simplePageCollection.items[0].body}</ReactMarkdown>
+        </Container>
+      }
+    </>
+  )
+}
+
+export default Privacy;

client/hooks/useContentful.js

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const url = `https://graphql.contentful.com/content/v1/spaces/${process.env.CONTENTFUL_SPACE}`
+
+const useContentful = (query) => {
+  let [data, setData] = React.useState(null)
+  let [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;