feat: use SSR On Pages

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}

src/app/components/Room/List.tsx

@@ -1,11 +1,11 @@
-"use client";
+'use client';
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
-import { RoomCard } from "./Card";
+import { RoomCard } from './Card';
-import { Room } from "./Room";
+import { Room } from './Room';
-import { SkeletonRoomCard } from "./SkeletonRoomCard";
+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;
@@ -40,22 +40,21 @@ 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?.length > 0 ? (
+				rooms.map(room => (
-					rooms.map((room) => (
+					<li key={room.id}>
-						<li key={room.id} className="p-2">
 						<RoomCard
 							id={room.id}
 							name={room.name}
@@ -67,14 +66,13 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
 				))
 			) : (
 				<>
-						{Array.from({ length: 5 }).map((_, i) => (
+					{Array.from({ length: 3 }).map((_, i) => (
-							<li key={i} className="p-2">
+						<li key={i}>
 							<SkeletonRoomCard />
 						</li>
 					))}
 				</>
 			)}
 		</ul>
-		</div>
 	);
 };

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

src/app/page.tsx

@@ -1,72 +1,20 @@
-"use client";
+import { Metadata } from 'next';
-import { Card, Divider, Skeleton } from "@nextui-org/react";
+import { Header } from './components/Header';
-import moment from "moment";
+import { RoomTable } from './components/Room/Table';
-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";
 
-const HomePage = () => {
+export const metadata: Metadata = {
-	const [roomsLoading, setRoomsLoading] = useState(true);
+	title: 'Toogether | Home',
-	const [rooms, setRooms] = useState<{
+	description:
-		future: Room[];
+		'Toogether is a platform that allows you to create and join rooms to study together.'
-		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 default function HomePage () {
 	return (
 		<>
 			<Header />
-			<main className="flex flex-col gap-8 p-4">
+			<main className='flex flex-col gap-8 p-4'>
-				<section className="flex flex-col gap-2">
+				<RoomTable />
-					<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>
 		</>
 	);
-};
+}
-
-export default HomePage;