From 8a1a1c57ff351c6464bd9cb2f72b486778f6911b Mon Sep 17 00:00:00 2001 From: Alex Meng Date: Sun, 10 May 2026 06:21:24 -0700 Subject: [PATCH 1/2] Update profile lab affiliation flow --- app/profile/labs/new/page.tsx | 134 ++++++++++++++++++++++++++++++++++ app/profile/page.tsx | 120 +++++++++++++++++++++++++----- 2 files changed, 235 insertions(+), 19 deletions(-) create mode 100644 app/profile/labs/new/page.tsx diff --git a/app/profile/labs/new/page.tsx b/app/profile/labs/new/page.tsx new file mode 100644 index 0000000..1151f21 --- /dev/null +++ b/app/profile/labs/new/page.tsx @@ -0,0 +1,134 @@ +import Link from "next/link"; +import { ArrowLeft, ChevronDown } from "lucide-react"; + +import { getLabs } from "@/services/labs/labs"; + +type LabOption = { + id: string; + name: string; +}; + +const fallbackLabs: LabOption[] = [ + { id: "xu-computational-neuroscience-lab", name: "Xu Computational Neuroscience Lab" }, + { id: "cognitive-systems-core", name: "Cognitive Systems Core" }, + { id: "bioengineering-shared-facility", name: "Bioengineering Shared Facility" }, +]; + +async function loadLabOptions(): Promise { + try { + const result = await getLabs({ page: 1, limit: 50 }); + const labs = result.data.map((lab) => ({ id: lab.id, name: lab.name })); + return labs.length > 0 ? labs : fallbackLabs; + } catch { + return fallbackLabs; + } +} + +export default async function AddLabAffiliationPage() { + const labOptions = await loadLabOptions(); + + return ( +
+
+
+ + + Back to Profile + +
+
+ +
+
+
+

+ Add Lab Affiliation +

+

+ Choose a lab from the lab database, add your role, and record when + you joined so it can appear on your profile page. +

+
+ +
+
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + Cancel + + +
+
+
+
+
+ ); +} diff --git a/app/profile/page.tsx b/app/profile/page.tsx index 421b450..65199ec 100644 --- a/app/profile/page.tsx +++ b/app/profile/page.tsx @@ -4,22 +4,41 @@ import { CalendarDays, FlaskConical, Mail, - Phone, + Plus, UserRound, } from "lucide-react"; +type Affiliation = { + id: string; + labName: string; + role: string; + joined: string; +}; + const profile = { name: "Dr. Xu", pronouns: "He/him", bio: "Experienced principal investigator at a lab specializing in computational neuroscience. Our lab focuses on developing innovative techniques for analysis in computational neuroscience.", email: "Xu@ucsd.edu", phone: "(xxx) xxx-xxxx", - labName: "Xu Computational Neuroscience Lab", - role: "Principal Investigator (PI)", - joined: "March 2026", status: "Active", }; +const sampleAffiliations: Affiliation[] = [ + { + id: "xu-comp-neuro", + labName: "Xu Computational Neuroscience Lab", + role: "Principal Investigator (PI)", + joined: "March 2026", + }, + { + id: "cognitive-systems-core", + labName: "Cognitive Systems Core", + role: "Lab Advisor", + joined: "January 2025", + }, +]; + function InfoCard({ icon, title, @@ -35,7 +54,7 @@ function InfoCard({
{icon}

{title}

-
{children}
+ {children} ); } @@ -55,7 +74,78 @@ function InfoRow({ ); } -export default function ProfilePage() { +function LabAffiliationsCard({ + affiliations, +}: Readonly<{ + affiliations: Affiliation[]; +}>) { + if (affiliations.length === 0) { + return ( + } + title="Lab and Affiliation" + > +
+

+ You don't have a lab listed yet. Add your affiliation to connect + with other researchers and manage your equipment listings. +

+ + Add Lab + +
+ + ); + } + + return ( + } + title="Lab and Affiliation" + > +
+ {affiliations.map((affiliation, index) => ( +
+
+ + +
+ +

Joined {affiliation.joined}.

+
+
+
+ ))} + +
+ + + Add another lab + +
+
+ + ); +} + +export default async function ProfilePage({ + searchParams, +}: Readonly<{ + searchParams?: Promise<{ labs?: string }>; +}>) { + const resolvedParams = searchParams ? await searchParams : undefined; + const affiliations = + resolvedParams?.labs === "empty" ? [] : sampleAffiliations; + return (
@@ -102,21 +192,13 @@ export default function ProfilePage() { icon={} title="Contact Information" > - - - - - } - title="Lab and Affiliation" - > - - -
- -

Joined {profile.joined}.

+
+ +
+ +
From ab9961a245cec00f9253a2ae36e0c9d6fd5fa697 Mon Sep 17 00:00:00 2001 From: Alex Meng Date: Sun, 10 May 2026 07:08:01 -0700 Subject: [PATCH 2/2] Align add lab page to design --- app/profile/labs/new/page.tsx | 36 ++++++----------------------------- 1 file changed, 6 insertions(+), 30 deletions(-) diff --git a/app/profile/labs/new/page.tsx b/app/profile/labs/new/page.tsx index 1151f21..7daf54d 100644 --- a/app/profile/labs/new/page.tsx +++ b/app/profile/labs/new/page.tsx @@ -1,7 +1,5 @@ import Link from "next/link"; -import { ArrowLeft, ChevronDown } from "lucide-react"; - -import { getLabs } from "@/services/labs/labs"; +import { ChevronDown } from "lucide-react"; type LabOption = { id: string; @@ -14,42 +12,20 @@ const fallbackLabs: LabOption[] = [ { id: "bioengineering-shared-facility", name: "Bioengineering Shared Facility" }, ]; -async function loadLabOptions(): Promise { - try { - const result = await getLabs({ page: 1, limit: 50 }); - const labs = result.data.map((lab) => ({ id: lab.id, name: lab.name })); - return labs.length > 0 ? labs : fallbackLabs; - } catch { - return fallbackLabs; - } -} - -export default async function AddLabAffiliationPage() { - const labOptions = await loadLabOptions(); +export default function AddLabAffiliationPage() { + const labOptions = fallbackLabs; return (
-
-
- - - Back to Profile - -
-
- -
+

Add Lab Affiliation

- Choose a lab from the lab database, add your role, and record when - you joined so it can appear on your profile page. + Choose a lab, add your role, and record when you joined so it can + appear on your profile page.