Fetch profile pic url from airtable

DublinInquirer · Apr 8, 2024 · c13e199 · c13e199
1 parent 24ba677
commit c13e199
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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>