From 848d8f50e465dffcff352a0bab409823bb74e2d1 Mon Sep 17 00:00:00 2001
From: Tewson Seeoun <tewson.seeoun@gmail.com>
Date: Tue, 9 Apr 2024 19:06:25 +0100
Subject: [PATCH] Add links to LEAs from index

---
 src/components/AreaSelector.astro |  9 +++++----
 src/pages/index.astro             | 19 ++++++++++++++-----
 src/utils.ts                      |  9 +++++++--
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/AreaSelector.astro b/src/components/AreaSelector.astro
index 9c2942e..00211ba 100644
--- a/src/components/AreaSelector.astro
+++ b/src/components/AreaSelector.astro
@@ -1,5 +1,6 @@
 ---
 import lodash from "lodash";
+import { LOCAL_AUTHORITY } from "../utils";
 
 interface Props {
   dccElectoralAreaNames: string[];
@@ -14,21 +15,21 @@ const { dccElectoralAreaNames, fingalElectoralAreaNames } = Astro.props;
   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>
+  <option disabled>{LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL}</option>
   {
     dccElectoralAreaNames.map((electoralAreaName) => (
       <option
-        value={`dublin-city-council/${lodash.kebabCase(electoralAreaName)}`}
+        value={`${lodash.kebabCase(LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
       >
         {electoralAreaName}
       </option>
     ))
   }
-  <option disabled>Fingal County Council</option>
+  <option disabled>{LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL}</option>
   {
     fingalElectoralAreaNames.map((electoralAreaName) => (
       <option
-        value={`fingal-county-council/${lodash.kebabCase(electoralAreaName)}`}
+        value={`${lodash.kebabCase(LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
       >
         {electoralAreaName}
       </option>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f57bdfd..78d2455 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -9,7 +9,8 @@ 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";
+import { LOCAL_AUTHORITY, getAreasByLocalAuthority } from "../utils";
+import lodash from "lodash";
 
 const electoralAreas = await airtableClient("Areas")
   .select({
@@ -68,7 +69,7 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
     </p>
   </header>
   <main class="px-gutter">
-    <h1 class="font-bold text-2xl">Dublin City Council</h1>
+    <h1 class="font-bold text-2xl">{LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL}</h1>
     {
       dccElectoralAreaNames.map((electoralAreaName) => {
         if (
@@ -80,7 +81,11 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
         return (
           <>
             <div>
-              <p>{electoralAreaName}</p>
+              <Link
+                to={`areas/${lodash.kebabCase(LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
+              >
+                {electoralAreaName}
+              </Link>
             </div>
             <div class="flex flex-wrap">
               {candidatesByArea[electoralAreaName]?.map((candidate) => {
@@ -104,7 +109,7 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
         );
       })
     }
-    <h1 class="font-bold text-2xl">Fingal County Council</h1>
+    <h1 class="font-bold text-2xl">{LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL}</h1>
     {
       fingalElectoralAreaNames.map((electoralAreaName) => {
         if (
@@ -116,7 +121,11 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
         return (
           <>
             <div>
-              <p>{electoralAreaName}</p>
+              <Link
+                to={`areas/${lodash.kebabCase(LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL)}/${lodash.kebabCase(electoralAreaName)}`}
+              >
+                {electoralAreaName}
+              </Link>
             </div>
             <div class="flex flex-wrap">
               {candidatesByArea[electoralAreaName]?.map((candidate) => {
diff --git a/src/utils.ts b/src/utils.ts
index 0da310f..7f6ba07 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -2,6 +2,11 @@ import type { Records, FieldSet } from "airtable";
 
 import { getLookupFieldValue, getStringFieldValue } from "./airtable-api";
 
+export const LOCAL_AUTHORITY = {
+  DUBLIN_CITY_COUNCIL: "Dublin City Council",
+  FINGAL_COUNTY_COUNCIL: "Fingal County Council",
+};
+
 export function getCandidateFullName({
   firstname,
   lastname,
@@ -20,7 +25,7 @@ export function getAreasByLocalAuthority(electoralAreas: Records<FieldSet>) {
         "Local Authority Name"
       );
 
-      return localAuthorityName === "Dublin City Council";
+      return localAuthorityName === LOCAL_AUTHORITY.DUBLIN_CITY_COUNCIL;
     })
     .map((record) => getStringFieldValue(record, "Name"));
 
@@ -31,7 +36,7 @@ export function getAreasByLocalAuthority(electoralAreas: Records<FieldSet>) {
         "Local Authority Name"
       );
 
-      return localAuthorityName === "Fingal County Council";
+      return localAuthorityName === LOCAL_AUTHORITY.FINGAL_COUNTY_COUNCIL;
     })
     .map((record) => getStringFieldValue(record, "Name"));