From 5bfc969f6a7e75d67523d1de119fa87914925126 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi?= <PSNazert@gmail.com>
Date: Mon, 6 Jan 2025 23:48:52 +0100
Subject: [PATCH] feat: refactor user and room interfaces, update imports, and
 enhance user list component

---
 package.json                                  |  2 +-
 src/app/admin/users/page.tsx                  |  7 ++-
 src/app/components/Room/Card.tsx              |  2 +-
 src/app/components/Room/List.tsx              |  2 +-
 src/app/components/Users/index.tsx            | 61 +++++++++++++++++++
 src/app/constants/apiUrl.constant.ts          | 10 ++-
 .../{types/class.d.ts => interface/class.ts}  |  2 +-
 .../{types/room.d.ts => interface/room.ts}    |  0
 src/app/interface/user.ts                     |  4 ++
 src/app/services/rooms.service.ts             |  2 +-
 src/app/services/users.service.ts             |  7 +++
 src/app/stores/roomStore.ts                   |  2 +-
 12 files changed, 92 insertions(+), 9 deletions(-)
 create mode 100644 src/app/components/Users/index.tsx
 rename src/app/{types/class.d.ts => interface/class.ts} (66%)
 rename src/app/{types/room.d.ts => interface/room.ts} (100%)
 create mode 100644 src/app/interface/user.ts
 create mode 100644 src/app/services/users.service.ts

diff --git a/package.json b/package.json
index 26bc52e..d32c0d4 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/users/page.tsx b/src/app/admin/users/page.tsx
index 948603f..e0654e3 100644
--- a/src/app/admin/users/page.tsx
+++ b/src/app/admin/users/page.tsx
@@ -1,3 +1,4 @@
+import { UserList } from "@/app/components/Users";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -5,5 +6,9 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-	return <p>Users</p>;
+	return (
+		<div className="p-4">
+			<UserList />
+		</div>
+	);
 }
diff --git a/src/app/components/Room/Card.tsx b/src/app/components/Room/Card.tsx
index 2f67fab..c88c261 100644
--- a/src/app/components/Room/Card.tsx
+++ b/src/app/components/Room/Card.tsx
@@ -11,7 +11,7 @@ import {
 	Divider,
 	TimeInput,
 } from "@nextui-org/react";
-import { Room } from "../../types/room";
+import { Room } from "../../interface/room";
 import moment from "moment";
 import { useRouter } from "next/navigation";
 
diff --git a/src/app/components/Room/List.tsx b/src/app/components/Room/List.tsx
index ca819c4..eab6ab0 100644
--- a/src/app/components/Room/List.tsx
+++ b/src/app/components/Room/List.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { useEffect, useRef } from "react";
 import { RoomCard } from "./Card";
-import { Room } from "../../types/room";
+import { Room } from "../../interface/room";
 import { SkeletonRoomCard } from "./SkeletonRoomCard";
 
 export const RoomList = ({ rooms }: { rooms: Room[] | null }) => {
diff --git a/src/app/components/Users/index.tsx b/src/app/components/Users/index.tsx
new file mode 100644
index 0000000..8d25861
--- /dev/null
+++ b/src/app/components/Users/index.tsx
@@ -0,0 +1,61 @@
+"use client";
+import { User } from "@/app/interface/user";
+import { usersService } from "@/app/services/users.service";
+import {
+	Card,
+	Skeleton,
+	Table,
+	TableBody,
+	TableCell,
+	TableColumn,
+	TableHeader,
+	TableRow,
+} from "@nextui-org/react";
+import { useEffect, useState } from "react";
+
+export const UserList = () => {
+	const [users, setUsers] = useState<User[]>();
+
+	useEffect(() => {
+		usersService.getAll().then((response) => {
+			setUsers(response.data);
+		});
+	}, []);
+
+	if (!users) {
+		return (
+			<Card className="w-[300px] 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>
+		);
+	}
+
+	return (
+		<Table aria-label="List of users" className="w-[300px]">
+			<TableHeader>
+				<TableColumn>USERNAME</TableColumn>
+			</TableHeader>
+			<TableBody>
+				{users &&
+					users.map((user) => (
+						<TableRow key={user.id.toString()}>
+							<TableCell>{user.username}</TableCell>
+						</TableRow>
+					))}
+			</TableBody>
+		</Table>
+	);
+};
diff --git a/src/app/constants/apiUrl.constant.ts b/src/app/constants/apiUrl.constant.ts
index 1c711c7..9096ed5 100644
--- a/src/app/constants/apiUrl.constant.ts
+++ b/src/app/constants/apiUrl.constant.ts
@@ -5,6 +5,12 @@ export const API_URLS = {
 		all: `${NEXT_PUBLIC_API_URL}/@me/class`,
 	},
 	room: {
-		all: (classId: string) => `${NEXT_PUBLIC_API_URL}/@me/class/${classId}/rooms`,
-	}
+		all: (classId: string) =>
+			`${NEXT_PUBLIC_API_URL}/@me/class/${classId}/rooms`,
+	},
+	admin: {
+		user: {
+			all: `${NEXT_PUBLIC_API_URL}/user`,
+		},
+	},
 };
diff --git a/src/app/types/class.d.ts b/src/app/interface/class.ts
similarity index 66%
rename from src/app/types/class.d.ts
rename to src/app/interface/class.ts
index 2390d33..be592bc 100644
--- a/src/app/types/class.d.ts
+++ b/src/app/interface/class.ts
@@ -1,4 +1,4 @@
-interface Class {
+export interface Class {
 	id: string;
 	name: string;
 	createdAt: string;
diff --git a/src/app/types/room.d.ts b/src/app/interface/room.ts
similarity index 100%
rename from src/app/types/room.d.ts
rename to src/app/interface/room.ts
diff --git a/src/app/interface/user.ts b/src/app/interface/user.ts
new file mode 100644
index 0000000..a102982
--- /dev/null
+++ b/src/app/interface/user.ts
@@ -0,0 +1,4 @@
+export interface User {
+	id: string;
+	username: string;
+}
diff --git a/src/app/services/rooms.service.ts b/src/app/services/rooms.service.ts
index b3822fb..35b7361 100644
--- a/src/app/services/rooms.service.ts
+++ b/src/app/services/rooms.service.ts
@@ -1,6 +1,6 @@
 import { API_URLS } from "../constants/apiUrl.constant";
 import { axiosInstance } from "../lib/axios";
-import { Room } from "../types/room";
+import { Room } from "../interface/room";
 
 const getAll = (classId: string) => axiosInstance.get<Room[]>(API_URLS.room.all(classId));
 
diff --git a/src/app/services/users.service.ts b/src/app/services/users.service.ts
new file mode 100644
index 0000000..8de55dc
--- /dev/null
+++ b/src/app/services/users.service.ts
@@ -0,0 +1,7 @@
+import { API_URLS } from "../constants/apiUrl.constant";
+import { User } from "../interface/user";
+import { axiosInstance } from "../lib/axios";
+
+const getAll = () => axiosInstance.get<User[]>(API_URLS.admin.user.all);
+
+export const usersService = { getAll };
diff --git a/src/app/stores/roomStore.ts b/src/app/stores/roomStore.ts
index 5b7108a..d3f1f53 100644
--- a/src/app/stores/roomStore.ts
+++ b/src/app/stores/roomStore.ts
@@ -1,6 +1,6 @@
 import moment from "moment";
 import { create } from "zustand";
-import { Room } from "../types/room";
+import { Room } from "../interface/room";
 import { useUserStore } from "./userStore";
 import { roomsService } from "../services/rooms.service";