Add area selector to area page

DublinInquirer · Mar 20, 2024 · 5fb0032 · 5fb0032
1 parent f16093c
commit 5fb0032
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 58 deletions.
diff --git a/src/components/AreaSelector.astro b/src/components/AreaSelector.astro
@@ -0,0 +1,43 @@
+---
+import lodash from "lodash";
+
+interface Props {
+  dccElectoralAreaNames: string[];
+  fingalElectoralAreaNames: string[];
+}
+
+const { dccElectoralAreaNames, fingalElectoralAreaNames } = Astro.props;
+---
+
+<select
+  name="electoral-area"
+  class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2 block w-full"
+>
+  <option disabled selected>Choose your electoral area</option>
+  <option disabled>Dublin City Council</option>
+  {
+    dccElectoralAreaNames.map((electoralAreaName) => (
+      <option
+        value={`dublin-city-council/${lodash.kebabCase(electoralAreaName)}`}
+      >
+        {electoralAreaName}
+      </option>
+    ))
+  }
+  <option disabled>Fingal County Council</option>
+  {
+    fingalElectoralAreaNames.map((electoralAreaName) => (
+      <option
+        value={`fingal-county-council/${lodash.kebabCase(electoralAreaName)}`}
+      >
+        {electoralAreaName}
+      </option>
+    ))
+  }
+</select>
+<script>
+  const selectElement = document.querySelector("select[name=electoral-area]");
+  selectElement?.addEventListener("change", (event) => {
+    window.location.href = `${import.meta.env.BASE_URL}/areas/${(event.target as HTMLSelectElement).value}`;
+  });
+</script>
diff --git a/src/pages/areas/[localAuthority]/[area].astro b/src/pages/areas/[localAuthority]/[area].astro
@@ -12,6 +12,8 @@ import HeaderSection from "../../../components/HeaderSection.astro";
 import HeaderTitle from "../../../components/HeaderTitle.astro";
 import QuestionText from "../../../components/QuestionText.astro";
 import Link from "../../../components/Link.astro";
+import AreaSelector from "../../../components/AreaSelector.astro";
+import { getAreasByLocalAuthority } from "../../../utils";
 
 export async function getStaticPaths() {
   const electoralAreas = await airtableClient("Areas")
@@ -20,6 +22,9 @@ export async function getStaticPaths() {
     })
     .all();
 
+  const { dccElectoralAreaNames, fingalElectoralAreaNames } =
+    getAreasByLocalAuthority(electoralAreas);
+
   const questionRecords = await airtableClient("Questions")
     .select({
       view: "Grid view",
@@ -104,17 +109,29 @@ export async function getStaticPaths() {
         area: electoralAreaName,
         questions,
         hasAnswers,
+        dccElectoralAreaNames,
+        fingalElectoralAreaNames,
       },
     };
   });
 }
 
-const { area, questions, hasAnswers } = Astro.props;
+const {
+  area,
+  questions,
+  hasAnswers,
+  dccElectoralAreaNames,
+  fingalElectoralAreaNames,
+} = Astro.props;
 ---
 
 <Layout>
   <HeaderSection>
     <HeaderTitle>{area}</HeaderTitle>
+    <AreaSelector
+      dccElectoralAreaNames={dccElectoralAreaNames}
+      fingalElectoralAreaNames={fingalElectoralAreaNames}
+    />
   </HeaderSection>
   <main class="px-gutter">
     {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,38 +9,17 @@ import {
 import Layout from "../layouts/Layout.astro";
 import Link from "../components/Link.astro";
 import CandidateAvatar from "../components/CandidateAvatar.astro";
+import AreaSelector from "../components/AreaSelector.astro";
+import { getAreasByLocalAuthority } from "../utils";
 
 const electoralAreas = await airtableClient("Areas")
   .select({
     view: "Grid view",
   })
   .all();
 
-const electoralAreaNames = electoralAreas.map((record) =>
-  getStringFieldValue(record, "Name")
-);
-
-const dccElectoralAreaNames = electoralAreas
-  .filter((electoralArea) => {
-    const localAuthorityName = getLookupFieldValue(
-      electoralArea,
-      "Local Authority Name"
-    );
-
-    return localAuthorityName === "Dublin City Council";
-  })
-  .map((record) => getStringFieldValue(record, "Name"));
-
-const fingalElectoralAreaNames = electoralAreas
-  .filter((electoralArea) => {
-    const localAuthorityName = getLookupFieldValue(
-      electoralArea,
-      "Local Authority Name"
-    );
-
-    return localAuthorityName === "Fingal County Council";
-  })
-  .map((record) => getStringFieldValue(record, "Name"));
+const { dccElectoralAreaNames, fingalElectoralAreaNames } =
+  getAreasByLocalAuthority(electoralAreas);
 
 const candidates = await airtableClient("Candidates")
   .select({
@@ -76,32 +55,10 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
       seats on Dublin City Council and Fingal County Council. These are their responses.
     </h2>
     <div class="pb-2">
-      <select
-        name="electoral-area"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg p-2 block w-full"
-      >
-        <option disabled selected>Choose your electoral area</option>
-        <option disabled>Dublin City Council</option>
-        {
-          dccElectoralAreaNames.map((electoralAreaName) => (
-            <option
-              value={`dublin-city-council/${lodash.kebabCase(electoralAreaName)}`}
-            >
-              {electoralAreaName}
-            </option>
-          ))
-        }
-        <option disabled>Fingal County Council</option>
-        {
-          fingalElectoralAreaNames.map((electoralAreaName) => (
-            <option
-              value={`fingal-county-council/${lodash.kebabCase(electoralAreaName)}`}
-            >
-              {electoralAreaName}
-            </option>
-          ))
-        }
-      </select>
+      <AreaSelector
+        dccElectoralAreaNames={dccElectoralAreaNames}
+        fingalElectoralAreaNames={fingalElectoralAreaNames}
+      />
     </div>
     <p>
       If you don't know which local electoral area you live in, you can enter
@@ -174,9 +131,3 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
     }
   </main>
 </Layout>
-<script>
-  const selectElement = document.querySelector("select[name=electoral-area]");
-  selectElement?.addEventListener("change", (event) => {
-    window.location.href = `${import.meta.env.BASE_URL}/areas/${(event.target as HTMLSelectElement).value}`;
-  });
-</script>
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,3 +1,7 @@
+import type { Records, FieldSet } from "airtable";
+
+import { getLookupFieldValue, getStringFieldValue } from "./airtable-api";
+
 export function getCandidateFullName({
   firstname,
   lastname,
@@ -7,3 +11,29 @@ export function getCandidateFullName({
 }) {
   return `${firstname} ${lastname}`;
 }
+
+export function getAreasByLocalAuthority(electoralAreas: Records<FieldSet>) {
+  const dccElectoralAreaNames = electoralAreas
+    .filter((electoralArea) => {
+      const localAuthorityName = getLookupFieldValue(
+        electoralArea,
+        "Local Authority Name"
+      );
+
+      return localAuthorityName === "Dublin City Council";
+    })
+    .map((record) => getStringFieldValue(record, "Name"));
+
+  const fingalElectoralAreaNames = electoralAreas
+    .filter((electoralArea) => {
+      const localAuthorityName = getLookupFieldValue(
+        electoralArea,
+        "Local Authority Name"
+      );
+
+      return localAuthorityName === "Fingal County Council";
+    })
+    .map((record) => getStringFieldValue(record, "Name"));
+
+  return { dccElectoralAreaNames, fingalElectoralAreaNames };
+}