Add photos for class council

src/pages/classcouncil.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import Hero from '../components/Hero';
+import LinebreakToBrTag from '../components/LineBreakToBrTag';
 import MemberRow from '../components/MemberRow';
 import PrimaryHeader from '../components/PrimaryHeader';
 import useQuery from '../hooks/useQuery';
+import imageUrl from '../lib/imageUrl';
 import sortCommittee from '../lib/sortCommittee';
 
 const roleOrder = [
@@ -15,6 +17,13 @@ const roleOrder = [
 	'Sponsor',
 ];
 
+export interface ClassCouncilYear {
+	year: string;
+	members: SGA.MemberDocument[];
+	photoUrl: string | null;
+	photoDescription: string | null;
+}
+
 export default function ClassCouncil() {
 	let members = useQuery<SGA.MemberDocument[]>(
 		`*[_type == 'member' && committee == 'class'] | order year`
@@ -24,14 +33,24 @@ export default function ClassCouncil() {
 		return null;
 	}
 
-	let years: [string, SGA.MemberDocument[]][] = [];
+	let years: ClassCouncilYear[] = [];
 	let currentYearMembers: SGA.MemberDocument[] = [];
 	let currentYear = '';
+	let currentYearPhotoUrl: string | null = null;
+	let currentYearPhotoDescription: string | null = null;
 
 	const saveCurrentYear = () => {
 		// Clear the members of the current year
-		years.push([currentYear, sortCommittee(currentYearMembers, roleOrder)]);
+		years.push({
+			year: currentYear,
+			members: sortCommittee(currentYearMembers, roleOrder),
+			photoUrl: currentYearPhotoUrl,
+			photoDescription: currentYearPhotoDescription,
+		});
+
 		currentYearMembers = [];
+		currentYearPhotoUrl = null;
+		currentYear = '';
 	};
 
 	for (let member of members) {
@@ -41,7 +60,14 @@ export default function ClassCouncil() {
 			}
 			currentYear = member.year;
 		}
-		currentYearMembers.push(member);
+		// If the role is 'PHOTO', 'Photo', 'photo', or anything else like that, use its "profile picture"
+		// as this Class Council's group photo.
+		if (member.role.toLowerCase() === 'photo') {
+			currentYearPhotoUrl = imageUrl(member.profile_photo).url();
+			currentYearPhotoDescription = member.bio;
+		} else {
+			currentYearMembers.push(member);
+		}
 	}
 
 	if (currentYearMembers.length > 0) {
@@ -52,9 +78,34 @@ export default function ClassCouncil() {
 		<>
 			<Hero heading='Class Council' />
 			<main>
-				{years.map(([year, members]) => (
+				{years.map(({ year, members, photoUrl, photoDescription }) => (
 					<>
-						<PrimaryHeader>Class Council {year}</PrimaryHeader>
+						<PrimaryHeader style={{ textAlign: 'center' }}>
+							Class Council {year}
+						</PrimaryHeader>
+
+						{photoUrl && (
+							<div
+								style={{
+									width: '100%',
+									display: 'flex',
+									flexDirection: 'column',
+									alignContent: 'center',
+								}}
+							>
+								<div style={{ textAlign: 'center', marginBottom: '10px' }}>
+									<img
+										src={photoUrl}
+										alt={'Group photo for Class Council ' + year}
+										style={{ maxHeight: '25em' }}
+									/>
+								</div>
+								<span style={{ textAlign: 'center' }}>
+									<LinebreakToBrTag text={photoDescription ?? ''} />
+								</span>
+							</div>
+						)}
+
 						{members.map((member) => (
 							<MemberRow
 								limitPhotoHeight