Adding leave group

app/dashboard/puzzles/[id]/not-found.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+
 import error404 from '@/public/assets/404.png';
 
 export default function NotFound() {

app/dashboard/settings/page.tsx

@@ -0,0 +1,59 @@
+'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>
+  );
+}

lib/nav-items.ts

@@ -48,6 +48,6 @@ export const navItems: NavItem[] = [
     name: 'Paramètres',
     slug: 'settings',
     icon: 'equalizer-line',
-    disabled: true
+    disabled: false
   }
 ];

ui/Puzzle.tsx

@@ -26,7 +26,6 @@ type Granted = {
 
 export default function Puzzle({ token, id }: { token: string; id: number }) {
   const [granted, setGranted] = useState<Granted | null>(null);
-
   const { data: puzzle, isLoading } = usePuzzle({ token, id });
   const { mutate } = useSWRConfig();
   const router = useRouter();

ui/Puzzles.tsx

@@ -299,8 +299,6 @@ function FilterChapter({
     initialValue: ''
   });
 
-  console.log(stored);
-
   let options = [] as { title: string; value: string }[];
 
   options = chapters
@@ -312,8 +310,8 @@ function FilterChapter({
       return { title: t!.name, value: t!.name };
     }) as { title: string; value: string }[];
 
-  options?.unshift({ title: 'Pas encore terminé', value: 'no-completed' });
-  options?.unshift({ title: 'Terminés', value: 'completed' });
+  options?.unshift({ title: 'Pas encore terminé(s)', value: 'no-completed' });
+  options?.unshift({ title: 'Terminé(s)', value: 'completed' });
   options?.unshift({ title: 'Tout les puzzles', value: '' });
 
   setFilterChapter(chapter.id);