Organizer page is now fetching from Sanity

apps/site/src/app/about/TeamCard.tsx

@@ -1,9 +1,15 @@
+import { z } from "zod";
 /* eslint-disable @next/next/no-img-element */
 import type { StaticImageData } from "next/image";
 import clsx from "clsx";
 // could we replace with something like simple-icons (https://github.com/simple-icons/simple-icons)?
-import linkedinLogo from "@/lib/common/assets/icons/linkedin.svg";
+import linkedinLogo from "@/lib/common/assets/linkedin-logo.svg";
 import blank from "./blank.png";
+import { client } from "@/lib/sanity/sanityClient";
+import { SanityImageReference } from "@/lib/sanity/types";
+import imageUrlBuilder from "@sanity/image-url";
+
+const urlBuilder = imageUrlBuilder(client);
 
 import styles from "./TeamCard.module.scss";
 
@@ -16,18 +22,23 @@ import styles from "./TeamCard.module.scss";
 //
 
 //
+
 interface TeamCardProps {
 	name: string;
 	position: string;
-	image: string;
-	linkedInUrl: string;
+	image: z.infer<typeof SanityImageReference> | null;
+	linkedInUrl?: string;
 }
 const TeamCard = ({ name, position, image, linkedInUrl }: TeamCardProps) => {
 	return (
 		<div className={styles.teamCard}>
 			<div className={styles.imagesContainer}>
 				<img
-					src={image || blank.src}
+					src={
+						image
+							? urlBuilder.image(image).size(200, 200).dpr(3).url()
+							: blank.src
+					}
 					className={styles.profilePicture}
 					alt={name}
 				/>

apps/site/src/app/about/TeamSection.tsx

@@ -1,13 +1,17 @@
 import clsx from "clsx";
 import TeamCard from "./TeamCard";
+import { z } from "zod";
+import { SanityImageReference } from "@/lib/sanity/types";
 
 import styles from "./TeamSection.module.scss";
 
 type Member = {
-	name: string;
+	person: {
+		name: string;
+		profilePic: z.infer<typeof SanityImageReference> | null;
+		socials: { link: string } | null;
+	};
 	position: string;
-	image: string;
-	linkedInUrl: string;
 };
 
 interface TeamSection {
@@ -21,11 +25,11 @@ const TeamSection = ({ team, members }: TeamSection) => {
 			<div className={styles.teamGrid}>
 				{members.map((member) => (
 					<TeamCard
-						key={member.name}
-						name={member.name}
+						key={member.person.name}
+						name={member.person.name}
 						position={member.position}
-						image={member.image}
-						linkedInUrl={member.linkedInUrl}
+						image={member.person.profilePic}
+						linkedInUrl={member.person.socials?.link}
 					/>
 				))}
 			</div>

apps/site/src/app/about/getMembers.ts

@@ -1,28 +1,78 @@
-const FEED_URL = "https://docs.google.com/spreadsheets/d/";
-const SPREADSHEET_KEY = "1DWCOQBlzA3mpa2BXYXPmQrF9_-SpoPFbTdDQuCQ83hU";
-const QUERY = "pub";
-const FORMAT = "output=tsv";
+import { z } from "zod";
+import { cache } from "react";
+import { client } from "@/lib/sanity/sanityClient";
+import { SanityImageReference } from "@/lib/sanity/types";
 
-const dataURL = FEED_URL + SPREADSHEET_KEY + "/" + QUERY + "?" + FORMAT;
+const Person = z.object({
+	_type: z.literal("person"),
+	name: z.string(),
+	profilePic: SanityImageReference.nullable(),
+	socials: z
+		.object({
+			link: z.string(),
+		})
+		.nullable(),
+});
 
-const getSheetsData = async (page: string) => {
-	const response = await fetch(dataURL);
+const Department = z.array(
+	z.object({
+		person: Person,
+		position: z.string(),
+	})
+);
 
-	if (response.status !== 200)
-		console.warn(
-			"Error ocurred while fetching schedule data:",
-			response.statusText
-		);
+export const Members = z.object({
+	corporate: Department,
+	logistics: Department,
+	marketing: Department,
+	tech: Department,
+});
 
-	const csv = await response.text();
-	for (const line of csv.split("\n")) {
-		const [key, value] = line.split("\t");
-		if (key === page) {
-			return JSON.parse(value);
-		}
+export const getMembers = cache(async () => {
+	try {
+		return Members.parse(
+			await client.fetch(
+				`*[_type == 'boardYear'] | order(year desc) [0]{
+				corporate[]{
+					person->{
+						_type,
+						name,
+						profilePic,
+						socials[0] {link}
+					},
+					position
+				},
+				logistics[]{
+					person->{
+						_type,
+						name,
+						profilePic,
+						socials[0] {link}
+					},
+					position
+				},
+				marketing[]{
+					person->{
+						_type,
+						name,
+						profilePic,
+						socials[0] {link}
+					},
+					position
+				},
+				tech[]{
+					person->{
+						_type,
+						name,
+						profilePic,
+						socials[0] {link}
+					},
+					position
+				}, 
+			}`
+			)
+		);
+	} catch (error) {
+		console.error(error);
 	}
-
-	return null;
-};
-
-export const getMembers = async () => await getSheetsData("members");
+});

apps/site/src/app/about/page.tsx

@@ -20,6 +20,10 @@ export const metadata: Metadata = {
 export default async function Home() {
 	const teamMembers = await getMembers();
 
+	if (teamMembers === undefined) {
+		throw new Error("teamMembers is undefined");
+	}
+
 	return (
 		<div className={styles.about}>
 			<Header title="About Us" />
@@ -48,7 +52,6 @@ export default async function Home() {
 					</div>
 					<div className={clsx(styles.aboutTeams, "container")}>
 						{Object.entries(teamMembers).map(([team, members]) => (
-							// @ts-expect-error
 							<TeamSection key={team} team={team} members={members} />
 						))}
 					</div>