ft/Water Page

.gitignore

@@ -331,3 +331,5 @@ $RECYCLE.BIN/
 .now
 
 # End of Custom
+
+.yarn

src/components/Header/JumboContent/AirHeaderContent.js → src/components/Header/JumboContent/HeaderContent.js

@@ -28,7 +28,13 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function AirHeaderContent({ handleSearch, ...props }) {
+function HeaderContent({
+  handleSearch,
+  header1,
+  header2,
+  searchOptions,
+  ...props
+}) {
   const classes = useStyles(props);
 
   return (
@@ -40,26 +46,30 @@ function AirHeaderContent({ handleSearch, ...props }) {
     >
       <Grid item xs={12}>
         <Typography variant="h3" className={classes.headerText}>
-          WE&apos;VE TESTED THE QUALITY
+          {header1}
         </Typography>
       </Grid>
       <Grid item xs={12}>
         <Typography variant="h3" className={classes.headerText}>
-          OF YOUR CITY&apos;S AIR.
+          {header2}
         </Typography>
       </Grid>
       <Grid item className={classes.searchBar}>
         <SearchBar
           placeholder="Search for your city ..."
           handleSearch={handleSearch}
+          options={searchOptions}
         />
       </Grid>
     </Grid>
   );
 }
 
-AirHeaderContent.propTypes = {
+HeaderContent.propTypes = {
   handleSearch: PropTypes.func.isRequired,
+  header1: PropTypes.string.isRequired,
+  header2: PropTypes.string.isRequired,
+  searchOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
-export default AirHeaderContent;
+export default HeaderContent;

src/components/Air/AirHeader.js → src/components/PageHeader/index.js

@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import PropTypes from "prop-types";
 import React from "react";
 
-import AirHeaderContent from "@/sensorsafrica/components/Header/JumboContent/AirHeaderContent";
+import HeaderContent from "@/sensorsafrica/components/Header/JumboContent/HeaderContent";
 
 const useStyles = makeStyles((theme) => ({
   jumbotron: {
@@ -16,7 +16,13 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function AirHeader({ handleSearch, ...props }) {
+function PageHeader({
+  handleSearch,
+  header1,
+  header2,
+  searchOptions,
+  ...props
+}) {
   const classes = useStyles(props);
 
   return (
@@ -27,14 +33,22 @@ function AirHeader({ handleSearch, ...props }) {
       alignItems="center"
     >
       <Grid item xs={12}>
-        <AirHeaderContent handleSearch={handleSearch} />
+        <HeaderContent
+          handleSearch={handleSearch}
+          header1={header1}
+          header2={header2}
+          searchOptions={searchOptions}
+        />
       </Grid>
     </Grid>
   );
 }
 
-AirHeader.propTypes = {
+PageHeader.propTypes = {
   handleSearch: PropTypes.func.isRequired,
+  header1: PropTypes.string.isRequired,
+  header2: PropTypes.string.isRequired,
+  searchOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
-export default AirHeader;
+export default PageHeader;

src/components/SearchBar.js

@@ -289,15 +289,6 @@ const components = {
   ValueContainer,
   DropdownIndicator: null,
 };
-
-const DEFAULT_OPTIONS = [
-  { value: "nairobi", label: "Nairobi, Kenya" },
-  { value: "kisumu", label: "Kisumu, Kenya" },
-  { value: "nakuru", label: "Nakuru, Kenya" },
-  { value: "lagos", label: "Lagos, Nigeria" },
-  { value: "dar-es-salaam", label: "Dar-es-Salaam, Tanzania" },
-];
-
 function SearchBar({ handleSearch, placeholder, options, ...props }) {
   const classes = useStyles(props);
   const [single, setSingle] = useState();
@@ -331,7 +322,7 @@ SearchBar.propTypes = {
 
 SearchBar.defaultProps = {
   handleSearch: null,
-  options: DEFAULT_OPTIONS,
+  options: [],
   placeholder: "",
 };
 

src/components/Showcase/StoryList.js

@@ -1,6 +1,7 @@
 import { Grid, ImageList, ImageListItem } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import Papa from "papaparse";
+import PropTypes from "prop-types";
 import React, { useEffect, useState } from "react";
 
 import StoryCard from "./StoryCard";
@@ -46,6 +47,7 @@ const useStyles = makeStyles(({ breakpoints }) => ({
 
 function StoryList(props) {
   const classes = useStyles(props);
+  const { storiesLink } = props;
   const [stories, setStories] = useState([]);
 
   const processData = (data) => {
@@ -59,16 +61,16 @@ function StoryList(props) {
   };
 
   useEffect(() => {
-    Papa.parse(
-      "https://docs.google.com/spreadsheets/d/1I2nTG_lst4nYrg8z1e7RaolC16A-M7f_lO_zRaV9L5s/pub?output=csv",
-      {
-        download: true,
-        header: true,
-        complete: (results) => {
-          processData(results?.data);
-        },
-      }
-    );
+    // eslint-disable-next-line no-unused-expressions
+    storiesLink
+      ? Papa.parse(storiesLink, {
+          download: true,
+          header: true,
+          complete: (results) => {
+            processData(results?.data);
+          },
+        })
+      : null;
   }, []);
 
   // TODO(kilemensi): ImageListItem computes the size of item and sets it using
@@ -105,4 +107,8 @@ function StoryList(props) {
   );
 }
 
+StoryList.propTypes = {
+  storiesLink: PropTypes.string.isRequired,
+};
+
 export default StoryList;

src/components/Showcase/index.js

@@ -1,5 +1,6 @@
 import { Grid, Typography } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
+import PropTypes from "prop-types";
 import React from "react";
 
 import StoryList from "@/sensorsafrica/components/Showcase/StoryList";
@@ -22,23 +23,27 @@ const useStyles = makeStyles({
 
 function Showcase(props) {
   const classes = useStyles(props);
+  const { title, headline, storiesLink } = props;
 
   return (
     <Grid className={classes.root}>
       <Grid item xs={12} className={classes.headline}>
         <Typography variant="h3" className={classes.headlineTitle}>
-          SHOWCASE
-        </Typography>
-        <Typography variant="body1">
-          Here are stories from all around the world on air quality and its
-          effects
+          {title}
         </Typography>
+        <Typography variant="body1">{headline}</Typography>
       </Grid>
       <Grid item xs={12}>
-        <StoryList />
+        <StoryList storiesLink={storiesLink} />
       </Grid>
     </Grid>
   );
 }
 
+Showcase.propTypes = {
+  title: PropTypes.string.isRequired,
+  headline: PropTypes.string.isRequired,
+  storiesLink: PropTypes.string.isRequired,
+};
+
 export default Showcase;

src/pages/[type].js

@@ -22,11 +22,7 @@ SensorTypeHome.propTypes = {
 
 export async function getStaticPaths() {
   return {
-    paths: [
-      { params: { type: "radiation" } },
-      { params: { type: "sound" } },
-      { params: { type: "water" } },
-    ],
+    paths: [{ params: { type: "radiation" } }, { params: { type: "sound" } }],
     fallback: false,
   };
 }

src/pages/air/index.js

@@ -2,13 +2,13 @@ import { useRouter } from "next/router";
 import React from "react";
 
 import Stories from "@/sensorsafrica/components/About/Stories";
-import AirHeader from "@/sensorsafrica/components/Air/AirHeader";
 import IndoorOutdoor from "@/sensorsafrica/components/Air/IndoorOutdoor";
 import Issues from "@/sensorsafrica/components/Air/Issues";
 import DocumentHead from "@/sensorsafrica/components/DocumentHead";
 import { URLS } from "@/sensorsafrica/components/DocumentHead/PageHeads";
 import Footer from "@/sensorsafrica/components/Footer";
 import Navbar from "@/sensorsafrica/components/Header/Navbar";
+import PageHeader from "@/sensorsafrica/components/PageHeader";
 import PartnerLogos from "@/sensorsafrica/components/PartnerLogos";
 import Showcase from "@/sensorsafrica/components/Showcase";
 import Support from "@/sensorsafrica/components/Support";
@@ -19,6 +19,22 @@ import HowSensorsWork from "@/sensorsafrica/pages/air/how-sensors-work";
 import JoinNetwork from "@/sensorsafrica/pages/air/join-network";
 
 const CITY_PATHNAME = "/air/city";
+const header1 = "We've Tested the Quality";
+const header2 = "of Your City's Air.";
+const searchOptions = [
+  { value: "nairobi", label: "Nairobi, Kenya" },
+  { value: "kisumu", label: "Kisumu, Kenya" },
+  { value: "nakuru", label: "Nakuru, Kenya" },
+  { value: "lagos", label: "Lagos, Nigeria" },
+  { value: "dar-es-salaam", label: "Dar-es-Salaam, Tanzania" },
+];
+const showcase = {
+  title: "Showcase",
+  headline:
+    "Here are stories from all around the world on air quality and its effects",
+  storiesLink:
+    "https://docs.google.com/spreadsheets/d/1I2nTG_lst4nYrg8z1e7RaolC16A-M7f_lO_zRaV9L5s/pub?output=csv",
+};
 
 function AirHome() {
   const router = useRouter();
@@ -30,8 +46,13 @@ function AirHome() {
     <>
       <DocumentHead url={URLS.AIR.HOME} />
       <Navbar />
-      <AirHeader handleSearch={handleSearch} />
-      <Showcase />
+      <PageHeader
+        handleSearch={handleSearch}
+        header1={header1}
+        header2={header2}
+        searchOptions={searchOptions}
+      />
+      <Showcase {...showcase} />
       <Issues />
       <IndoorOutdoor />
       <Stories />

src/pages/water/index.js

@@ -0,0 +1,52 @@
+import { useRouter } from "next/router";
+import React from "react";
+
+import DocumentHead from "@/sensorsafrica/components/DocumentHead";
+import { URLS } from "@/sensorsafrica/components/DocumentHead/PageHeads";
+import Footer from "@/sensorsafrica/components/Footer";
+import Navbar from "@/sensorsafrica/components/Header/Navbar";
+import PageHeader from "@/sensorsafrica/components/PageHeader";
+import PartnerLogos from "@/sensorsafrica/components/PartnerLogos";
+import Showcase from "@/sensorsafrica/components/Showcase";
+import About from "@/sensorsafrica/pages/air/about";
+import Data from "@/sensorsafrica/pages/air/data";
+import HealthAndClimateImpacts from "@/sensorsafrica/pages/air/health-and-climate-impact";
+import HowSensorsWork from "@/sensorsafrica/pages/air/how-sensors-work";
+import JoinNetwork from "@/sensorsafrica/pages/air/join-network";
+
+const CITY_PATHNAME = "/water/city";
+
+const header1 = "We're Testing Water";
+const header2 = "in Your City";
+const searchOptions = [{ value: "nairobi", label: "Nairobi, Kenya" }];
+const showcase = {
+  title: "Showcase",
+  headline: "Participatory Mapping of Water Pollution",
+};
+
+function WaterHome() {
+  const router = useRouter();
+  const handleSearch = (city) => {
+    router.push(`${CITY_PATHNAME}/${city.value}`);
+  };
+
+  return (
+    <>
+      <DocumentHead url={URLS.AIR.HOME} />
+      <Navbar />
+      <PageHeader
+        handleSearch={handleSearch}
+        header1={header1}
+        header2={header2}
+        searchOptions={searchOptions}
+      />
+      <Showcase {...showcase} />
+      <PartnerLogos />
+      <Footer />
+    </>
+  );
+}
+
+export { About, HowSensorsWork, JoinNetwork, Data, HealthAndClimateImpacts };
+
+export default WaterHome;