Try fix

app/dashboard/page.tsx

@@ -19,7 +19,7 @@ export default function Page() {
               isLoading={isLoading}
               icon="pie-chart-line"
               title="Puzzles résolus"
-              data={me?.completions}
+              data={me?.completions || 0}
             />
             <Card
               isLoading={isLoading}
@@ -27,7 +27,12 @@ export default function Page() {
               title="Badges obtenus"
               data={me?.badges?.length || 'Aucun'}
             />
-            <Card isLoading={isLoading} icon="bar-chart-line" title="Rang actuel" data={me?.rank} />
+            <Card
+              isLoading={isLoading}
+              icon="bar-chart-line"
+              title="Rang actuel"
+              data={me?.rank || 'Non classé'}
+            />
           </main>
         </section>
       </div>

ui/Puzzle.tsx

@@ -15,11 +15,17 @@ type PuzzleData = {
   code_file: File[];
 };
 
+type Granted = {
+  [key: string]: number;
+};
+
 export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
   if (!puzzle) {
     notFound();
   }
 
+  // const [granted, setGranted] = useState({});
+
   const {
     register,
     handleSubmit,
@@ -81,6 +87,7 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
             required
             {...register('answer')}
           />
+
           {/* <Input
             className="h-16 w-full sm:w-1/3"
             label="Code"

ui/Timer.tsx

@@ -28,8 +28,6 @@ export function Timer({ targetDate, className }: { targetDate: Date; className?:
     seconds: 0
   });
 
-  targetDate = new Date(targetDate);
-
   useEffect(() => {
     const intervalId = setInterval(() => {
       const timeDifference = targetDate.getTime() - Date.now();

ui/UserAuthForm.tsx

@@ -53,43 +53,53 @@ export default function UserAuthForm() {
       }
     );
 
-    if (!res || res.status !== 200) {
+    if (!res) {
       setError('passwd', {
         type: 'manual',
         message: "Une erreur s'est produite."
       });
+
+      setIsLoading(false);
     }
 
-    if (res && !isSignIn) {
-      const { username_valid, email_valid } = await res.json();
-      if (!username_valid) {
-        setError('pseudo', {
-          type: 'manual',
-          message: "Nom d'utilisateur indisponible"
-        });
-      }
-      if (!email_valid) {
-        setError('email', {
-          type: 'manual',
-          message: 'Adresse e-mail indisponible'
-        });
+    if (!isSignIn) {
+      if (res.status === 400) {
+        const { username_valid, email_valid } = await res.json();
+        if (!username_valid) {
+          setError('pseudo', {
+            type: 'manual',
+            message: "Nom d'utilisateur indisponible"
+          });
+
+          setIsLoading(false);
+        }
+        if (!email_valid) {
+          setError('email', {
+            type: 'manual',
+            message: 'Adresse e-mail indisponible'
+          });
+        }
+        setIsLoading(false);
       }
     }
 
-    if (res && res.ok && res.status === 200) {
+    if (res.status === 200) {
       const token = res.headers.get('Authorization')?.split(' ')[1];
       if (token) {
+        console.log(token);
+
         cookies.set('token', token, {
           sameSite: 'strict',
           secure: process.env.NODE_ENV === 'production'
         });
         router.refresh();
       }
-    } else if (res && res.status === 400) {
+    } else {
       setError('passwd', {
         type: 'manual',
         message: "Nom d'utilisateur ou mot de passe incorrect"
       });
+      setIsLoading(false);
     }
 
     setIsLoading(false);

ui/events/Leaderboard.tsx

@@ -6,15 +6,16 @@ import type { ScoreEvent } from '@/lib/leaderboard';
 import type { SWRSubscription } from 'swr/subscription';
 import useSWRSubscription from 'swr/subscription';
 import Podium from './podium/Podium';
+import { Timer } from '../Timer';
 
 const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
 
-export default function EventLeaderboard({ token, id }: { token: string; id: number }) {
+export default function EventLeaderboard({ id }: { token: string; id: number }) {
   const subscription: SWRSubscription<string, ScoreEvent, Error> = (key, { next }) => {
     const socket = new WebSocket(key);
 
     socket.addEventListener('message', (event) => {
-      next(JSON.parse(event.data));
+      next(null, JSON.parse(event.data));
     });
 
     socket.addEventListener('error', (event) => {
@@ -25,12 +26,10 @@ export default function EventLeaderboard({ token, id }: { token: string; id: num
   };
 
   const { data, error } = useSWRSubscription(
-    `ws://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard/${id}`,
+    `wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard/${id}`,
     subscription
   );
 
-  // const { data, isLoading } = useLeaderboardEvent({ token, id });
-
   const scores = [data?.groups]
     .flat()
     .sort((a, b) => a!.rank - b!.rank)
@@ -39,13 +38,10 @@ export default function EventLeaderboard({ token, id }: { token: string; id: num
       place
     }));
 
-  if (error) return <div>failed to load</div>;
-  if (!data) return <div>loading...</div>;
-
   return (
     <section className="flex h-full w-full flex-col space-y-4 p-4">
       {data && <Podium score={scores} />}
-      {/* <Timer targetDate={data && data.end_date} />   */}
+      {data && data.end_date && <Timer targetDate={new Date(data.end_date)} />}
       <main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
         <ul className="flex flex-col space-y-2">
           {data?.groups.map((group, key) => (