From 0cc0d1855836c3db0aa17093cbb3782eff140bdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi?= <PSNazert@gmail.com>
Date: Wed, 8 Jan 2025 00:20:56 +0100
Subject: [PATCH] feat: implement ClassList component to display classes;
 update UserList to show associated classes and handle empty states

---
 package.json                       |  2 +-
 src/app/admin/classes/page.tsx     |  3 +-
 src/app/components/Class/index.tsx | 71 ++++++++++++++++++++++++++++++
 src/app/components/Users/index.tsx | 32 +++++++++++---
 src/app/interface/user.ts          |  6 +++
 5 files changed, 106 insertions(+), 8 deletions(-)
 create mode 100644 src/app/components/Class/index.tsx

diff --git a/package.json b/package.json
index b4fb6a5..208878f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev --turbopack -p 4000",
+		"dev": "next dev -p 4000",
 		"build": "next build",
 		"build:docker": "docker build -t toogether/webapp .",
 		"start": "next start -p 4000",
diff --git a/src/app/admin/classes/page.tsx b/src/app/admin/classes/page.tsx
index 938e852..fc96c89 100644
--- a/src/app/admin/classes/page.tsx
+++ b/src/app/admin/classes/page.tsx
@@ -1,3 +1,4 @@
+import { ClassList } from "@/app/components/Class";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -5,5 +6,5 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Hello world!</p>;
+	return <ClassList />;
 }
diff --git a/src/app/components/Class/index.tsx b/src/app/components/Class/index.tsx
new file mode 100644
index 0000000..b3c6a67
--- /dev/null
+++ b/src/app/components/Class/index.tsx
@@ -0,0 +1,71 @@
+"use client";
+import { Class } from "@/app/interface/class";
+import { classesService } from "@/app/services/classes.service";
+import {
+	Card,
+	Skeleton,
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+} from "@nextui-org/react";
+import { useEffect, useState } from "react";
+
+export const ClassList = () => {
+	const [classes, setClasses] = useState<Class[]>();
+
+	useEffect(() => {
+		classesService.getAll().then((response) => {
+			setClasses(response.data);
+		});
+	}, []);
+
+	if (!classes) {
+		return (
+			<Card className="w-full space-y-5 p-4" radius="lg">
+				<Skeleton className="rounded-lg">
+					<div className="h-10 rounded-lg bg-default-300" />
+				</Skeleton>
+
+				<div className="space-y-3">
+					<Skeleton className="w-3/5 rounded-lg">
+						<div className="h-3 w-3/5 rounded-lg bg-default-200" />
+					</Skeleton>
+					<Skeleton className="w-4/5 rounded-lg">
+						<div className="h-3 w-4/5 rounded-lg bg-default-200" />
+					</Skeleton>
+					<Skeleton className="w-2/5 rounded-lg">
+						<div className="h-3 w-2/5 rounded-lg bg-default-300" />
+					</Skeleton>
+				</div>
+			</Card>
+		);
+	}
+
+	if (classes.length === 0) {
+		return (
+			<Card className="w-full p-4" radius="lg">
+				<p className="text-center text-lg text-gray-500 dark:text-gray-400">
+					No classes found
+				</p>
+			</Card>
+		);
+	}
+
+	return (
+		<Table aria-label="List of users" className="w-full">
+			<TableHeader>
+				<TableColumn>NAME</TableColumn>
+			</TableHeader>
+			<TableBody>
+				{classes.map((Class) => (
+					<TableRow key={Class.id.toString()}>
+						<TableCell>{Class.name}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+		</Table>
+	);
+};
diff --git a/src/app/components/Users/index.tsx b/src/app/components/Users/index.tsx
index 9afc5ca..ef6aeea 100644
--- a/src/app/components/Users/index.tsx
+++ b/src/app/components/Users/index.tsx
@@ -43,18 +43,38 @@ export const UserList = () => {
 		);
 	}
 
+	if (users.length === 0) {
+		return (
+			<Card className="w-full p-4" radius="lg">
+				<p className="text-center text-lg text-gray-500 dark:text-gray-400">
+					No users found
+				</p>
+			</Card>
+		);
+	}
+
 	return (
 		<Table aria-label="List of users" className="w-full">
 			<TableHeader>
 				<TableColumn>USERNAME</TableColumn>
+				<TableColumn>CLASS</TableColumn>
 			</TableHeader>
 			<TableBody>
-				{users &&
-					users.map((user) => (
-						<TableRow key={user.id.toString()}>
-							<TableCell>{user.username}</TableCell>
-						</TableRow>
-					))}
+				{users.map((user) => (
+					<TableRow key={user.id.toString()}>
+						<TableCell>{user.username}</TableCell>
+						<TableCell className="flex flex-wrap gap-1">
+							{user.Class.map((c) => (
+								<span
+									className="px-2 rounded-md bg-foreground-100"
+									key={c.id.toString()}
+								>
+									{c.name}
+								</span>
+							))}
+						</TableCell>
+					</TableRow>
+				))}
 			</TableBody>
 		</Table>
 	);
diff --git a/src/app/interface/user.ts b/src/app/interface/user.ts
index a102982..c3c1631 100644
--- a/src/app/interface/user.ts
+++ b/src/app/interface/user.ts
@@ -1,4 +1,10 @@
 export interface User {
 	id: string;
 	username: string;
+
+	Class: {
+		id: string;
+		name: string;
+		createdAt: string;
+	}[];
 }