feat: refactor user and room interfaces, update imports, and enhance user list component

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",

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>
+	);
 }

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";
 

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 }) => {

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>
+	);
+};

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`,
+		},
+	},
 };

src/app/interface/class.ts

@@ -1,4 +1,4 @@
-interface Class {
+export interface Class {
 	id: string;
 	name: string;
 	createdAt: string;

src/app/interface/user.ts

@@ -0,0 +1,4 @@
+export interface User {
+	id: string;
+	username: string;
+}

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));
 

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 };

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";