From e6f84ad95eda1fba8758c13c82eb2d27ae45bf60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9mi?= <PSNazert@gmail.com>
Date: Sat, 4 Jan 2025 16:36:57 +0100
Subject: [PATCH] feat: use SSR On Pages

---
 src/app/components/Room/Card.tsx  |  2 +-
 src/app/components/Room/List.tsx  | 66 +++++++++++++--------------
 src/app/components/Room/Table.tsx | 62 +++++++++++++++++++++++++
 src/app/page.tsx                  | 76 +++++--------------------------
 4 files changed, 107 insertions(+), 99 deletions(-)
 create mode 100644 src/app/components/Room/Table.tsx

diff --git a/src/app/components/Room/Card.tsx b/src/app/components/Room/Card.tsx
index 35cdc24..5318902 100644
--- a/src/app/components/Room/Card.tsx
+++ b/src/app/components/Room/Card.tsx
@@ -21,7 +21,7 @@ export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => {
 	return (
 		<Card className="w-[300px]">
 			<CardHeader>
-				<div className="flex flex-col">
+				<div className="flex flex-col min-h-20">
 					<p className="text-md">{name}</p>
 					<p className="text-small text-default-500">
 						{Presentator.username}
diff --git a/src/app/components/Room/List.tsx b/src/app/components/Room/List.tsx
index e31de3a..c5a4156 100644
--- a/src/app/components/Room/List.tsx
+++ b/src/app/components/Room/List.tsx
@@ -1,11 +1,11 @@
-"use client";
-import { useEffect, useRef } from "react";
-import { RoomCard } from "./Card";
-import { Room } from "./Room";
-import { SkeletonRoomCard } from "./SkeletonRoomCard";
+'use client';
+import { useEffect, useRef } from 'react';
+import { RoomCard } from './Card';
+import { Room } from './Room';
+import { SkeletonRoomCard } from './SkeletonRoomCard';
 
 export const RoomList = ({ rooms }: { rooms: Room[] }) => {
-	const scrollContainerRef = useRef<HTMLDivElement>(null);
+	const scrollContainerRef = useRef<HTMLUListElement>(null);
 
 	const handleWheel = (event: WheelEvent) => {
 		if (event.deltaY === 0) return;
@@ -18,7 +18,7 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
 		const isEnd = goLeft
 			? scrollContainer.scrollLeft === 0
 			: scrollContainer.scrollLeft + scrollContainer.clientWidth >=
-				scrollContainer.scrollWidth;
+			  scrollContainer.scrollWidth;
 		if (isEnd) return;
 
 		event.preventDefault();
@@ -40,41 +40,39 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
 		const scrollContainer = scrollContainerRef.current;
 		if (!scrollContainer) return;
 
-		scrollContainer.addEventListener("wheel", handleWheel);
+		scrollContainer.addEventListener('wheel', handleWheel);
 
 		return () => {
-			scrollContainer.removeEventListener("wheel", handleWheel);
+			scrollContainer.removeEventListener('wheel', handleWheel);
 		};
 	}, []);
 
 	return (
-		<div
+		<ul
 			ref={scrollContainerRef}
-			className="overflow-x-auto scrollbar-hide rounded-xl bg-default-100"
+			className='flex gap-2 overflow-x-auto scrollbar-hide rounded-xl bg-default-100 p-1'
 		>
-			<ul className="flex">
-				{rooms?.length > 0 ? (
-					rooms.map((room) => (
-						<li key={room.id} className="p-2">
-							<RoomCard
-								id={room.id}
-								name={room.name}
-								date={room.date}
-								Presentator={room.Presentator}
-								Times={room.Times}
-							/>
+			{rooms.length > 0 ? (
+				rooms.map(room => (
+					<li key={room.id}>
+						<RoomCard
+							id={room.id}
+							name={room.name}
+							date={room.date}
+							Presentator={room.Presentator}
+							Times={room.Times}
+						/>
+					</li>
+				))
+			) : (
+				<>
+					{Array.from({ length: 3 }).map((_, i) => (
+						<li key={i}>
+							<SkeletonRoomCard />
 						</li>
-					))
-				) : (
-					<>
-						{Array.from({ length: 5 }).map((_, i) => (
-							<li key={i} className="p-2">
-								<SkeletonRoomCard />
-							</li>
-						))}
-					</>
-				)}
-			</ul>
-		</div>
+					))}
+				</>
+			)}
+		</ul>
 	);
 };
diff --git a/src/app/components/Room/Table.tsx b/src/app/components/Room/Table.tsx
new file mode 100644
index 0000000..3b38349
--- /dev/null
+++ b/src/app/components/Room/Table.tsx
@@ -0,0 +1,62 @@
+'use client';
+import { axiosInstance } from '@/app/lib/axios';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { RoomList } from './List';
+import { Room } from './Room';
+
+export const RoomTable = () => {
+	const [rooms, setRooms] = useState<{
+		future: Room[];
+		actual: Room[];
+		past: Room[];
+	}>({
+		future: [],
+		actual: [],
+		past: []
+	});
+
+	useEffect(() => {
+		axiosInstance
+			.get<{ id: string; name: string; createdAt: string }[]>(
+				'/@me/class'
+			)
+			.then(classResponse => {
+				if (classResponse.data.length)
+					axiosInstance
+						.get<Room[]>(
+							`/@me/class/${classResponse.data[0].id}/rooms`
+						)
+						.then(classes => {
+							// Filter rooms by date, get future, actual and past rooms
+							const future = classes.data.filter(room =>
+								moment(room.date).isAfter(moment(), 'day')
+							);
+							const actual = classes.data.filter(room =>
+								moment(room.date).isSame(moment(), 'day')
+							);
+							const past = classes.data.filter(room =>
+								moment(room.date).isBefore(moment())
+							);
+							setRooms({ future, actual, past });
+						});
+			});
+	}, []);
+
+	return (
+		<div className='flex flex-col gap-4'>
+			<section className='flex flex-col gap-2'>
+				<h2 className='font-semibold text-lg'>Upcoming</h2>
+				<RoomList rooms={rooms.future} />
+			</section>
+			<section className='flex flex-col gap-2'>
+				<h2 className='font-semibold text-lg'>Today</h2>
+				<RoomList rooms={rooms.actual} />
+			</section>
+			<section className='flex flex-col gap-2'>
+				<h2 className='font-semibold text-lg'>Past</h2>
+				<RoomList rooms={rooms.past} />
+			</section>
+		</div>
+	);
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b74e5b3..bd6ceeb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,72 +1,20 @@
-"use client";
-import { Card, Divider, Skeleton } from "@nextui-org/react";
-import moment from "moment";
-import { useEffect, useState } from "react";
-import { Room } from "./components/Room/Room";
-import { RoomList } from "./components/Room/List";
-import { Header } from "./components/Header";
-import { axiosInstance } from "./lib/axios";
+import { Metadata } from 'next';
+import { Header } from './components/Header';
+import { RoomTable } from './components/Room/Table';
 
-const HomePage = () => {
-	const [roomsLoading, setRoomsLoading] = useState(true);
-	const [rooms, setRooms] = useState<{
-		future: Room[];
-		actual: Room[];
-		past: Room[];
-	}>({
-		future: [],
-		actual: [],
-		past: [],
-	});
-
-	useEffect(() => {
-		axiosInstance
-			.get<
-				{ id: string; name: string; createdAt: string }[]
-			>("/@me/class")
-			.then((classResponse) => {
-				if (classResponse.data.length)
-					axiosInstance
-						.get<
-							Room[]
-						>(`/@me/class/${classResponse.data[0].id}/rooms`)
-						.then((classes) => {
-							// Filter rooms by date, get future, actual and past rooms
-							const future = classes.data.filter((room) =>
-								moment(room.date).isAfter(moment(), "day"),
-							);
-							const actual = classes.data.filter((room) =>
-								moment(room.date).isSame(moment(), "day"),
-							);
-							const past = classes.data.filter((room) =>
-								moment(room.date).isBefore(moment()),
-							);
-
-							setRooms({ future, actual, past });
-							setRoomsLoading(false);
-						});
-			});
-	}, []);
+export const metadata: Metadata = {
+	title: 'Toogether | Home',
+	description:
+		'Toogether is a platform that allows you to create and join rooms to study together.'
+};
 
+export default function HomePage () {
 	return (
 		<>
 			<Header />
-			<main className="flex flex-col gap-8 p-4">
-				<section className="flex flex-col gap-2">
-					<h2 className="font-semibold text-lg">Upcoming</h2>
-					<RoomList rooms={rooms.future} />
-				</section>
-				<section className="flex flex-col gap-2">
-					<h2 className="font-semibold text-lg">Current</h2>
-					<RoomList rooms={rooms.actual} />
-				</section>
-				<section className="flex flex-col gap-2">
-					<h2 className="font-semibold text-lg">Past</h2>
-					<RoomList rooms={rooms.past} />
-				</section>
+			<main className='flex flex-col gap-8 p-4'>
+				<RoomTable />
 			</main>
 		</>
 	);
-};
-
-export default HomePage;
+}