Toogether/Webapp
2
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

ref: format

Browse Source
This commit is contained in:
Rémi 2025-01-04 16:11:22 +01:00
parent f54a8ccc0a
commit b81a058a1c
18 changed files with 484 additions and 474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.prettierrc
View File

@ -1,5 +1,5 @@
{ {
"tabWidth": 4, "tabWidth": 4,
"useTabs": true, "useTabs": true,
"semi": true "semi": true
} }

8
docker-compose.yml
View File

@ -1,5 +1,5 @@
services: services:
webapp: webapp:
image: toogether/webapp image: toogether/webapp
ports: ports:
- "80:3000" - "80:3000"

104
src/app/components/Header/index.tsx
View File

@ -1,4 +1,4 @@
'use client' "use client";
import { import {
Avatar, Avatar,
Button, Button,
@ -9,79 +9,85 @@ import {
Navbar, Navbar,
NavbarBrand, NavbarBrand,
NavbarContent, NavbarContent,
NavbarItem NavbarItem,
} from '@nextui-org/react' } from "@nextui-org/react";
import { useSession } from 'next-auth/react' import { useSession } from "next-auth/react";
import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher' import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
import { axiosInstance } from '@/app/lib/axios' import { axiosInstance } from "@/app/lib/axios";
import { useEffect, useState } from 'react' import { useEffect, useState } from "react";
import { useRouter } from 'next/navigation' import { useRouter } from "next/navigation";
const getInitials = (name: string) => { const getInitials = (name: string) => {
if (!name) return '' if (!name) return "";
const nameParts = name.split(' ') const nameParts = name.split(" ");
if (nameParts.length === 1) { if (nameParts.length === 1) {
return name return name;
} }
const firstInitial = nameParts[0]?.[0] || '' const firstInitial = nameParts[0]?.[0] || "";
const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || '' const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || "";
return firstInitial + secondInitial return firstInitial + secondInitial;
} };
export const Header = () => { export const Header = () => {
const { data: session } = useSession() const { data: session } = useSession();
const router = useRouter() const router = useRouter();
const [userProfile, setUserProfile] = useState<{ const [userProfile, setUserProfile] = useState<{
id: string id: string;
username: string username: string;
role: 'ADMIN' | 'STUDENT' role: "ADMIN" | "STUDENT";
}>() }>();
const initials = session?.user?.name ? getInitials(session.user.name) : '' const initials = session?.user?.name ? getInitials(session.user.name) : "";
const fetchUserProfile = async () => { const fetchUserProfile = async () => {
return await axiosInstance<{ return await axiosInstance<{
id: string id: string;
username: string username: string;
role: 'ADMIN' | 'STUDENT' role: "ADMIN" | "STUDENT";
}>('/@me') }>("/@me");
} };
useEffect(() => { useEffect(() => {
fetchUserProfile().then(r => { fetchUserProfile().then((r) => {
setUserProfile(r.data) setUserProfile(r.data);
}) });
}, []) }, []);
return ( return (
<Navbar className='mb-2'> <Navbar className="mb-2">
<NavbarBrand> <NavbarBrand>
<p className='font-bold text-inherit'>Toogether</p> <p className="font-bold text-inherit">Toogether</p>
</NavbarBrand> </NavbarBrand>
<NavbarContent as='div' justify='end'> <NavbarContent as="div" justify="end">
<Dropdown placement='bottom-end'> <Dropdown placement="bottom-end">
<DropdownTrigger> <DropdownTrigger>
<Avatar <Avatar
isBordered isBordered
as='button' as="button"
className='transition-transform' className="transition-transform"
color='secondary' color="secondary"
name={initials} name={initials}
size='sm' size="sm"
/> />
</DropdownTrigger> </DropdownTrigger>
<DropdownMenu aria-label='Profile Actions' variant='flat'> <DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key='profile' className='h-14 gap-2'> <DropdownItem key="profile" className="h-14 gap-2">
<p>Signed in as</p> <p>Signed in as</p>
<p className='font-semibold'>{session?.user?.name}</p> <p className="font-semibold">
{session?.user?.name}
</p>
</DropdownItem> </DropdownItem>
<DropdownItem key='settings'>Settings</DropdownItem> <DropdownItem key="settings">Settings</DropdownItem>
<DropdownItem key='logout' color='danger' href='/auth/logout'> <DropdownItem
key="logout"
color="danger"
href="/auth/logout"
>
Logout Logout
</DropdownItem> </DropdownItem>
</DropdownMenu> </DropdownMenu>
@ -89,12 +95,14 @@ export const Header = () => {
<NavbarItem> <NavbarItem>
<ThemeSwitcher /> <ThemeSwitcher />
</NavbarItem> </NavbarItem>
{userProfile?.role === 'ADMIN' ? ( {userProfile?.role === "ADMIN" ? (
<NavbarItem> <NavbarItem>
<Button onPress={() => router.push('/admin')}>🔧</Button> <Button onPress={() => router.push("/admin")}>
🔧
</Button>
</NavbarItem> </NavbarItem>
) : null} ) : null}
</NavbarContent> </NavbarContent>
</Navbar> </Navbar>
) );
} };

54
src/app/components/Room/Card.tsx
View File

@ -1,6 +1,6 @@
'use client'; "use client";
import { parseDate, Time } from '@internationalized/date'; import { parseDate, Time } from "@internationalized/date";
import { import {
Button, Button,
@ -9,55 +9,55 @@ import {
CardHeader, CardHeader,
DateInput, DateInput,
Divider, Divider,
TimeInput TimeInput,
} from '@nextui-org/react'; } from "@nextui-org/react";
import { Room } from './Room'; import { Room } from "./Room";
import moment from 'moment'; import moment from "moment";
import { useRouter } from 'next/navigation'; import { useRouter } from "next/navigation";
export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => { export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => {
const router = useRouter(); const router = useRouter();
return ( return (
<Card className='w-[300px]'> <Card className="w-[300px]">
<CardHeader> <CardHeader>
<div className='flex flex-col'> <div className="flex flex-col">
<p className='text-md'>{name}</p> <p className="text-md">{name}</p>
<p className='text-small text-default-500'> <p className="text-small text-default-500">
{Presentator.username} {Presentator.username}
</p> </p>
</div> </div>
</CardHeader> </CardHeader>
<Divider /> <Divider />
<CardBody> <CardBody>
{Times.map(time => ( {Times.map((time) => (
<div className='flex flex-col gap-2' key={`${time.id}`}> <div className="flex flex-col gap-2" key={`${time.id}`}>
<DateInput <DateInput
isReadOnly isReadOnly
label='Date' label="Date"
value={parseDate(moment(date).format('YYYY-MM-DD'))} value={parseDate(moment(date).format("YYYY-MM-DD"))}
/> />
<div className='flex items-center gap-2'> <div className="flex items-center gap-2">
<TimeInput <TimeInput
isReadOnly isReadOnly
label='Start' label="Start"
hourCycle={24} hourCycle={24}
value={ value={
new Time( new Time(
moment(time.startTime).hours(), moment(time.startTime).hours(),
moment(time.startTime).minutes() moment(time.startTime).minutes(),
) )
} }
/> />
<span>-</span> <span>-</span>
<TimeInput <TimeInput
isReadOnly isReadOnly
label='End' label="End"
hourCycle={24} hourCycle={24}
value={ value={
new Time( new Time(
moment(time.endTime).hours(), moment(time.endTime).hours(),
moment(time.endTime).minutes() moment(time.endTime).minutes(),
) )
} }
/> />
@ -66,15 +66,13 @@ export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => {
))} ))}
</CardBody> </CardBody>
{moment(date).dayOfYear() === moment().dayOfYear() && ( {moment(date).dayOfYear() === moment().dayOfYear() && (
<div className='flex p-2'> <div className="flex p-2">
<Button <Button
className={ className={""}
'' color="primary"
} radius="full"
color='primary' size="sm"
radius='full' variant={"flat"}
size='sm'
variant={'flat'}
onPress={() => { onPress={() => {
router.push(`/room/${id}`); router.push(`/room/${id}`);
}} }}

26
src/app/components/Room/List.tsx
View File

@ -1,8 +1,8 @@
'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[] }) => { export const RoomList = ({ rooms }: { rooms: Room[] }) => {
const scrollContainerRef = useRef<HTMLDivElement>(null); const scrollContainerRef = useRef<HTMLDivElement>(null);
@ -18,7 +18,7 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
const isEnd = goLeft const isEnd = goLeft
? scrollContainer.scrollLeft === 0 ? scrollContainer.scrollLeft === 0
: scrollContainer.scrollLeft + scrollContainer.clientWidth >= : scrollContainer.scrollLeft + scrollContainer.clientWidth >=
scrollContainer.scrollWidth; scrollContainer.scrollWidth;
if (isEnd) return; if (isEnd) return;
event.preventDefault(); event.preventDefault();
@ -40,22 +40,22 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
const scrollContainer = scrollContainerRef.current; const scrollContainer = scrollContainerRef.current;
if (!scrollContainer) return; if (!scrollContainer) return;
scrollContainer.addEventListener('wheel', handleWheel); scrollContainer.addEventListener("wheel", handleWheel);
return () => { return () => {
scrollContainer.removeEventListener('wheel', handleWheel); scrollContainer.removeEventListener("wheel", handleWheel);
}; };
}, []); }, []);
return ( return (
<div <div
ref={scrollContainerRef} ref={scrollContainerRef}
className='overflow-x-auto scrollbar-hide rounded-xl bg-default-100' className="overflow-x-auto scrollbar-hide rounded-xl bg-default-100"
> >
<ul className='flex'> <ul className="flex">
{rooms?.length > 0 ? ( {rooms?.length > 0 ? (
rooms.map(room => ( rooms.map((room) => (
<li key={room.id} className='p-2'> <li key={room.id} className="p-2">
<RoomCard <RoomCard
id={room.id} id={room.id}
name={room.name} name={room.name}
@ -68,7 +68,7 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
) : ( ) : (
<> <>
{Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 5 }).map((_, i) => (
<li key={i} className='p-2'> <li key={i} className="p-2">
<SkeletonRoomCard /> <SkeletonRoomCard />
</li> </li>
))} ))}

2
src/app/components/Room/Room.d.ts vendored
View File

@ -13,5 +13,5 @@ export interface Room {
username: string; username: string;
role: string; role: string;
createdAt: string; createdAt: string;
} };
} }

36
src/app/components/Room/SkeletonRoomCard.tsx
View File

@ -1,30 +1,30 @@
"use client" "use client";
import { Card, Skeleton, Divider } from "@nextui-org/react" import { Card, Skeleton, Divider } from "@nextui-org/react";
export const SkeletonRoomCard = () => { export const SkeletonRoomCard = () => {
return ( return (
<Card className='w-[200px] space-y-5 p-4' radius='lg'> <Card className="w-[200px] space-y-5 p-4" radius="lg">
<div className='flex flex-col gap-2'> <div className="flex flex-col gap-2">
<Skeleton className='w-4/5 rounded-lg'> <Skeleton className="w-4/5 rounded-lg">
<div className='h-3 w-4/5 rounded-lg bg-default-200' /> <div className="h-3 w-4/5 rounded-lg bg-default-200" />
</Skeleton> </Skeleton>
<Skeleton className='w-2/5 rounded-lg'> <Skeleton className="w-2/5 rounded-lg">
<div className='h-3 w-2/5 rounded-lg bg-default-300' /> <div className="h-3 w-2/5 rounded-lg bg-default-300" />
</Skeleton> </Skeleton>
</div> </div>
<Divider /> <Divider />
<Skeleton className='rounded-lg'> <Skeleton className="rounded-lg">
<div className='h-12 rounded-lg bg-default-300' /> <div className="h-12 rounded-lg bg-default-300" />
</Skeleton> </Skeleton>
<div className='flex items-center gap-2'> <div className="flex items-center gap-2">
<Skeleton className='rounded-lg w-1/2'> <Skeleton className="rounded-lg w-1/2">
<div className='h-10 rounded-lg bg-default-300' /> <div className="h-10 rounded-lg bg-default-300" />
</Skeleton> </Skeleton>
<span>-</span> <span>-</span>
<Skeleton className='rounded-lg w-1/2'> <Skeleton className="rounded-lg w-1/2">
<div className='h-10 rounded-lg bg-default-300' /> <div className="h-10 rounded-lg bg-default-300" />
</Skeleton> </Skeleton>
</div> </div>
</Card> </Card>
) );
} };

26
src/app/components/ThemeSwitcher/ThemeSwitcher.tsx
View File

@ -1,21 +1,21 @@
'use client' "use client";
import { Button } from '@nextui-org/react' import { Button } from "@nextui-org/react";
import { useTheme } from 'next-themes' import { useTheme } from "next-themes";
import { useEffect, useState } from 'react' import { useEffect, useState } from "react";
export const ThemeSwitcher = () => { export const ThemeSwitcher = () => {
const [mounted, setMounted] = useState(false) const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme();
useEffect(() => { useEffect(() => {
setMounted(true) setMounted(true);
}, []) }, []);
if (!mounted) return null if (!mounted) return null;
return ( return (
<Button onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}> <Button onPress={() => setTheme(theme === "light" ? "dark" : "light")}>
{theme === 'light' ? '🌑' : '☀️'} {theme === "light" ? "🌑" : "☀️"}
</Button> </Button>
) );
} };

4
src/app/lib/stringUtils.ts
View File

@ -1,3 +1,3 @@
export const UppercaseFirstLetter = (str: string) => { export const UppercaseFirstLetter = (str: string) => {
return str.slice(0, 1).toLocaleUpperCase() + str.slice(1); return str.slice(0, 1).toLocaleUpperCase() + str.slice(1);
} };

60
src/app/page.tsx
View File

@ -1,11 +1,11 @@
'use client'; "use client";
import { Card, Divider, Skeleton } from '@nextui-org/react'; import { Card, Divider, Skeleton } from "@nextui-org/react";
import moment from 'moment'; import moment from "moment";
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { Room } from './components/Room/Room'; import { Room } from "./components/Room/Room";
import { RoomList } from './components/Room/List'; import { RoomList } from "./components/Room/List";
import { Header } from './components/Header'; import { Header } from "./components/Header";
import { axiosInstance } from './lib/axios'; import { axiosInstance } from "./lib/axios";
const HomePage = () => { const HomePage = () => {
const [roomsLoading, setRoomsLoading] = useState(true); const [roomsLoading, setRoomsLoading] = useState(true);
@ -16,30 +16,30 @@ const HomePage = () => {
}>({ }>({
future: [], future: [],
actual: [], actual: [],
past: [] past: [],
}); });
useEffect(() => { useEffect(() => {
axiosInstance axiosInstance
.get<{ id: string; name: string; createdAt: string }[]>( .get<
'/@me/class' { id: string; name: string; createdAt: string }[]
) >("/@me/class")
.then(classResponse => { .then((classResponse) => {
if (classResponse.data.length) if (classResponse.data.length)
axiosInstance axiosInstance
.get<Room[]>( .get<
`/@me/class/${classResponse.data[0].id}/rooms` Room[]
) >(`/@me/class/${classResponse.data[0].id}/rooms`)
.then(classes => { .then((classes) => {
// Filter rooms by date, get future, actual and past rooms // Filter rooms by date, get future, actual and past rooms
const future = classes.data.filter(room => const future = classes.data.filter((room) =>
moment(room.date).isAfter(moment(), 'day') moment(room.date).isAfter(moment(), "day"),
); );
const actual = classes.data.filter(room => const actual = classes.data.filter((room) =>
moment(room.date).isSame(moment(), 'day') moment(room.date).isSame(moment(), "day"),
); );
const past = classes.data.filter(room => const past = classes.data.filter((room) =>
moment(room.date).isBefore(moment()) moment(room.date).isBefore(moment()),
); );
setRooms({ future, actual, past }); setRooms({ future, actual, past });
@ -51,17 +51,17 @@ const HomePage = () => {
return ( return (
<> <>
<Header /> <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'> <section className="flex flex-col gap-2">
<h2 className='font-semibold text-lg'>Upcoming</h2> <h2 className="font-semibold text-lg">Upcoming</h2>
<RoomList rooms={rooms.future} /> <RoomList rooms={rooms.future} />
</section> </section>
<section className='flex flex-col gap-2'> <section className="flex flex-col gap-2">
<h2 className='font-semibold text-lg'>Current</h2> <h2 className="font-semibold text-lg">Current</h2>
<RoomList rooms={rooms.actual} /> <RoomList rooms={rooms.actual} />
</section> </section>
<section className='flex flex-col gap-2'> <section className="flex flex-col gap-2">
<h2 className='font-semibold text-lg'>Past</h2> <h2 className="font-semibold text-lg">Past</h2>
<RoomList rooms={rooms.past} /> <RoomList rooms={rooms.past} />
</section> </section>
</main> </main>

14
src/authOptions.ts
View File

@ -41,7 +41,9 @@ export const authOptions: AuthOptions = {
async jwt({ token, account, user }) { async jwt({ token, account, user }) {
if (account && user) { if (account && user) {
token.accessToken = account.access_token; token.accessToken = account.access_token;
token.accessTokenExpires = moment(account.expires_at * 1000).subtract(5, "s"); token.accessTokenExpires = moment(
account.expires_at * 1000,
).subtract(5, "s");
token.refreshToken = account.refresh_token; token.refreshToken = account.refresh_token;
token.user = user; token.user = user;
return token; return token;
@ -67,7 +69,7 @@ export const authOptions: AuthOptions = {
pages: { pages: {
signIn: "/auth/login", signIn: "/auth/login",
signOut: "/auth/logout", signOut: "/auth/logout",
} },
}; };
const refreshAccessToken = async (token: JWT): Promise<JWT> => { const refreshAccessToken = async (token: JWT): Promise<JWT> => {
@ -88,19 +90,21 @@ const refreshAccessToken = async (token: JWT): Promise<JWT> => {
headers: { headers: {
"Content-Type": "application/x-www-form-urlencoded", "Content-Type": "application/x-www-form-urlencoded",
}, },
} },
); );
if (response.status != 200) { if (response.status != 200) {
throw new Error( throw new Error(
response.data.error_description || "Failed to refresh access token" response.data.error_description || "Failed to refresh access token",
); );
} }
return { return {
...token, ...token,
accessToken: response.data.access_token, accessToken: response.data.access_token,
accessTokenExpires: moment().add(response.data.expires_in, "seconds").subtract(5, "s"), accessTokenExpires: moment()
.add(response.data.expires_in, "seconds")
.subtract(5, "s"),
refreshToken: response.data.refresh_token, refreshToken: response.data.refresh_token,
}; };
}; };