From c13e199b6922015d79672d9f39fbad73625f1047 Mon Sep 17 00:00:00 2001
From: Tewson Seeoun <tewson.seeoun@gmail.com>
Date: Mon, 8 Apr 2024 19:22:40 +0100
Subject: [PATCH] Fetch profile pic url from airtable

---
 src/airtable-api.ts                  |  7 +++++++
 src/components/CandidateAvatar.astro |  8 ++++++--
 src/pages/index.astro                | 17 +++++++++++++++--
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/airtable-api.ts b/src/airtable-api.ts
index 537ecb6..866ceb2 100644
--- a/src/airtable-api.ts
+++ b/src/airtable-api.ts
@@ -18,3 +18,10 @@ export function getStringFieldValue(
 ) {
   return z.string().parse(record.get(fieldName));
 }
+
+export function getOptionalStringFieldValue(
+  record: Record<FieldSet>,
+  fieldName: string
+) {
+  return z.string().optional().parse(record.get(fieldName));
+}
diff --git a/src/components/CandidateAvatar.astro b/src/components/CandidateAvatar.astro
index 222ae22..05a4773 100644
--- a/src/components/CandidateAvatar.astro
+++ b/src/components/CandidateAvatar.astro
@@ -5,14 +5,18 @@ import Link from "./Link.astro";
 
 interface Props {
   candidateFullName: string;
+  profilePictureUrl?: string;
 }
 
-const { candidateFullName } = Astro.props;
+const { candidateFullName, profilePictureUrl } = Astro.props;
+const srcUrl = profilePictureUrl
+  ? `https://i0.wp.com/dublininquirer.com${new URL(profilePictureUrl).pathname}?resize=64%2C64&ssl=1`
+  : "data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==";
 ---
 
 <div class="p-1">
   <Link to={`candidates/${lodash.kebabCase(candidateFullName)}`}>
-    <img src="https://picsum.photos/64" class="rounded-full" />
+    <img src={srcUrl} class="rounded-full w-16 h-16" />
     <p class="text-xs text-center w-16">
       {candidateFullName}
     </p>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 35603de..f57bdfd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,6 +3,7 @@ import {
   airtableClient,
   getLookupFieldValue,
   getStringFieldValue,
+  getOptionalStringFieldValue,
 } from "../airtable-api";
 import Layout from "../layouts/Layout.astro";
 import Link from "../components/Link.astro";
@@ -88,7 +89,13 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
                   "Full name"
                 );
                 return (
-                  <CandidateAvatar candidateFullName={candidateFullName} />
+                  <CandidateAvatar
+                    candidateFullName={candidateFullName}
+                    profilePictureUrl={getOptionalStringFieldValue(
+                      candidate,
+                      "Profile picture"
+                    )}
+                  />
                 );
               })}
             </div>
@@ -118,7 +125,13 @@ const candidatesByArea = candidates.reduce<Record<string, typeof candidates>>(
                   "Full name"
                 );
                 return (
-                  <CandidateAvatar candidateFullName={candidateFullName} />
+                  <CandidateAvatar
+                    candidateFullName={candidateFullName}
+                    profilePictureUrl={getOptionalStringFieldValue(
+                      candidate,
+                      "Profile picture"
+                    )}
+                  />
                 );
               })}
             </div>