From ecb033a3928d6fab0de1134fe10e2b3f48e46f7f Mon Sep 17 00:00:00 2001
From: Duosi-Dai <duosi@kth.se>
Date: Fri, 9 Aug 2024 14:56:05 +0200
Subject: [PATCH] Small modifications made

---
 .../about/_components/OrganizationList.tsx    | 60 ++++++++++++++
 .../{TeamUpdateList.tsx => PersonCard.tsx}    |  5 +-
 src/app/about/_components/TeamUpdate.tsx      | 80 -------------------
 src/app/about/team/page.tsx                   |  6 +-
 4 files changed, 64 insertions(+), 87 deletions(-)
 create mode 100644 src/app/about/_components/OrganizationList.tsx
 rename src/app/about/_components/{TeamUpdateList.tsx => PersonCard.tsx} (94%)
 delete mode 100644 src/app/about/_components/TeamUpdate.tsx

diff --git a/src/app/about/_components/OrganizationList.tsx b/src/app/about/_components/OrganizationList.tsx
new file mode 100644
index 0000000..5689734
--- /dev/null
+++ b/src/app/about/_components/OrganizationList.tsx
@@ -0,0 +1,60 @@
+"use client"
+import PersonCard from "@/app/about/_components/PersonCard"
+import { Organization } from "@/components/shared/hooks/api/useOrganization"
+import { Button } from "@/components/ui/button"
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+import { useState } from "react"
+
+const OrganizationList = ({ group }: { group: Organization }) => {
+	const [showOTs, setShowOTs] = useState(false)
+
+	const handleButtonClick = () => {
+		setShowOTs(prevState => !prevState)
+	}
+
+	const projectGroup = group.people.filter(
+		person =>
+			person.role.toLowerCase().includes("project group") ||
+			person.role.toLowerCase().includes("project manager")
+	)
+	const operationTeam = group.people.filter(person =>
+		person.role.toLowerCase().includes("operation team")
+	)
+
+	return (
+		<div key={group.name} className="mt-16">
+			<h2 className="font-bebas-neue text-3xl">{group.name}</h2>
+			<div className="mt-5 flex flex-wrap items-start justify-center gap-6 md:justify-start">
+				{projectGroup.map(person => (
+					<PersonCard key={person.id} person={person} />
+				))}
+				{showOTs &&
+					operationTeam.map(person => (
+						<PersonCard key={person.id} person={person} />
+					))}
+				<div className="my-20 flex justify-center">
+					{group.name === "Project Manager" ? null : (
+						<Button
+							variant={"secondary"}
+							className="dark:bg-liqorice-700"
+							onClick={handleButtonClick}>
+							{showOTs ? (
+								<>
+									<ArrowLeftIcon className="mr-4 h-4 w-4" />
+									See Less Members
+								</>
+							) : (
+								<>
+									See More Members
+									<ArrowRightIcon className="ml-4 h-4 w-4" />
+								</>
+							)}
+						</Button>
+					)}
+				</div>
+			</div>
+		</div>
+	)
+}
+
+export default OrganizationList
diff --git a/src/app/about/_components/TeamUpdateList.tsx b/src/app/about/_components/PersonCard.tsx
similarity index 94%
rename from src/app/about/_components/TeamUpdateList.tsx
rename to src/app/about/_components/PersonCard.tsx
index b26219b..7ff2e4e 100644
--- a/src/app/about/_components/TeamUpdateList.tsx
+++ b/src/app/about/_components/PersonCard.tsx
@@ -4,10 +4,9 @@ import { LinkedinIcon, MailIcon } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
 
-const TeamUpdateList = (person: Person) => {
+const PersonCard = ({ person }: { person: Person }) => {
 	return (
 		<>
-			{" "}
 			<div key={person.id} className="w-52">
 				{person.picture == null || person.picture.includes("no-image") ? (
 					<div className="flex aspect-square w-52 flex-1 items-center justify-center">
@@ -51,4 +50,4 @@ const TeamUpdateList = (person: Person) => {
 		</>
 	)
 }
-export default TeamUpdateList
+export default PersonCard
diff --git a/src/app/about/_components/TeamUpdate.tsx b/src/app/about/_components/TeamUpdate.tsx
deleted file mode 100644
index 86f9681..0000000
--- a/src/app/about/_components/TeamUpdate.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-"use client"
-import TeamUpdateList from "@/app/about/_components/TeamUpdateList"
-import { Organization } from "@/components/shared/hooks/api/useOrganization"
-import { Button } from "@/components/ui/button"
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
-import { useState } from "react"
-
-const TeamUpdate = (organization: Organization) => {
-	const [updateTeam, setUpdateTeam] = useState(false)
-
-	const handleButtonClick = () => {
-		setUpdateTeam(prevState => !prevState)
-	}
-
-	const projectGroup = organization.people.filter(
-		person =>
-			person.role.includes("Project Group") ||
-			person.role.includes("Project Manager")
-	)
-	const operationTeam = organization.people.filter(person =>
-		person.role.includes("Operation Team")
-	)
-
-	return (
-		<div key={organization.name} className="mt-16">
-			<h2 className="font-bebas-neue text-3xl">{organization.name}</h2>
-			<div className="mt-5 flex flex-wrap items-start justify-center gap-6 md:justify-start">
-				{projectGroup.map(person => (
-					<>
-						<TeamUpdateList
-							id={person.id}
-							name={person.name}
-							email={person.email}
-							picture={person.picture}
-							linkedin_url={person.linkedin_url}
-							programme={person.programme}
-							role={person.role}
-						/>
-					</>
-				))}
-				{updateTeam
-					? operationTeam.map(person => (
-							<TeamUpdateList
-								key={person.id}
-								id={person.id}
-								name={person.name}
-								email={person.email}
-								picture={person.picture}
-								linkedin_url={person.linkedin_url}
-								programme={person.programme}
-								role={person.role}
-							/>
-						))
-					: null}
-				<div className="my-20 flex justify-center">
-					{organization.name === "Project Manager" ? null : (
-						<Button
-							variant={"secondary"}
-							className="dark:bg-liqorice-700"
-							onClick={handleButtonClick}>
-							{updateTeam ? (
-								<>
-									<ArrowLeftIcon className="mr-4 h-4 w-4" />
-									See Less Members
-								</>
-							) : (
-								<>
-									See More Members
-									<ArrowRightIcon className="ml-4 h-4 w-4" />
-								</>
-							)}
-						</Button>
-					)}
-				</div>
-			</div>
-		</div>
-	)
-}
-
-export default TeamUpdate
diff --git a/src/app/about/team/page.tsx b/src/app/about/team/page.tsx
index 9029913..c634168 100644
--- a/src/app/about/team/page.tsx
+++ b/src/app/about/team/page.tsx
@@ -1,4 +1,4 @@
-import TeamUpdate from "@/app/about/_components/TeamUpdate"
+import OrganizationList from "@/app/about/_components/OrganizationList"
 import { Page } from "@/components/shared/Page"
 import { fetchOrganization } from "@/components/shared/hooks/api/useOrganization"
 import { Metadata } from "next"
@@ -21,9 +21,7 @@ export default async function TeamPage() {
 				<Page.Header>Meet the team</Page.Header>
 				<div className="">
 					{organization.map(group => (
-						<>
-							<TeamUpdate name={group.name} people={group.people} />
-						</>
+						<OrganizationList key={group.name} group={group} />
 					))}
 				</div>
 			</Page.Boundary>