From d39490018d5f8c05e13cdfc894812cf034f5286b Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 2 Dec 2022 10:51:12 +0300
Subject: [PATCH 1/7] Refractored shared pageheader

---
 .gitignore                                    |  2 +
 .../{Air/AirHeader.js => PageHeader/index.js} |  6 +--
 src/pages/[type].js                           |  6 +--
 src/pages/air/index.js                        |  4 +-
 src/pages/water/index.js                      | 47 +++++++++++++++++++
 5 files changed, 55 insertions(+), 10 deletions(-)
 rename src/components/{Air/AirHeader.js => PageHeader/index.js} (88%)
 create mode 100644 src/pages/water/index.js

diff --git a/.gitignore b/.gitignore
index aae5c203..ef715b15 100644
--- a/.gitignore
+++ b/.gitignore
@@ -331,3 +331,5 @@ $RECYCLE.BIN/
 .now
 
 # End of Custom
+
+.yarn
\ No newline at end of file
diff --git a/src/components/Air/AirHeader.js b/src/components/PageHeader/index.js
similarity index 88%
rename from src/components/Air/AirHeader.js
rename to src/components/PageHeader/index.js
index b4ac8beb..68e560db 100644
--- a/src/components/Air/AirHeader.js
+++ b/src/components/PageHeader/index.js
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function AirHeader({ handleSearch, ...props }) {
+function PageHeader({ handleSearch, ...props }) {
   const classes = useStyles(props);
 
   return (
@@ -33,8 +33,8 @@ function AirHeader({ handleSearch, ...props }) {
   );
 }
 
-AirHeader.propTypes = {
+PageHeader.propTypes = {
   handleSearch: PropTypes.func.isRequired,
 };
 
-export default AirHeader;
+export default PageHeader;
diff --git a/src/pages/[type].js b/src/pages/[type].js
index cddbc479..477e144f 100644
--- a/src/pages/[type].js
+++ b/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,
   };
 }
diff --git a/src/pages/air/index.js b/src/pages/air/index.js
index 3068b6df..991a0aa7 100644
--- a/src/pages/air/index.js
+++ b/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";
@@ -30,7 +30,7 @@ function AirHome() {
     <>
       <DocumentHead url={URLS.AIR.HOME} />
       <Navbar />
-      <AirHeader handleSearch={handleSearch} />
+      <PageHeader handleSearch={handleSearch} />
       <Showcase />
       <Issues />
       <IndoorOutdoor />
diff --git a/src/pages/water/index.js b/src/pages/water/index.js
new file mode 100644
index 00000000..069a9ff8
--- /dev/null
+++ b/src/pages/water/index.js
@@ -0,0 +1,47 @@
+import { useRouter } from "next/router";
+import React from "react";
+
+import Stories from "@/sensorsafrica/components/About/Stories";
+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";
+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";
+
+function AirHome() {
+  const router = useRouter();
+  const handleSearch = (city) => {
+    router.push(`${CITY_PATHNAME}/${city.value}`);
+  };
+
+  return (
+    <>
+      <DocumentHead url={URLS.AIR.HOME} />
+      <Navbar />
+      <PageHeader handleSearch={handleSearch} />
+      <Showcase />
+      <Issues />
+      <IndoorOutdoor />
+      <Stories />
+      <Support />
+      <PartnerLogos />
+      <Footer />
+    </>
+  );
+}
+
+export { About, HowSensorsWork, JoinNetwork, Data, HealthAndClimateImpacts };
+
+export default AirHome;

From 01e05e51ad9ed95b165a862ca574882974b5155f Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 2 Dec 2022 11:05:04 +0300
Subject: [PATCH 2/7] Refractored header content

---
 .../{AirHeaderContent.js => HeaderContent.js}        | 12 +++++++-----
 src/components/PageHeader/index.js                   | 12 +++++++++---
 src/pages/air/index.js                               |  8 +++++++-
 src/pages/water/index.js                             |  9 ++++++++-
 4 files changed, 31 insertions(+), 10 deletions(-)
 rename src/components/Header/JumboContent/{AirHeaderContent.js => HeaderContent.js} (84%)

diff --git a/src/components/Header/JumboContent/AirHeaderContent.js b/src/components/Header/JumboContent/HeaderContent.js
similarity index 84%
rename from src/components/Header/JumboContent/AirHeaderContent.js
rename to src/components/Header/JumboContent/HeaderContent.js
index 2702fa6f..357eb8a9 100644
--- a/src/components/Header/JumboContent/AirHeaderContent.js
+++ b/src/components/Header/JumboContent/HeaderContent.js
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function AirHeaderContent({ handleSearch, ...props }) {
+function HeaderContent({ handleSearch, header1, header2, ...props }) {
   const classes = useStyles(props);
 
   return (
@@ -40,12 +40,12 @@ 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}>
@@ -58,8 +58,10 @@ function AirHeaderContent({ handleSearch, ...props }) {
   );
 }
 
-AirHeaderContent.propTypes = {
+HeaderContent.propTypes = {
   handleSearch: PropTypes.func.isRequired,
+  header1: PropTypes.string.isRequired,
+  header2: PropTypes.string.isRequired,
 };
 
-export default AirHeaderContent;
+export default HeaderContent;
diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index 68e560db..9e7a73fd 100644
--- a/src/components/PageHeader/index.js
+++ b/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,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function PageHeader({ handleSearch, ...props }) {
+function PageHeader({ handleSearch, header1, header2, ...props }) {
   const classes = useStyles(props);
 
   return (
@@ -27,7 +27,11 @@ function PageHeader({ handleSearch, ...props }) {
       alignItems="center"
     >
       <Grid item xs={12}>
-        <AirHeaderContent handleSearch={handleSearch} />
+        <HeaderContent
+          handleSearch={handleSearch}
+          header1={header1}
+          header2={header2}
+        />
       </Grid>
     </Grid>
   );
@@ -35,6 +39,8 @@ function PageHeader({ handleSearch, ...props }) {
 
 PageHeader.propTypes = {
   handleSearch: PropTypes.func.isRequired,
+  header1: PropTypes.string.isRequired,
+  header2: PropTypes.string.isRequired,
 };
 
 export default PageHeader;
diff --git a/src/pages/air/index.js b/src/pages/air/index.js
index 991a0aa7..f1bf667a 100644
--- a/src/pages/air/index.js
+++ b/src/pages/air/index.js
@@ -19,6 +19,8 @@ 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.";
 
 function AirHome() {
   const router = useRouter();
@@ -30,7 +32,11 @@ function AirHome() {
     <>
       <DocumentHead url={URLS.AIR.HOME} />
       <Navbar />
-      <PageHeader handleSearch={handleSearch} />
+      <PageHeader
+        handleSearch={handleSearch}
+        header1={header1}
+        header2={header2}
+      />
       <Showcase />
       <Issues />
       <IndoorOutdoor />
diff --git a/src/pages/water/index.js b/src/pages/water/index.js
index 069a9ff8..36bdc81e 100644
--- a/src/pages/water/index.js
+++ b/src/pages/water/index.js
@@ -20,6 +20,9 @@ import JoinNetwork from "@/sensorsafrica/pages/air/join-network";
 
 const CITY_PATHNAME = "/water/city";
 
+const header1 = "We're Testing Water";
+const header2 = "in Your City";
+
 function AirHome() {
   const router = useRouter();
   const handleSearch = (city) => {
@@ -30,7 +33,11 @@ function AirHome() {
     <>
       <DocumentHead url={URLS.AIR.HOME} />
       <Navbar />
-      <PageHeader handleSearch={handleSearch} />
+      <PageHeader
+        handleSearch={handleSearch}
+        header1={header1}
+        header2={header2}
+      />
       <Showcase />
       <Issues />
       <IndoorOutdoor />

From 34320fd5652ff5d8bc258ded0126fd7d04f3fa17 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 2 Dec 2022 11:24:11 +0300
Subject: [PATCH 3/7] Refravtored search options

---
 src/components/Header/JumboContent/HeaderContent.js | 10 +++++++++-
 src/components/PageHeader/index.js                  | 10 +++++++++-
 src/components/SearchBar.js                         | 11 +----------
 src/pages/air/index.js                              |  8 ++++++++
 src/pages/water/index.js                            |  2 ++
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/components/Header/JumboContent/HeaderContent.js b/src/components/Header/JumboContent/HeaderContent.js
index 357eb8a9..7e01ce4d 100644
--- a/src/components/Header/JumboContent/HeaderContent.js
+++ b/src/components/Header/JumboContent/HeaderContent.js
@@ -28,7 +28,13 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function HeaderContent({ handleSearch, header1, header2, ...props }) {
+function HeaderContent({
+  handleSearch,
+  header1,
+  header2,
+  searchOptions,
+  ...props
+}) {
   const classes = useStyles(props);
 
   return (
@@ -52,6 +58,7 @@ function HeaderContent({ handleSearch, header1, header2, ...props }) {
         <SearchBar
           placeholder="Search for your city ..."
           handleSearch={handleSearch}
+          options={searchOptions}
         />
       </Grid>
     </Grid>
@@ -62,6 +69,7 @@ HeaderContent.propTypes = {
   handleSearch: PropTypes.func.isRequired,
   header1: PropTypes.string.isRequired,
   header2: PropTypes.string.isRequired,
+  searchOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 export default HeaderContent;
diff --git a/src/components/PageHeader/index.js b/src/components/PageHeader/index.js
index 9e7a73fd..91e9c941 100644
--- a/src/components/PageHeader/index.js
+++ b/src/components/PageHeader/index.js
@@ -16,7 +16,13 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function PageHeader({ handleSearch, header1, header2, ...props }) {
+function PageHeader({
+  handleSearch,
+  header1,
+  header2,
+  searchOptions,
+  ...props
+}) {
   const classes = useStyles(props);
 
   return (
@@ -31,6 +37,7 @@ function PageHeader({ handleSearch, header1, header2, ...props }) {
           handleSearch={handleSearch}
           header1={header1}
           header2={header2}
+          searchOptions={searchOptions}
         />
       </Grid>
     </Grid>
@@ -41,6 +48,7 @@ PageHeader.propTypes = {
   handleSearch: PropTypes.func.isRequired,
   header1: PropTypes.string.isRequired,
   header2: PropTypes.string.isRequired,
+  searchOptions: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 export default PageHeader;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
index 14bc59b4..a8a2b3fb 100644
--- a/src/components/SearchBar.js
+++ b/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: "",
 };
 
diff --git a/src/pages/air/index.js b/src/pages/air/index.js
index f1bf667a..752dffee 100644
--- a/src/pages/air/index.js
+++ b/src/pages/air/index.js
@@ -21,6 +21,13 @@ 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" },
+];
 
 function AirHome() {
   const router = useRouter();
@@ -36,6 +43,7 @@ function AirHome() {
         handleSearch={handleSearch}
         header1={header1}
         header2={header2}
+        searchOptions={searchOptions}
       />
       <Showcase />
       <Issues />
diff --git a/src/pages/water/index.js b/src/pages/water/index.js
index 36bdc81e..c6e3cf8e 100644
--- a/src/pages/water/index.js
+++ b/src/pages/water/index.js
@@ -22,6 +22,7 @@ const CITY_PATHNAME = "/water/city";
 
 const header1 = "We're Testing Water";
 const header2 = "in Your City";
+const searchOptions = [{ value: "nairobi", label: "Nairobi, Kenya" }];
 
 function AirHome() {
   const router = useRouter();
@@ -37,6 +38,7 @@ function AirHome() {
         handleSearch={handleSearch}
         header1={header1}
         header2={header2}
+        searchOptions={searchOptions}
       />
       <Showcase />
       <Issues />

From 06ec88e9c83764aef322c85f46b019abb6919e45 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 2 Dec 2022 11:28:07 +0300
Subject: [PATCH 4/7] Rnamed WaterPage

---
 src/pages/water/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/water/index.js b/src/pages/water/index.js
index c6e3cf8e..4750eec1 100644
--- a/src/pages/water/index.js
+++ b/src/pages/water/index.js
@@ -24,7 +24,7 @@ const header1 = "We're Testing Water";
 const header2 = "in Your City";
 const searchOptions = [{ value: "nairobi", label: "Nairobi, Kenya" }];
 
-function AirHome() {
+function WaterHome() {
   const router = useRouter();
   const handleSearch = (city) => {
     router.push(`${CITY_PATHNAME}/${city.value}`);
@@ -53,4 +53,4 @@ function AirHome() {
 
 export { About, HowSensorsWork, JoinNetwork, Data, HealthAndClimateImpacts };
 
-export default AirHome;
+export default WaterHome;

From 41e22fc39d3267b893a82fee3f4bd66612c405b5 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 2 Dec 2022 11:35:51 +0300
Subject: [PATCH 5/7] Refractored showcase section

---
 src/components/Showcase/index.js | 14 +++++++++-----
 src/pages/air/index.js           |  7 ++++++-
 src/pages/water/index.js         |  6 +++++-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/Showcase/index.js b/src/components/Showcase/index.js
index 7f933692..6fa9cee7 100644
--- a/src/components/Showcase/index.js
+++ b/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,17 +23,15 @@ const useStyles = makeStyles({
 
 function Showcase(props) {
   const classes = useStyles(props);
+  const { title, headline } = 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 />
@@ -41,4 +40,9 @@ function Showcase(props) {
   );
 }
 
+Showcase.propTypes = {
+  title: PropTypes.string.isRequired,
+  headline: PropTypes.string.isRequired,
+};
+
 export default Showcase;
diff --git a/src/pages/air/index.js b/src/pages/air/index.js
index 752dffee..d6a9d4c4 100644
--- a/src/pages/air/index.js
+++ b/src/pages/air/index.js
@@ -28,6 +28,11 @@ const searchOptions = [
   { 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",
+};
 
 function AirHome() {
   const router = useRouter();
@@ -45,7 +50,7 @@ function AirHome() {
         header2={header2}
         searchOptions={searchOptions}
       />
-      <Showcase />
+      <Showcase {...showcase} />
       <Issues />
       <IndoorOutdoor />
       <Stories />
diff --git a/src/pages/water/index.js b/src/pages/water/index.js
index 4750eec1..3b8de88d 100644
--- a/src/pages/water/index.js
+++ b/src/pages/water/index.js
@@ -23,6 +23,10 @@ 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();
@@ -40,7 +44,7 @@ function WaterHome() {
         header2={header2}
         searchOptions={searchOptions}
       />
-      <Showcase />
+      <Showcase {...showcase} />
       <Issues />
       <IndoorOutdoor />
       <Stories />

From 770e0bff78ac32d7dbef399f283ed311c778a05a Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 2 Dec 2022 11:45:59 +0300
Subject: [PATCH 6/7] Refractored stories links

---
 src/components/Showcase/StoryList.js | 26 ++++++++++++++++----------
 src/components/Showcase/index.js     |  5 +++--
 src/pages/air/index.js               |  2 ++
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/Showcase/StoryList.js b/src/components/Showcase/StoryList.js
index 56f39723..e5fbb81f 100644
--- a/src/components/Showcase/StoryList.js
+++ b/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;
diff --git a/src/components/Showcase/index.js b/src/components/Showcase/index.js
index 6fa9cee7..461accfd 100644
--- a/src/components/Showcase/index.js
+++ b/src/components/Showcase/index.js
@@ -23,7 +23,7 @@ const useStyles = makeStyles({
 
 function Showcase(props) {
   const classes = useStyles(props);
-  const { title, headline } = props;
+  const { title, headline, storiesLink } = props;
 
   return (
     <Grid className={classes.root}>
@@ -34,7 +34,7 @@ function Showcase(props) {
         <Typography variant="body1">{headline}</Typography>
       </Grid>
       <Grid item xs={12}>
-        <StoryList />
+        <StoryList storiesLink={storiesLink} />
       </Grid>
     </Grid>
   );
@@ -43,6 +43,7 @@ function Showcase(props) {
 Showcase.propTypes = {
   title: PropTypes.string.isRequired,
   headline: PropTypes.string.isRequired,
+  storiesLink: PropTypes.string.isRequired,
 };
 
 export default Showcase;
diff --git a/src/pages/air/index.js b/src/pages/air/index.js
index d6a9d4c4..c9bdf129 100644
--- a/src/pages/air/index.js
+++ b/src/pages/air/index.js
@@ -32,6 +32,8 @@ 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() {

From f8a5d9e1d68b9366feea0f3033b6f9d4a90078e5 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Fri, 2 Dec 2022 11:47:36 +0300
Subject: [PATCH 7/7] Removed unused water sections

---
 src/pages/water/index.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/pages/water/index.js b/src/pages/water/index.js
index 3b8de88d..466a45da 100644
--- a/src/pages/water/index.js
+++ b/src/pages/water/index.js
@@ -1,9 +1,6 @@
 import { useRouter } from "next/router";
 import React from "react";
 
-import Stories from "@/sensorsafrica/components/About/Stories";
-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";
@@ -11,7 +8,6 @@ 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";
 import About from "@/sensorsafrica/pages/air/about";
 import Data from "@/sensorsafrica/pages/air/data";
 import HealthAndClimateImpacts from "@/sensorsafrica/pages/air/health-and-climate-impact";
@@ -45,10 +41,6 @@ function WaterHome() {
         searchOptions={searchOptions}
       />
       <Showcase {...showcase} />
-      <Issues />
-      <IndoorOutdoor />
-      <Stories />
-      <Support />
       <PartnerLogos />
       <Footer />
     </>