feat: use SSR On Pages
This commit is contained in:
parent
b81a058a1c
commit
e6f84ad95e
@ -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}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
62
src/app/components/Room/Table.tsx
Normal file
62
src/app/components/Room/Table.tsx
Normal file
@ -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>
|
||||
);
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user