From 6ec7436cdfab209f75d595f79369681ad709191c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Sat, 22 Apr 2023 10:18:01 +0200
Subject: [PATCH] Adding leave group

---
 app/dashboard/puzzles/[id]/not-found.tsx |  1 +
 app/dashboard/settings/page.tsx          | 59 ++++++++++++++++++++++++
 lib/nav-items.ts                         |  2 +-
 ui/Puzzle.tsx                            |  1 -
 ui/Puzzles.tsx                           |  6 +--
 5 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 app/dashboard/settings/page.tsx

diff --git a/app/dashboard/puzzles/[id]/not-found.tsx b/app/dashboard/puzzles/[id]/not-found.tsx
index d4965df..44d91bd 100644
--- a/app/dashboard/puzzles/[id]/not-found.tsx
+++ b/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() {
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
new file mode 100644
index 0000000..e14bd37
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/lib/nav-items.ts b/lib/nav-items.ts
index d252a7a..27f1e2d 100644
--- a/lib/nav-items.ts
+++ b/lib/nav-items.ts
@@ -48,6 +48,6 @@ export const navItems: NavItem[] = [
     name: 'Paramètres',
     slug: 'settings',
     icon: 'equalizer-line',
-    disabled: true
+    disabled: false
   }
 ];
diff --git a/ui/Puzzle.tsx b/ui/Puzzle.tsx
index 2cfae6e..40ca5b0 100644
--- a/ui/Puzzle.tsx
+++ b/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();
diff --git a/ui/Puzzles.tsx b/ui/Puzzles.tsx
index 0b0ee43..9e3267e 100644
--- a/ui/Puzzles.tsx
+++ b/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);