peer-at-code-web/app/dashboard/settings/page.tsx
2023-04-22 10:18:01 +02:00

59 lines
1.4 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';
type SettingsData = {
group: string;
};
export default function Page() {
const { data: me } = useContext(UserContext);
const { mutate } = useSWRConfig();
const { register, handleSubmit } = useForm<SettingsData>({
defaultValues: {
group: ''
}
});
const groups =
me?.groups.map((group) => ({
title: group.name,
value: group.name
})) || [];
async function onSubmit(data: SettingsData) {
const formData = new FormData();
formData.append('group', data.group);
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/groupQuit`, {
method: 'POST',
body: formData,
headers: {
Authorization: `Bearer ${cookies.get('token')}}`
}
});
if (res.ok) {
mutate('me');
}
}
return (
<section className="flex h-full w-full flex-col space-y-4">
<form className="flex items-center space-x-2" onSubmit={handleSubmit(onSubmit)}>
<Select {...register('group')} className="w-1/4" options={groups} />
<Button kind="brand" type="submit">
Quitter
</Button>
</form>
</section>
);
}