From 0773cba2c85b32162da07f3878afea44fea89890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Mon, 17 Apr 2023 09:30:54 +0200
Subject: [PATCH] Fixed puzzle & added code block as spoiler

---
 ui/Puzzle.tsx       |  2 +-
 ui/Puzzles.tsx      | 67 ++++++++++++++++++++++++++-------------------
 ui/Timer.tsx        |  6 ++--
 ui/ToHTML.tsx       | 16 +++++++++--
 ui/UserAuthForm.tsx | 16 ++++-------
 5 files changed, 62 insertions(+), 45 deletions(-)

diff --git a/ui/Puzzle.tsx b/ui/Puzzle.tsx
index 0e63c06..eb609de 100644
--- a/ui/Puzzle.tsx
+++ b/ui/Puzzle.tsx
@@ -49,7 +49,7 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
     //   return;
     // }
 
-    formData.append('answer', data.answer);
+    formData.append('answer', data.answer.trim());
     // formData.append('filename', 'placeholder');
     // formData.append('code_file', new Blob(), 'placeholder');
 
diff --git a/ui/Puzzles.tsx b/ui/Puzzles.tsx
index a373207..1a1aaa3 100644
--- a/ui/Puzzles.tsx
+++ b/ui/Puzzles.tsx
@@ -13,6 +13,7 @@ import Dialog from './Dialog';
 import Icon from './Icon';
 import Input from './Input';
 import Select from './Select';
+import { useRouter } from 'next/navigation';
 
 export default function Puzzles({ token }: { token: string }) {
   const { data: me } = useContext(UserContext);
@@ -93,28 +94,30 @@ export default function Puzzles({ token }: { token: string }) {
             {isInEventGroup(chapter) && (
               <ul className="flex flex-col space-y-4">
                 {chapter.puzzles &&
-                  chapter.puzzles.sort((p1, p2) => {  
-                    if(p1.tags == undefined) return 1;
-                    if(p2.tags == undefined) return -1;
-                    let e1 = p1.tags.findIndex(tag => tag.name === "easy") >= 0;
-                    let e2 = p2.tags.findIndex(tag => tag.name === "easy") >= 0;
-                    if(e1 && e2) return p1.tags.length-p2.tags.length;
-                    if(e1) return -1;
-                    if(e2) return 1;
-                    let m1 = p1.tags.findIndex(tag => tag.name === "medium") >= 0;
-                    let m2 = p2.tags.findIndex(tag => tag.name === "medium") >= 0;
-                    if(m1 && m2) return p1.tags.length-p2.tags.length;
-                    if(m1) return -1;
-                    if(m2) return 1;
-                    let h1 = p1.tags.findIndex(tag => tag.name === "hard") >= 0;
-                    let h2 = p2.tags.findIndex(tag => tag.name === "hard") >= 0;
-                    if(h1 && h2) return p1.tags.length-p2.tags.length;
-                    if(h1) return -1;
-                    if(h2) return 1;
-                    return p1.tags.length-p2.tags.length;
-                  }).map((puzzle) => (
-                    <PuzzleProp key={puzzle.id} puzzle={puzzle} chapter={chapter} />
-                  ))}
+                  chapter.puzzles
+                    .sort((p1, p2) => {
+                      if (p1.tags == undefined) return 1;
+                      if (p2.tags == undefined) return -1;
+                      const e1 = p1.tags.findIndex((tag) => tag.name === 'easy') >= 0;
+                      const e2 = p2.tags.findIndex((tag) => tag.name === 'easy') >= 0;
+                      if (e1 && e2) return p1.tags.length - p2.tags.length;
+                      if (e1) return -1;
+                      if (e2) return 1;
+                      const m1 = p1.tags.findIndex((tag) => tag.name === 'medium') >= 0;
+                      const m2 = p2.tags.findIndex((tag) => tag.name === 'medium') >= 0;
+                      if (m1 && m2) return p1.tags.length - p2.tags.length;
+                      if (m1) return -1;
+                      if (m2) return 1;
+                      const h1 = p1.tags.findIndex((tag) => tag.name === 'hard') >= 0;
+                      const h2 = p2.tags.findIndex((tag) => tag.name === 'hard') >= 0;
+                      if (h1 && h2) return p1.tags.length - p2.tags.length;
+                      if (h1) return -1;
+                      if (h2) return 1;
+                      return p1.tags.length - p2.tags.length;
+                    })
+                    .map((puzzle) => (
+                      <PuzzleProp key={puzzle.id} puzzle={puzzle} chapter={chapter} />
+                    ))}
               </ul>
             )}
           </div>
@@ -238,6 +241,7 @@ type GroupData = {
 
 function GroupForm({ chapter, token }: { chapter: Chapter; token: string }) {
   const [isJoining, setIsJoining] = useState(false);
+  const router = useRouter();
 
   const { data: groups } = useGroups({ token });
 
@@ -256,13 +260,20 @@ function GroupForm({ chapter, token }: { chapter: Chapter; token: string }) {
   });
 
   async function onSubmit(data: GroupData) {
-    await fetch(`${process.env.NEXT_PUBLIC_API_URL}/${isJoining ? 'groupJoin' : 'groupCreate'}`, {
-      method: 'POST',
-      body: JSON.stringify(data),
-      headers: {
-        Authorization: `Bearer ${token}`
+    const res = await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/${isJoining ? 'groupJoin' : 'groupCreate'}`,
+      {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: {
+          Authorization: `Bearer ${token}`
+        }
       }
-    });
+    );
+    // TODO: handle errors
+    if (res.ok) {
+      router.refresh();
+    }
   }
 
   return (
diff --git a/ui/Timer.tsx b/ui/Timer.tsx
index 0891a19..e056660 100644
--- a/ui/Timer.tsx
+++ b/ui/Timer.tsx
@@ -31,9 +31,11 @@ export function Timer({ targetDate, className }: { targetDate: Date; className?:
   useEffect(() => {
     const intervalId = setInterval(() => {
       const timeDifference = targetDate.getTime() - Date.now();
+
       const hours = Math.floor(timeDifference / (1000 * 60 * 60));
       const minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
       const seconds = Math.floor((timeDifference / 1000) % 60);
+
       dispatch({
         type: 'SET_TIME_REMAINING',
         payload: { hours, minutes, seconds }
@@ -45,9 +47,7 @@ export function Timer({ targetDate, className }: { targetDate: Date; className?:
 
   return (
     <span className={clsx('', className)}>
-      {`${timeRemaining.hours.toString().padStart(2, '0')}:${timeRemaining.minutes
-        .toString()
-        .padStart(2, '0')}:${timeRemaining.seconds.toString().padStart(2, '0')}`}
+      {timeRemaining.hours}h {timeRemaining.minutes}m {timeRemaining.seconds}s
     </span>
   );
 }
diff --git a/ui/ToHTML.tsx b/ui/ToHTML.tsx
index def3900..33a2e73 100644
--- a/ui/ToHTML.tsx
+++ b/ui/ToHTML.tsx
@@ -7,11 +7,23 @@ import remarkBreaks from 'remark-breaks';
 
 export default function ToHTML({ data, className }: { data: string; className?: string }) {
   return (
-    <div className={cn('select-none', className)}>
+    <div className={cn(className)}>
       <Mardown
         components={{
           a: ({ node, ...props }) => (
-            <a {...props} className="text-brand" download={node} target="_blank" rel="noreferrer" />
+            <a
+              {...props}
+              className="text-brand hover:text-brand/80 hover:underline"
+              download={node}
+              target="_blank"
+              rel="noreferrer"
+            />
+          ),
+          code: ({ ...props }) => (
+            <span
+              {...props}
+              className="cursor-pointer select-none rounded bg-black p-0.5 text-black hover:bg-transparent hover:text-white"
+            />
           )
         }}
         remarkPlugins={[remarkGfm, remarkBreaks]}
diff --git a/ui/UserAuthForm.tsx b/ui/UserAuthForm.tsx
index 126fd28..20aeb80 100644
--- a/ui/UserAuthForm.tsx
+++ b/ui/UserAuthForm.tsx
@@ -58,8 +58,6 @@ export default function UserAuthForm() {
         type: 'manual',
         message: "Une erreur s'est produite."
       });
-
-      setIsLoading(false);
     }
 
     if (!isSignIn) {
@@ -70,8 +68,6 @@ export default function UserAuthForm() {
             type: 'manual',
             message: "Nom d'utilisateur indisponible"
           });
-
-          setIsLoading(false);
         }
         if (!email_valid) {
           setError('email', {
@@ -79,7 +75,6 @@ export default function UserAuthForm() {
             message: 'Adresse e-mail indisponible'
           });
         }
-        setIsLoading(false);
       }
     }
 
@@ -97,7 +92,6 @@ export default function UserAuthForm() {
         type: 'manual',
         message: "Nom d'utilisateur ou mot de passe incorrect"
       });
-      setIsLoading(false);
     }
 
     setIsLoading(false);
@@ -113,7 +107,7 @@ export default function UserAuthForm() {
           <Input
             label="Adresse e-mail"
             type="email"
-            placeholder="peer-at@exemple.be"
+            placeholder="philipzcwbarlow@peerat.dev"
             required
             error={errors.email?.message}
             {...register('email')}
@@ -121,14 +115,14 @@ export default function UserAuthForm() {
           <Input
             label="Nom"
             type="text"
-            placeholder="Doe"
+            placeholder="Barlow"
             error={errors.lastname?.message}
             {...register('lastname')}
           />
           <Input
             label="Prénom"
             type="text"
-            placeholder="John"
+            placeholder="Philipz"
             error={errors.firstname?.message}
             {...register('firstname')}
           />
@@ -137,7 +131,7 @@ export default function UserAuthForm() {
       <Input
         label="Nom d'utilisateur"
         type="text"
-        placeholder="PeerAt"
+        placeholder="CZ"
         required
         error={errors.pseudo?.message}
         {...register('pseudo')}
@@ -145,7 +139,7 @@ export default function UserAuthForm() {
       <Input
         label="Mot de passe"
         type="password"
-        placeholder="MotDePasse123"
+        placeholder="Terre en vue mon capitaine !"
         required
         error={errors.passwd?.message}
         {...register('passwd')}