Add candidate avatar to area pages

DublinInquirer · Apr 8, 2024 · 797b4bb · 797b4bb
1 parent b0135d7
commit 797b4bb
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git 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
@@ -6,13 +6,15 @@ import {
   airtableClient,
   getLookupFieldValue,
   getStringFieldValue,
+  getOptionalLookupFieldValue,
 } from "../../../airtable-api";
 import Layout from "../../../layouts/Layout.astro";
 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 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 ?? "")}