Add project engagement section to user profile

app/people/[id]/page.tsx

@@ -1,9 +1,13 @@
 import Image from "next/image";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 
 import { Breadcrumbs } from "~/components/Breadcrumbs";
-import { TextPill } from "~/components/TextPill";
-import { getUserProfile } from "~/src/data/user-profile";
+import {
+  getPublicTeamEngagementsForUser,
+  type TeamEngagement,
+} from "~/src/data/team-engagement";
+import { getUserProfile, type UserProfile } from "~/src/data/user-profile";
 import { Route } from "~/src/routing";
 import { skillsToHashtags } from "~/src/skills/skills";
 
@@ -21,6 +25,7 @@ async function Page({ params }: Props) {
     // TBD: Maybe the profile is private?
     notFound();
   }
+  const projectEngagements = await getPublicTeamEngagementsForUser(profile.id);
   const avatarUrl =
     profile.slackAvatarUrl ??
     "https://data.cesko.digital/people/generic-profile.jpg";
@@ -46,13 +51,45 @@ async function Page({ params }: Props) {
             Napsat mail
           </a>
         </div>
-        <div className="col-span-3 pt-2">
-          <h1 className="typo-title mb-4">{profile.name}</h1>
-          <div>{skillsToHashtags(profile.skills)}</div>
+        <div className="col-span-3 flex flex-col gap-7 pt-2">
+          <IntroSection profile={profile} />
+          {projectEngagements.length > 0 && (
+            <ProjectSection engagements={projectEngagements} />
+          )}
         </div>
       </div>
     </main>
   );
 }
 
+const IntroSection = ({ profile }: { profile: UserProfile }) => (
+  <section>
+    <h1 className="typo-title mb-4">{profile.name}</h1>
+    <p>{skillsToHashtags(profile.skills)}</p>
+  </section>
+);
+
+const ProjectSection = ({ engagements }: { engagements: TeamEngagement[] }) => (
+  <section>
+    <h2 className="typo-title2 mb-4">Moje projekty</h2>
+    <ul className="leading-loose">
+      {engagements.map((engagement) => (
+        <li key={engagement.id}>
+          <Link
+            href={Route.toProject({ slug: engagement.projectSlug })}
+            className="typo-link mr-3"
+          >
+            {engagement.projectName}
+          </Link>
+          {engagement.projectRole && (
+            <span className="typo-caption text-gravel">
+              {engagement.projectRole}
+            </span>
+          )}
+        </li>
+      ))}
+    </ul>
+  </section>
+);
+
 export default Page;

src/data/team-engagement.ts

@@ -39,6 +39,7 @@ export const decodeTeamEngagement = record({
   userAvatarUrl: relationToOne,
   projectRole: optional(string),
   projectName: relationToOne,
+  projectSlug: relationToOne,
   coordinatingRole: withDefault(boolean, false),
   fields: optionalArray(string),
   inactive: withDefault(boolean, false),
@@ -73,3 +74,16 @@ export async function getPublicTeamEngagementsForProject(
     .then(unwrapRecords)
     .then(decodeValidItemsFromArray(decodeTeamEngagement, "Teams"));
 }
+
+export async function getPublicTeamEngagementsForUser(
+  userId: string,
+): Promise<TeamEngagement[]> {
+  return await teamEngagementTable
+    .select({
+      view: "Public Team Engagements",
+      filterByFormula: `{userId} = "${userId}"`,
+    })
+    .all()
+    .then(unwrapRecords)
+    .then(decodeValidItemsFromArray(decodeTeamEngagement, "Teams"));
+}

src/routing.ts

@@ -28,7 +28,7 @@ export const Route = {
   eventFeed: "/events/feed.ical",
   // Dynamic routes
   toEvent: (e: Event) => `/events/${e.slug}`,
-  toProject: (p: Project) => `/projects/${p.slug}`,
+  toProject: (p: Pick<Project, "slug">) => `/projects/${p.slug}`,
   toOpportunity: (o: Pick<Opportunity, "slug">) => `/opportunities/${o.slug}`,
   toYouTubePlaylist: (playlistId: string) =>
     `https://www.youtube.com/playlist?list=${playlistId}`,