From 04a9be91bc07e447882d42b620ae6e101a059309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Sun, 23 Apr 2023 21:14:20 +0200
Subject: [PATCH] Fix ui

---
 app/dashboard/settings/page.tsx |  7 ++++
 ui/Puzzle.tsx                   |  4 +--
 ui/Puzzles.tsx                  | 58 +++++++++++++++------------------
 3 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
index 32e80fc..83d4c17 100644
--- a/app/dashboard/settings/page.tsx
+++ b/app/dashboard/settings/page.tsx
@@ -8,6 +8,7 @@ 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;
@@ -18,6 +19,7 @@ type SettingsData = {
 export default function Page() {
   const { data: me } = useContext(UserContext);
   const { mutate } = useSWRConfig();
+  const router = useRouter();
   const { register, handleSubmit } = useForm<SettingsData>({
     defaultValues: {
       name: '',
@@ -35,6 +37,8 @@ export default function Page() {
     [];
 
   async function onSubmit(data: SettingsData) {
+    if (!data) return;
+
     const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/groupQuit`, {
       method: 'POST',
       body: JSON.stringify({
@@ -49,6 +53,9 @@ export default function Page() {
 
     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");
     }
   }
 
diff --git a/ui/Puzzle.tsx b/ui/Puzzle.tsx
index c7e97e0..d9beb39 100644
--- a/ui/Puzzle.tsx
+++ b/ui/Puzzle.tsx
@@ -60,16 +60,16 @@ export default function Puzzle({ token, id }: { token: string; id: number }) {
       }
     });
 
-    if (res.ok || res.status === 406 || res.status === 423) {
+    if (res.ok || res.status === 403 || res.status === 406 || res.status === 423) {
       const data = res.ok || res.status === 406 ? ((await res.json()) as Granted) : null;
       if (data && data.score) {
         mutate(`puzzles/${puzzle?.id}`);
-        mutate('puzzles');
       } else if (data && data.tries) setGranted(data);
       else if (res.ok && data?.success)
         setGranted({ tries: null, score: null, message: 'Réponse correcte' });
       else if (res.status === 423)
         setGranted({ tries: null, score: null, message: 'Réponse incorrecte' });
+      else if (res.status === 403) mutate(`puzzles/${puzzle?.id}`);
     }
   }
 
diff --git a/ui/Puzzles.tsx b/ui/Puzzles.tsx
index 55567e2..05dde48 100644
--- a/ui/Puzzles.tsx
+++ b/ui/Puzzles.tsx
@@ -55,18 +55,9 @@ export default function Puzzles({ token }: { token: string }) {
     if (!chapter.startDate || !chapter.endDate) {
       return false;
     }
-
     const startDate = new Date(chapter.startDate);
     const now = new Date();
-
-    if (now > startDate) {
-      const minutes = 10 * 60 * 1000;
-      if (now.getTime() - startDate.getTime() < minutes) {
-        return true;
-      }
-    }
-
-    return false;
+    return now.getTime() < startDate.getTime() + 10 * 60 * 1000;
   }
 
   const filteredData = useMemo(() => {
@@ -157,7 +148,7 @@ export default function Puzzles({ token }: { token: string }) {
                     <div className="h-1 w-1/2 rounded-lg bg-gradient-to-tl from-brand to-brand-accent" />
                   </div>
                 )}
-                <div className="mt-1 flex justify-start gap-x-2 md:justify-end">
+                <div className="mt-1 flex justify-start gap-x-2">
                   {isInEventGroup(chapter) && (
                     <>
                       <FilterDifficulty
@@ -225,19 +216,13 @@ export default function Puzzles({ token }: { token: string }) {
 }
 
 function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
-  function isBeforeStart(chapter: Chapter) {
+  function isStarted(chapter: Chapter) {
     if (!chapter.startDate || !chapter.endDate) {
       return false;
     }
-
     const startDate = new Date(chapter.startDate);
     const now = new Date();
-
-    if (now > startDate) {
-      return true;
-    }
-
-    return false;
+    return now > startDate;
   }
   return (
     <li
@@ -248,11 +233,11 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
           'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
           'border-red-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'hard'),
           'border-highlight-primary': !puzzle.tags?.length,
-          'cursor-not-allowed': !isBeforeStart(chapter)
+          'cursor-not-allowed': !isStarted(chapter)
         }
       )}
     >
-      {isBeforeStart(chapter) ? (
+      {isStarted(chapter) ? (
         <AppLink
           className="flex h-full w-full items-center justify-between p-4"
           key={puzzle.id}
@@ -265,6 +250,8 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
                 ({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
               </span>
             </span>
+          </div>
+          <div className="flex items-center gap-x-6">
             {puzzle.tags?.length && (
               <div className="flex gap-x-2 text-sm text-muted">
                 {puzzle.tags
@@ -276,35 +263,38 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
                   ))}
               </div>
             )}
+            <Icon
+              className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
+              name="arrow-right-line"
+            />
           </div>
-          <Icon
-            className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
-            name="arrow-right-line"
-          />
         </AppLink>
       ) : (
         <div className="flex h-full w-full items-center justify-between p-4 opacity-50">
-          <div className="flex gap-x-2">
+          <div className="flex w-10/12 flex-col gap-2 lg:w-full lg:flex-row">
             <span className="text-base font-semibold">
               {puzzle.name}{' '}
               <span className="text-sm text-highlight-secondary">
                 ({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
               </span>
             </span>
+          </div>
+          <div className="flex items-center gap-x-6">
             {puzzle.tags?.length && (
               <div className="flex gap-x-2 text-sm text-muted">
                 {puzzle.tags
                   .filter((tag) => !['easy', 'medium', 'hard'].includes(tag.name))
                   .map((tag, i) => (
-                    <span
-                      key={i}
-                      className={cn('inline-block rounded-md bg-primary-900 px-2 py-1')}
-                    >
+                    <span key={i} className="inline-block rounded-md bg-primary-900 px-2 py-1">
                       {tag.name}
                     </span>
                   ))}
               </div>
             )}
+            <Icon
+              className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
+              name="arrow-right-line"
+            />
           </div>
         </div>
       )}
@@ -361,7 +351,9 @@ function FilterDifficulty({
     }
   }, [stored]);
 
-  return <Select className="w-44" options={options} value={filter} onChange={handleChange} />;
+  return (
+    <Select className="w-full sm:w-44" options={options} value={filter} onChange={handleChange} />
+  );
 }
 
 function FilterTags({
@@ -415,7 +407,9 @@ function FilterTags({
     }
   }, [stored]);
 
-  return <Select className="w-44" options={options} value={filter} onChange={handleChange} />;
+  return (
+    <Select className="w-full sm:w-44" options={options} value={filter} onChange={handleChange} />
+  );
 }
 
 type GroupData = {