ref: format
This commit is contained in:
parent
f54a8ccc0a
commit
b81a058a1c
@ -1,5 +1,5 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": true,
|
||||
"semi": true
|
||||
"tabWidth": 4,
|
||||
"useTabs": true,
|
||||
"semi": true
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
services:
|
||||
webapp:
|
||||
image: toogether/webapp
|
||||
ports:
|
||||
- "80:3000"
|
||||
services:
|
||||
webapp:
|
||||
image: toogether/webapp
|
||||
ports:
|
||||
- "80:3000"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import NextAuth from "next-auth";
|
||||
import { authOptions } from "@/authOptions";
|
||||
|
||||
const handler = NextAuth(authOptions);
|
||||
export { handler as GET, handler as POST };
|
||||
import NextAuth from "next-auth";
|
||||
import { authOptions } from "@/authOptions";
|
||||
|
||||
const handler = NextAuth(authOptions);
|
||||
export { handler as GET, handler as POST };
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
|
||||
const LogoutPage = () => {
|
||||
const session = useSession();
|
||||
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
signOut();
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default LogoutPage;
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
|
||||
const LogoutPage = () => {
|
||||
const session = useSession();
|
||||
|
||||
useEffect(() => {
|
||||
if (session) {
|
||||
signOut();
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default LogoutPage;
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
"use client";
|
||||
|
||||
import { NextUIProvider } from "@nextui-org/react";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||
|
||||
export default function AppWrapper({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<SessionProvider>
|
||||
<NextUIProvider>
|
||||
<NextThemesProvider attribute="class" defaultTheme="dark">
|
||||
{children}
|
||||
</NextThemesProvider>
|
||||
</NextUIProvider>
|
||||
</SessionProvider>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import { NextUIProvider } from "@nextui-org/react";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { ThemeProvider as NextThemesProvider } from "next-themes";
|
||||
|
||||
export default function AppWrapper({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<SessionProvider>
|
||||
<NextUIProvider>
|
||||
<NextThemesProvider attribute="class" defaultTheme="dark">
|
||||
{children}
|
||||
</NextThemesProvider>
|
||||
</NextUIProvider>
|
||||
</SessionProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,100 +1,108 @@
|
||||
'use client'
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger,
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem
|
||||
} from '@nextui-org/react'
|
||||
import { useSession } from 'next-auth/react'
|
||||
import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher'
|
||||
import { axiosInstance } from '@/app/lib/axios'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
if (!name) return ''
|
||||
|
||||
const nameParts = name.split(' ')
|
||||
if (nameParts.length === 1) {
|
||||
return name
|
||||
}
|
||||
|
||||
const firstInitial = nameParts[0]?.[0] || ''
|
||||
const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || ''
|
||||
|
||||
return firstInitial + secondInitial
|
||||
}
|
||||
|
||||
export const Header = () => {
|
||||
const { data: session } = useSession()
|
||||
const router = useRouter()
|
||||
|
||||
const [userProfile, setUserProfile] = useState<{
|
||||
id: string
|
||||
username: string
|
||||
role: 'ADMIN' | 'STUDENT'
|
||||
}>()
|
||||
|
||||
const initials = session?.user?.name ? getInitials(session.user.name) : ''
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
return await axiosInstance<{
|
||||
id: string
|
||||
username: string
|
||||
role: 'ADMIN' | 'STUDENT'
|
||||
}>('/@me')
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile().then(r => {
|
||||
setUserProfile(r.data)
|
||||
})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Navbar className='mb-2'>
|
||||
<NavbarBrand>
|
||||
<p className='font-bold text-inherit'>Toogether</p>
|
||||
</NavbarBrand>
|
||||
|
||||
<NavbarContent as='div' justify='end'>
|
||||
<Dropdown placement='bottom-end'>
|
||||
<DropdownTrigger>
|
||||
<Avatar
|
||||
isBordered
|
||||
as='button'
|
||||
className='transition-transform'
|
||||
color='secondary'
|
||||
name={initials}
|
||||
size='sm'
|
||||
/>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label='Profile Actions' variant='flat'>
|
||||
<DropdownItem key='profile' className='h-14 gap-2'>
|
||||
<p>Signed in as</p>
|
||||
<p className='font-semibold'>{session?.user?.name}</p>
|
||||
</DropdownItem>
|
||||
<DropdownItem key='settings'>Settings</DropdownItem>
|
||||
<DropdownItem key='logout' color='danger' href='/auth/logout'>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<NavbarItem>
|
||||
<ThemeSwitcher />
|
||||
</NavbarItem>
|
||||
{userProfile?.role === 'ADMIN' ? (
|
||||
<NavbarItem>
|
||||
<Button onPress={() => router.push('/admin')}>🔧</Button>
|
||||
</NavbarItem>
|
||||
) : null}
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
)
|
||||
}
|
||||
"use client";
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Dropdown,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownTrigger,
|
||||
Navbar,
|
||||
NavbarBrand,
|
||||
NavbarContent,
|
||||
NavbarItem,
|
||||
} from "@nextui-org/react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||
import { axiosInstance } from "@/app/lib/axios";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
const getInitials = (name: string) => {
|
||||
if (!name) return "";
|
||||
|
||||
const nameParts = name.split(" ");
|
||||
if (nameParts.length === 1) {
|
||||
return name;
|
||||
}
|
||||
|
||||
const firstInitial = nameParts[0]?.[0] || "";
|
||||
const secondInitial = nameParts[1]?.[0] || nameParts[0]?.[1] || "";
|
||||
|
||||
return firstInitial + secondInitial;
|
||||
};
|
||||
|
||||
export const Header = () => {
|
||||
const { data: session } = useSession();
|
||||
const router = useRouter();
|
||||
|
||||
const [userProfile, setUserProfile] = useState<{
|
||||
id: string;
|
||||
username: string;
|
||||
role: "ADMIN" | "STUDENT";
|
||||
}>();
|
||||
|
||||
const initials = session?.user?.name ? getInitials(session.user.name) : "";
|
||||
|
||||
const fetchUserProfile = async () => {
|
||||
return await axiosInstance<{
|
||||
id: string;
|
||||
username: string;
|
||||
role: "ADMIN" | "STUDENT";
|
||||
}>("/@me");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUserProfile().then((r) => {
|
||||
setUserProfile(r.data);
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Navbar className="mb-2">
|
||||
<NavbarBrand>
|
||||
<p className="font-bold text-inherit">Toogether</p>
|
||||
</NavbarBrand>
|
||||
|
||||
<NavbarContent as="div" justify="end">
|
||||
<Dropdown placement="bottom-end">
|
||||
<DropdownTrigger>
|
||||
<Avatar
|
||||
isBordered
|
||||
as="button"
|
||||
className="transition-transform"
|
||||
color="secondary"
|
||||
name={initials}
|
||||
size="sm"
|
||||
/>
|
||||
</DropdownTrigger>
|
||||
<DropdownMenu aria-label="Profile Actions" variant="flat">
|
||||
<DropdownItem key="profile" className="h-14 gap-2">
|
||||
<p>Signed in as</p>
|
||||
<p className="font-semibold">
|
||||
{session?.user?.name}
|
||||
</p>
|
||||
</DropdownItem>
|
||||
<DropdownItem key="settings">Settings</DropdownItem>
|
||||
<DropdownItem
|
||||
key="logout"
|
||||
color="danger"
|
||||
href="/auth/logout"
|
||||
>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
<NavbarItem>
|
||||
<ThemeSwitcher />
|
||||
</NavbarItem>
|
||||
{userProfile?.role === "ADMIN" ? (
|
||||
<NavbarItem>
|
||||
<Button onPress={() => router.push("/admin")}>
|
||||
🔧
|
||||
</Button>
|
||||
</NavbarItem>
|
||||
) : null}
|
||||
</NavbarContent>
|
||||
</Navbar>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { parseDate, Time } from '@internationalized/date';
|
||||
import { parseDate, Time } from "@internationalized/date";
|
||||
|
||||
import {
|
||||
Button,
|
||||
@ -9,55 +9,55 @@ import {
|
||||
CardHeader,
|
||||
DateInput,
|
||||
Divider,
|
||||
TimeInput
|
||||
} from '@nextui-org/react';
|
||||
import { Room } from './Room';
|
||||
import moment from 'moment';
|
||||
import { useRouter } from 'next/navigation';
|
||||
TimeInput,
|
||||
} from "@nextui-org/react";
|
||||
import { Room } from "./Room";
|
||||
import moment from "moment";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export const RoomCard = ({ id, name, date, Times, Presentator }: Room) => {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<Card className='w-[300px]'>
|
||||
<Card className="w-[300px]">
|
||||
<CardHeader>
|
||||
<div className='flex flex-col'>
|
||||
<p className='text-md'>{name}</p>
|
||||
<p className='text-small text-default-500'>
|
||||
<div className="flex flex-col">
|
||||
<p className="text-md">{name}</p>
|
||||
<p className="text-small text-default-500">
|
||||
{Presentator.username}
|
||||
</p>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<Divider />
|
||||
<CardBody>
|
||||
{Times.map(time => (
|
||||
<div className='flex flex-col gap-2' key={`${time.id}`}>
|
||||
{Times.map((time) => (
|
||||
<div className="flex flex-col gap-2" key={`${time.id}`}>
|
||||
<DateInput
|
||||
isReadOnly
|
||||
label='Date'
|
||||
value={parseDate(moment(date).format('YYYY-MM-DD'))}
|
||||
label="Date"
|
||||
value={parseDate(moment(date).format("YYYY-MM-DD"))}
|
||||
/>
|
||||
<div className='flex items-center gap-2'>
|
||||
<div className="flex items-center gap-2">
|
||||
<TimeInput
|
||||
isReadOnly
|
||||
label='Start'
|
||||
label="Start"
|
||||
hourCycle={24}
|
||||
value={
|
||||
new Time(
|
||||
moment(time.startTime).hours(),
|
||||
moment(time.startTime).minutes()
|
||||
moment(time.startTime).minutes(),
|
||||
)
|
||||
}
|
||||
/>
|
||||
<span>-</span>
|
||||
<TimeInput
|
||||
isReadOnly
|
||||
label='End'
|
||||
label="End"
|
||||
hourCycle={24}
|
||||
value={
|
||||
new Time(
|
||||
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>
|
||||
{moment(date).dayOfYear() === moment().dayOfYear() && (
|
||||
<div className='flex p-2'>
|
||||
<div className="flex p-2">
|
||||
<Button
|
||||
className={
|
||||
''
|
||||
}
|
||||
color='primary'
|
||||
radius='full'
|
||||
size='sm'
|
||||
variant={'flat'}
|
||||
className={""}
|
||||
color="primary"
|
||||
radius="full"
|
||||
size="sm"
|
||||
variant={"flat"}
|
||||
onPress={() => {
|
||||
router.push(`/room/${id}`);
|
||||
}}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
'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);
|
||||
@ -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,22 +40,22 @@ 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
|
||||
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.map(room => (
|
||||
<li key={room.id} className='p-2'>
|
||||
rooms.map((room) => (
|
||||
<li key={room.id} className="p-2">
|
||||
<RoomCard
|
||||
id={room.id}
|
||||
name={room.name}
|
||||
@ -68,7 +68,7 @@ export const RoomList = ({ rooms }: { rooms: Room[] }) => {
|
||||
) : (
|
||||
<>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<li key={i} className='p-2'>
|
||||
<li key={i} className="p-2">
|
||||
<SkeletonRoomCard />
|
||||
</li>
|
||||
))}
|
||||
|
||||
4
src/app/components/Room/Room.d.ts
vendored
4
src/app/components/Room/Room.d.ts
vendored
@ -13,5 +13,5 @@ export interface Room {
|
||||
username: string;
|
||||
role: string;
|
||||
createdAt: string;
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
"use client"
|
||||
import { Card, Skeleton, Divider } from "@nextui-org/react"
|
||||
"use client";
|
||||
import { Card, Skeleton, Divider } from "@nextui-org/react";
|
||||
|
||||
export const SkeletonRoomCard = () => {
|
||||
return (
|
||||
<Card className='w-[200px] space-y-5 p-4' radius='lg'>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<Skeleton className='w-4/5 rounded-lg'>
|
||||
<div className='h-3 w-4/5 rounded-lg bg-default-200' />
|
||||
return (
|
||||
<Card className="w-[200px] space-y-5 p-4" radius="lg">
|
||||
<div className="flex flex-col gap-2">
|
||||
<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 className="w-2/5 rounded-lg">
|
||||
<div className="h-3 w-2/5 rounded-lg bg-default-300" />
|
||||
</Skeleton>
|
||||
</div>
|
||||
<Divider />
|
||||
<Skeleton className='rounded-lg'>
|
||||
<div className='h-12 rounded-lg bg-default-300' />
|
||||
<Skeleton className="rounded-lg">
|
||||
<div className="h-12 rounded-lg bg-default-300" />
|
||||
</Skeleton>
|
||||
<div className='flex items-center gap-2'>
|
||||
<Skeleton className='rounded-lg w-1/2'>
|
||||
<div className='h-10 rounded-lg bg-default-300' />
|
||||
<div className="flex items-center gap-2">
|
||||
<Skeleton className="rounded-lg w-1/2">
|
||||
<div className="h-10 rounded-lg bg-default-300" />
|
||||
</Skeleton>
|
||||
<span>-</span>
|
||||
<Skeleton className='rounded-lg w-1/2'>
|
||||
<div className='h-10 rounded-lg bg-default-300' />
|
||||
<Skeleton className="rounded-lg w-1/2">
|
||||
<div className="h-10 rounded-lg bg-default-300" />
|
||||
</Skeleton>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
'use client'
|
||||
import { Button } from '@nextui-org/react'
|
||||
import { useTheme } from 'next-themes'
|
||||
import { useEffect, useState } from 'react'
|
||||
"use client";
|
||||
import { Button } from "@nextui-org/react";
|
||||
import { useTheme } from "next-themes";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export const ThemeSwitcher = () => {
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const { theme, setTheme } = useTheme()
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true)
|
||||
}, [])
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<Button onPress={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
|
||||
{theme === 'light' ? '🌑' : '☀️'}
|
||||
<Button onPress={() => setTheme(theme === "light" ? "dark" : "light")}>
|
||||
{theme === "light" ? "🌑" : "☀️"}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,30 +1,30 @@
|
||||
import axios from "axios";
|
||||
import moment, { Moment } from "moment";
|
||||
import { getSession } from "next-auth/react";
|
||||
|
||||
moment.locale("fr");
|
||||
|
||||
let cachedAccessToken: string | null = null;
|
||||
let tokenExpirationAt: Moment | null = null;
|
||||
|
||||
export const axiosInstance = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||
});
|
||||
|
||||
axiosInstance.interceptors.request.use(async (config) => {
|
||||
if (tokenExpirationAt && moment().isBefore(tokenExpirationAt)) {
|
||||
config.headers.Authorization = `Bearer ${cachedAccessToken}`;
|
||||
return config;
|
||||
}
|
||||
|
||||
const session = await getSession();
|
||||
if (!session) {
|
||||
throw new Error("User is not authenticated");
|
||||
}
|
||||
|
||||
cachedAccessToken = session.accessToken;
|
||||
tokenExpirationAt = moment(session.accessTokenExpires);
|
||||
|
||||
config.headers.Authorization = `Bearer ${cachedAccessToken}`;
|
||||
return config;
|
||||
});
|
||||
import axios from "axios";
|
||||
import moment, { Moment } from "moment";
|
||||
import { getSession } from "next-auth/react";
|
||||
|
||||
moment.locale("fr");
|
||||
|
||||
let cachedAccessToken: string | null = null;
|
||||
let tokenExpirationAt: Moment | null = null;
|
||||
|
||||
export const axiosInstance = axios.create({
|
||||
baseURL: process.env.NEXT_PUBLIC_API_URL,
|
||||
});
|
||||
|
||||
axiosInstance.interceptors.request.use(async (config) => {
|
||||
if (tokenExpirationAt && moment().isBefore(tokenExpirationAt)) {
|
||||
config.headers.Authorization = `Bearer ${cachedAccessToken}`;
|
||||
return config;
|
||||
}
|
||||
|
||||
const session = await getSession();
|
||||
if (!session) {
|
||||
throw new Error("User is not authenticated");
|
||||
}
|
||||
|
||||
cachedAccessToken = session.accessToken;
|
||||
tokenExpirationAt = moment(session.accessTokenExpires);
|
||||
|
||||
config.headers.Authorization = `Bearer ${cachedAccessToken}`;
|
||||
return config;
|
||||
});
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
export const UppercaseFirstLetter = (str: string) => {
|
||||
return str.slice(0, 1).toLocaleUpperCase() + str.slice(1);
|
||||
}
|
||||
export const UppercaseFirstLetter = (str: string) => {
|
||||
return str.slice(0, 1).toLocaleUpperCase() + str.slice(1);
|
||||
};
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
'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';
|
||||
"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";
|
||||
|
||||
const HomePage = () => {
|
||||
const [roomsLoading, setRoomsLoading] = useState(true);
|
||||
@ -16,30 +16,30 @@ const HomePage = () => {
|
||||
}>({
|
||||
future: [],
|
||||
actual: [],
|
||||
past: []
|
||||
past: [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
axiosInstance
|
||||
.get<{ id: string; name: string; createdAt: string }[]>(
|
||||
'/@me/class'
|
||||
)
|
||||
.then(classResponse => {
|
||||
.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 => {
|
||||
.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 future = classes.data.filter((room) =>
|
||||
moment(room.date).isAfter(moment(), "day"),
|
||||
);
|
||||
const actual = classes.data.filter(room =>
|
||||
moment(room.date).isSame(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())
|
||||
const past = classes.data.filter((room) =>
|
||||
moment(room.date).isBefore(moment()),
|
||||
);
|
||||
|
||||
setRooms({ future, actual, past });
|
||||
@ -51,17 +51,17 @@ const 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>
|
||||
<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>
|
||||
<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>
|
||||
<section className="flex flex-col gap-2">
|
||||
<h2 className="font-semibold text-lg">Past</h2>
|
||||
<RoomList rooms={rooms.past} />
|
||||
</section>
|
||||
</main>
|
||||
|
||||
24
src/app/types/env.d.ts
vendored
24
src/app/types/env.d.ts
vendored
@ -1,12 +1,12 @@
|
||||
declare namespace NodeJS {
|
||||
interface ProcessEnv {
|
||||
OAUTH_PROVIDER_NAME: string;
|
||||
OAUTH_CLIENT_ID: string;
|
||||
OAUTH_CLIENT_SECRET: string;
|
||||
OAUTH_AUTHORIZATION_URL: string;
|
||||
OAUTH_TOKEN_URL: string;
|
||||
OAUTH_USERINFO_URL: string;
|
||||
OAUTH_ISSUER: string;
|
||||
OAUTH_JWKS_ENDPOINT: string;
|
||||
}
|
||||
}
|
||||
declare namespace NodeJS {
|
||||
interface ProcessEnv {
|
||||
OAUTH_PROVIDER_NAME: string;
|
||||
OAUTH_CLIENT_ID: string;
|
||||
OAUTH_CLIENT_SECRET: string;
|
||||
OAUTH_AUTHORIZATION_URL: string;
|
||||
OAUTH_TOKEN_URL: string;
|
||||
OAUTH_USERINFO_URL: string;
|
||||
OAUTH_ISSUER: string;
|
||||
OAUTH_JWKS_ENDPOINT: string;
|
||||
}
|
||||
}
|
||||
|
||||
84
src/app/types/next-auth.d.ts
vendored
84
src/app/types/next-auth.d.ts
vendored
@ -1,42 +1,42 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { Moment } from "moment";
|
||||
import NextAuth, { DefaultSession } from "next-auth";
|
||||
import { JWT } from "next-auth/jwt";
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
sub: string;
|
||||
name: string;
|
||||
preferred_username: string;
|
||||
given_name: string;
|
||||
family_name: string;
|
||||
}
|
||||
|
||||
declare module "next-auth" {
|
||||
interface Session extends DefaultSession {
|
||||
accessToken: string;
|
||||
refreshToken: string;
|
||||
accessTokenExpires: Moment;
|
||||
error?: Error;
|
||||
user: User;
|
||||
}
|
||||
|
||||
interface Account {
|
||||
expires_at: number;
|
||||
access_token: string;
|
||||
refresh_token: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare module "next-auth/jwt" {
|
||||
interface JWT {
|
||||
accessToken: string;
|
||||
accessTokenExpires: Moment;
|
||||
refreshToken: string;
|
||||
error?: Error;
|
||||
user: User | AdapterUser;
|
||||
iat: number;
|
||||
exp: number;
|
||||
jti: string;
|
||||
}
|
||||
}
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { Moment } from "moment";
|
||||
import NextAuth, { DefaultSession } from "next-auth";
|
||||
import { JWT } from "next-auth/jwt";
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
sub: string;
|
||||
name: string;
|
||||
preferred_username: string;
|
||||
given_name: string;
|
||||
family_name: string;
|
||||
}
|
||||
|
||||
declare module "next-auth" {
|
||||
interface Session extends DefaultSession {
|
||||
accessToken: string;
|
||||
refreshToken: string;
|
||||
accessTokenExpires: Moment;
|
||||
error?: Error;
|
||||
user: User;
|
||||
}
|
||||
|
||||
interface Account {
|
||||
expires_at: number;
|
||||
access_token: string;
|
||||
refresh_token: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare module "next-auth/jwt" {
|
||||
interface JWT {
|
||||
accessToken: string;
|
||||
accessTokenExpires: Moment;
|
||||
refreshToken: string;
|
||||
error?: Error;
|
||||
user: User | AdapterUser;
|
||||
iat: number;
|
||||
exp: number;
|
||||
jti: string;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,106 +1,110 @@
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import { AuthOptions, Session } from "next-auth";
|
||||
import { JWT } from "next-auth/jwt";
|
||||
|
||||
moment.locale("fr");
|
||||
|
||||
export const authOptions: AuthOptions = {
|
||||
providers: [
|
||||
{
|
||||
id: "oauth",
|
||||
name: process.env.OAUTH_PROVIDER_NAME,
|
||||
type: "oauth",
|
||||
clientId: process.env.OAUTH_CLIENT_ID,
|
||||
clientSecret: process.env.OAUTH_CLIENT_SECRET,
|
||||
authorization: {
|
||||
url: process.env.OAUTH_AUTHORIZATION_URL,
|
||||
params: {
|
||||
scope: "openid profile offline_access",
|
||||
response_type: "code",
|
||||
},
|
||||
},
|
||||
checks: ["pkce", "state"],
|
||||
idToken: true,
|
||||
token: process.env.OAUTH_TOKEN_URL,
|
||||
userinfo: process.env.OAUTH_USERINFO_URL,
|
||||
issuer: process.env.OAUTH_ISSUER,
|
||||
jwks_endpoint: process.env.OAUTH_JWKS_ENDPOINT,
|
||||
profile(profile: Session["user"]) {
|
||||
return {
|
||||
id: profile.sub || profile.id,
|
||||
name:
|
||||
profile.name ||
|
||||
profile.preferred_username ||
|
||||
`${profile.given_name} ${profile.family_name}`,
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
callbacks: {
|
||||
async jwt({ token, account, user }) {
|
||||
if (account && user) {
|
||||
token.accessToken = account.access_token;
|
||||
token.accessTokenExpires = moment(account.expires_at * 1000).subtract(5, "s");
|
||||
token.refreshToken = account.refresh_token;
|
||||
token.user = user;
|
||||
return token;
|
||||
}
|
||||
|
||||
if (moment().isBefore(moment(token.accessTokenExpires))) {
|
||||
return token;
|
||||
}
|
||||
|
||||
return refreshAccessToken(token);
|
||||
},
|
||||
async session({ session, token }) {
|
||||
if (token) {
|
||||
session.user = token.user;
|
||||
session.accessToken = token.accessToken;
|
||||
session.accessTokenExpires = token.accessTokenExpires;
|
||||
session.error = token.error;
|
||||
}
|
||||
|
||||
return session;
|
||||
},
|
||||
},
|
||||
pages: {
|
||||
signIn: "/auth/login",
|
||||
signOut: "/auth/logout",
|
||||
}
|
||||
};
|
||||
|
||||
const refreshAccessToken = async (token: JWT): Promise<JWT> => {
|
||||
const response = await axios.post<{
|
||||
access_token: string;
|
||||
expires_in: number;
|
||||
refresh_token: string;
|
||||
error_description?: string;
|
||||
}>(
|
||||
process.env.OAUTH_TOKEN_URL,
|
||||
{
|
||||
grant_type: "refresh_token",
|
||||
refresh_token: token.refreshToken,
|
||||
client_id: process.env.OAUTH_CLIENT_ID,
|
||||
client_secret: process.env.OAUTH_CLIENT_SECRET,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (response.status != 200) {
|
||||
throw new Error(
|
||||
response.data.error_description || "Failed to refresh access token"
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
...token,
|
||||
accessToken: response.data.access_token,
|
||||
accessTokenExpires: moment().add(response.data.expires_in, "seconds").subtract(5, "s"),
|
||||
refreshToken: response.data.refresh_token,
|
||||
};
|
||||
};
|
||||
import axios from "axios";
|
||||
import moment from "moment";
|
||||
import { AuthOptions, Session } from "next-auth";
|
||||
import { JWT } from "next-auth/jwt";
|
||||
|
||||
moment.locale("fr");
|
||||
|
||||
export const authOptions: AuthOptions = {
|
||||
providers: [
|
||||
{
|
||||
id: "oauth",
|
||||
name: process.env.OAUTH_PROVIDER_NAME,
|
||||
type: "oauth",
|
||||
clientId: process.env.OAUTH_CLIENT_ID,
|
||||
clientSecret: process.env.OAUTH_CLIENT_SECRET,
|
||||
authorization: {
|
||||
url: process.env.OAUTH_AUTHORIZATION_URL,
|
||||
params: {
|
||||
scope: "openid profile offline_access",
|
||||
response_type: "code",
|
||||
},
|
||||
},
|
||||
checks: ["pkce", "state"],
|
||||
idToken: true,
|
||||
token: process.env.OAUTH_TOKEN_URL,
|
||||
userinfo: process.env.OAUTH_USERINFO_URL,
|
||||
issuer: process.env.OAUTH_ISSUER,
|
||||
jwks_endpoint: process.env.OAUTH_JWKS_ENDPOINT,
|
||||
profile(profile: Session["user"]) {
|
||||
return {
|
||||
id: profile.sub || profile.id,
|
||||
name:
|
||||
profile.name ||
|
||||
profile.preferred_username ||
|
||||
`${profile.given_name} ${profile.family_name}`,
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
callbacks: {
|
||||
async jwt({ token, account, user }) {
|
||||
if (account && user) {
|
||||
token.accessToken = account.access_token;
|
||||
token.accessTokenExpires = moment(
|
||||
account.expires_at * 1000,
|
||||
).subtract(5, "s");
|
||||
token.refreshToken = account.refresh_token;
|
||||
token.user = user;
|
||||
return token;
|
||||
}
|
||||
|
||||
if (moment().isBefore(moment(token.accessTokenExpires))) {
|
||||
return token;
|
||||
}
|
||||
|
||||
return refreshAccessToken(token);
|
||||
},
|
||||
async session({ session, token }) {
|
||||
if (token) {
|
||||
session.user = token.user;
|
||||
session.accessToken = token.accessToken;
|
||||
session.accessTokenExpires = token.accessTokenExpires;
|
||||
session.error = token.error;
|
||||
}
|
||||
|
||||
return session;
|
||||
},
|
||||
},
|
||||
pages: {
|
||||
signIn: "/auth/login",
|
||||
signOut: "/auth/logout",
|
||||
},
|
||||
};
|
||||
|
||||
const refreshAccessToken = async (token: JWT): Promise<JWT> => {
|
||||
const response = await axios.post<{
|
||||
access_token: string;
|
||||
expires_in: number;
|
||||
refresh_token: string;
|
||||
error_description?: string;
|
||||
}>(
|
||||
process.env.OAUTH_TOKEN_URL,
|
||||
{
|
||||
grant_type: "refresh_token",
|
||||
refresh_token: token.refreshToken,
|
||||
client_id: process.env.OAUTH_CLIENT_ID,
|
||||
client_secret: process.env.OAUTH_CLIENT_SECRET,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (response.status != 200) {
|
||||
throw new Error(
|
||||
response.data.error_description || "Failed to refresh access token",
|
||||
);
|
||||
}
|
||||
|
||||
return {
|
||||
...token,
|
||||
accessToken: response.data.access_token,
|
||||
accessTokenExpires: moment()
|
||||
.add(response.data.expires_in, "seconds")
|
||||
.subtract(5, "s"),
|
||||
refreshToken: response.data.refresh_token,
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getToken } from "next-auth/jwt";
|
||||
|
||||
export async function middleware(req: NextRequest) {
|
||||
const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
|
||||
const isAuth = !!token;
|
||||
|
||||
const url = req.nextUrl.clone();
|
||||
|
||||
if (isAuth && url.pathname === "/auth/login") {
|
||||
url.pathname = "/";
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
|
||||
if (!isAuth && url.pathname !== "/auth/login") {
|
||||
url.pathname = "/auth/login";
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ["/((?!api|_next|static|favicon.ico).*)"],
|
||||
};
|
||||
import { NextRequest, NextResponse } from "next/server";
|
||||
import { getToken } from "next-auth/jwt";
|
||||
|
||||
export async function middleware(req: NextRequest) {
|
||||
const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
|
||||
const isAuth = !!token;
|
||||
|
||||
const url = req.nextUrl.clone();
|
||||
|
||||
if (isAuth && url.pathname === "/auth/login") {
|
||||
url.pathname = "/";
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
|
||||
if (!isAuth && url.pathname !== "/auth/login") {
|
||||
url.pathname = "/auth/login";
|
||||
return NextResponse.redirect(url);
|
||||
}
|
||||
|
||||
return NextResponse.next();
|
||||
}
|
||||
|
||||
export const config = {
|
||||
matcher: ["/((?!api|_next|static|favicon.ico).*)"],
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user