From 797b4bb3ee0f37b67b672583da2ab7ff891b77d1 Mon Sep 17 00:00:00 2001
From: Tewson Seeoun <tewson.seeoun@gmail.com>
Date: Mon, 8 Apr 2024 20:27:49 +0100
Subject: [PATCH] Add candidate avatar to area pages

---
 src/airtable-api.ts                           | 10 +++++++
 src/pages/areas/[localAuthority]/[area].astro | 30 ++++++++++++++-----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/airtable-api.ts b/src/airtable-api.ts
index 866ceb2..e9ab94e 100644
--- a/src/airtable-api.ts
+++ b/src/airtable-api.ts
@@ -12,6 +12,16 @@ export function getLookupFieldValue(
   return z.array(z.string()).parse(record.get(fieldName))[0];
 }
 
+export function getOptionalLookupFieldValue(
+  record: Record<FieldSet>,
+  fieldName: string
+) {
+  return z
+    .array(z.string().optional())
+    .optional()
+    .parse(record.get(fieldName))?.[0];
+}
+
 export function getStringFieldValue(
   record: Record<FieldSet>,
   fieldName: string
diff --git a/src/pages/areas/[localAuthority]/[area].astro b/src/pages/areas/[localAuthority]/[area].astro
index dec7048..b72b08f 100644
--- a/src/pages/areas/[localAuthority]/[area].astro
+++ b/src/pages/areas/[localAuthority]/[area].astro
@@ -6,6 +6,7 @@ import {
   airtableClient,
   getLookupFieldValue,
   getStringFieldValue,
+  getOptionalLookupFieldValue,
 } from "../../../airtable-api";
 import Layout from "../../../layouts/Layout.astro";
 import HeaderSection from "../../../components/HeaderSection.astro";
@@ -13,6 +14,7 @@ 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 CandidateAvatar from "../../../components/CandidateAvatar.astro";
 import { getAreasByLocalAuthority } from "../../../utils";
 
 export async function getStaticPaths() {
@@ -60,9 +62,14 @@ export async function getStaticPaths() {
               answerRecord,
               "Candidate full name"
             );
+            const candidateProfilePictureUrl = getOptionalLookupFieldValue(
+              answerRecord,
+              "Candidate profile picture"
+            );
             const answer = getStringFieldValue(answerRecord, "Text");
             return {
               candidateFullName,
+              candidateProfilePictureUrl,
               answer,
             };
           }),
@@ -116,13 +123,22 @@ const {
             <QuestionText>{question.text}</QuestionText>
             {question.answers.map((answer) => (
               <>
-                <h3>
-                  <Link
-                    to={`candidates/${lodash.kebabCase(answer.candidateFullName)}`}
-                  >
-                    {answer.candidateFullName}
-                  </Link>
-                </h3>
+                <div class="flex">
+                  <div class="-ml-1 mr-2">
+                    <CandidateAvatar
+                      candidateFullName={answer.candidateFullName}
+                      profilePictureUrl={answer.candidateProfilePictureUrl}
+                      showName={false}
+                    />
+                  </div>
+                  <h3 class="self-center">
+                    <Link
+                      to={`candidates/${lodash.kebabCase(answer.candidateFullName)}`}
+                    >
+                      {answer.candidateFullName}
+                    </Link>
+                  </h3>
+                </div>
                 <div
                   class="pb-4 markdown"
                   set:html={marked.parse(answer.answer ?? "")}