peer-at-code-web/app/dashboard/settings/page.tsx
2023-04-23 21:14:20 +02:00

74 lines
1.9 KiB
TypeScript

'use client';
import cookies from 'js-cookie';
import { useContext } from 'react';
import { useForm } from 'react-hook-form';
import { useSWRConfig } from 'swr';
import { UserContext } from '@/context/user';
import Button from '@/ui/Button';
import Select from '@/ui/Select';
import { useRouter } from 'next/navigation';
type SettingsData = {
name: string;
chapter?: number;
puzzle?: number;
};
export default function Page() {
const { data: me } = useContext(UserContext);
const { mutate } = useSWRConfig();
const router = useRouter();
const { register, handleSubmit } = useForm<SettingsData>({
defaultValues: {
name: '',
chapter: undefined,
puzzle: undefined
}
});
const groups =
(me?.groups &&
me?.groups.map((group) => ({
title: group.name,
value: group.name
}))) ||
[];
async function onSubmit(data: SettingsData) {
if (!data) return;
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/groupQuit`, {
method: 'POST',
body: JSON.stringify({
name: data.name,
chapter: me?.groups?.find((group) => group.name === data.name)?.chapter
// puzzle: me?.groups?.find((group) => group.name === data.name)?.puzzle
}),
headers: {
Authorization: `Bearer ${cookies.get('token')}}`
}
});
if (res.ok) {
mutate('me');
router.push('/dashboard/puzzles');
} else if (res.status === 423) {
alert("Vous ne pouvez pas quitter un groupe en cours d'évenement");
}
}
return (
<section className="flex h-full w-full flex-col space-y-4">
{me && me?.groups?.length > 0 && (
<form className="flex items-center space-x-2" onSubmit={handleSubmit(onSubmit)}>
<Select {...register('name')} className="w-1/4" options={groups} />
<Button kind="brand" type="submit">
Quitter
</Button>
</form>
)}
</section>
);
}