app/(event)/event/[id]/page.tsx

@@ -1,19 +0,0 @@
-import EventLeaderboard from '@/ui/events/Leaderboard';
-import { cookies } from 'next/headers';
-import { notFound } from 'next/navigation';
-
-export const metadata = {
-  title: 'Tableau des scores - Peer-at Code',
-  description: 'Suivez la progression des élèves en direct'
-};
-
-export default async function Page({ params }: { params: { id: number } }) {
-  const { id } = params;
-
-  if (!id) {
-    notFound();
-  }
-
-  const token = cookies().get('token')?.value;
-  return <EventLeaderboard token={token!} id={id} />;
-}

app/dashboard/badges/page.tsx

@@ -12,7 +12,7 @@ export default function Page() {
         <section className="flex flex-col space-y-4">
           <header className="flex flex-col">
             <h3 className="text-xl font-semibold">Mes badges</h3>
-            <p className="text-muted">
+            <p className="hidden text-muted sm:block">
               Vos badges sont affichés ici, vous pouvez les partager avec vos amis
             </p>
           </header>

app/dashboard/page.tsx

@@ -36,17 +36,13 @@ export default function Page() {
           <header>
             <h3 className="text-xl font-semibold">Guides</h3>
           </header>
-          <main className="h-full w-full flex-col justify-between space-x-0 space-y-4 rounded-lg border border-highlight-primary bg-primary-700 md:flex md:flex-row md:space-x-6 md:space-y-0">
+          <main className="h-full w-full flex-col justify-between space-x-0 space-y-4 rounded-lg border border-highlight-primary bg-primary-700 md:flex md:flex-row md:space-x-6 md:space-y-0"></main>
-            Work in progress
-          </main>
         </section>
         <section className="flex h-full w-full flex-col space-y-4">
           <header>
             <h3 className="text-xl font-semibold">Historiques</h3>
           </header>
-          <main className="h-full w-full flex-col justify-between space-x-0 space-y-4 rounded-lg border border-highlight-primary bg-primary-700 md:flex md:flex-row md:space-x-6 md:space-y-0">
+          <main className="h-full w-full flex-col justify-between space-x-0 space-y-4 rounded-lg border border-highlight-primary bg-primary-700 md:flex md:flex-row md:space-x-6 md:space-y-0"></main>
-            Work in progress
-          </main>
         </section>
       </div>
       {/* TODO fix ça c'est pas responsive */}

app/dashboard/puzzles/[id]/page.tsx

@@ -25,11 +25,7 @@ export default async function Page({ params }: { params: { id: number } }) {
     notFound();
   }
 
-  const puzzle = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/puzzle/${id}`, {
+  const puzzle = await getPuzzle({ token, id });
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
-  }).then((res) => res.json());
 
   if (!puzzle) {
     notFound();

lib/groups.ts

@@ -1,27 +0,0 @@
-import fetcher from './fetcher';
-
-export const getGroups = async ({ token }: { token: string }): Promise<Group[]> => {
-  const { data, status } = await fetcher.get(`/groups`, {
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
-  });
-
-  const groups = data;
-
-  if (status !== 200) {
-    throw new Error('Failed to fetch groups');
-  }
-
-  if (!groups) {
-    return [] as Group[];
-  }
-
-  return groups as Group[];
-};
-
-export type Group = {
-  id: number;
-  name: string;
-  chapter?: number;
-};

lib/hooks/use-groups.ts

@@ -1,6 +0,0 @@
-import useSWR from 'swr';
-import { getGroups } from '../groups';
-
-export function useGroups({ token }: { token: string }) {
-  return useSWR('groups', () => getGroups({ token }));
-}

lib/hooks/use-leaderboard.ts

@@ -1,10 +1,6 @@
 import useSWR from 'swr';
-import { getScores, getScoresEvent } from '../leaderboard';
+import { getScores } from '../leaderboard';
 
 export function useLeaderboard({ token }: { token: string }) {
   return useSWR('leaderboard', () => getScores({ token }));
 }
-
-export function useLeaderboardEvent({ token, id }: { token: string; id: number }) {
-  return useSWR(`leaderboard/${id}`, () => getScoresEvent({ token, id }));
-}

lib/leaderboard.ts

@@ -1,5 +1,5 @@
 import fetcher from './fetcher';
-import { type Group } from './groups';
+import type { Group } from './players';
 
 export const getScores = async ({ token }: { token: string }): Promise<Score[]> => {
   const { data, status } = await fetcher.get(`/leaderboard`, {
@@ -21,32 +21,6 @@ export const getScores = async ({ token }: { token: string }): Promise<Score[]>
   return scores as Score[];
 };
 
-export const getScoresEvent = async ({
-  token,
-  id
-}: {
-  token: string;
-  id: number;
-}): Promise<ScoreEvent> => {
-  const { data, status } = await fetcher.get(`/leaderboard/${id}`, {
-    headers: {
-      Authorization: `Bearer ${token}`
-    }
-  });
-
-  const scores = data;
-
-  if (status !== 200) {
-    throw new Error('Failed to fetch scores');
-  }
-
-  if (!scores) {
-    return {} as ScoreEvent;
-  }
-
-  return scores as ScoreEvent;
-};
-
 export type Score = {
   score: number;
   tries: number;
@@ -56,22 +30,3 @@ export type Score = {
   avatar: string;
   rank: number;
 };
-
-export type ScoreEvent = {
-  start_date: string;
-  end_date: string;
-  groups: [
-    {
-      name: string;
-      rank: number;
-      players: [
-        {
-          pseudo: string;
-          tries: number;
-          completions: number;
-          score: number;
-        }
-      ];
-    }
-  ];
-};

lib/players.ts

@@ -1,5 +1,4 @@
 import fetcher from './fetcher';
-import { type Group } from './groups';
 
 export const getPlayer = async ({
   token,
@@ -47,3 +46,8 @@ export type Badge = {
   level: number;
   logo?: string;
 };
+
+export type Group = {
+  name: string;
+  chapter?: number;
+};

lib/puzzles.ts

@@ -90,8 +90,8 @@ export type Chapter = {
   id: number;
   name: string;
   puzzles: Puzzle[];
-  startDate?: string;
+  startDay?: string;
-  endDate?: string;
+  endDay?: string;
 };
 
 export type Tag = {

middleware.ts

@@ -11,34 +11,10 @@ export async function middleware(req: NextRequest) {
 
   const token = req.cookies.get('token')?.value;
 
-  if (token) {
+  if (req.nextUrl.pathname.includes('dashboard') && !token)
-    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/player/`, {
-      headers: {
-        Authorization: `Bearer ${token}`
-      },
-      cache: 'no-cache',
-      next: {
-        revalidate: 60
-      }
-    });
-
-    if (response.status !== 200) {
-      res.cookies.set('token', '', {
-        path: '/',
-        expires: new Date(0)
-      });
-
-      NextResponse.redirect(getURL('/sign-in'));
-    }
-  }
-
-  if (!token && req.nextUrl.pathname.includes('dashboard')) {
     return NextResponse.redirect(getURL('/sign-in'));
-  }
+  else if (req.nextUrl.pathname.includes('sign') && token)
-
-  if (token && req.nextUrl.pathname.includes('sign')) {
     return NextResponse.redirect(getURL('/dashboard'));
-  }
 
   return res;
 }

package.json

@@ -20,20 +20,16 @@
   },
   "homepage": "https://github.com/Peer-at-Code/peer-at-code#readme",
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-popover": "^1.0.5",
     "axios": "^1.3.4",
     "boring-avatars": "^1.7.0",
     "clsx": "^1.2.1",
-    "framer-motion": "^10.11.2",
     "js-cookie": "^3.0.1",
     "next": "13.2.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.43.1",
     "react-markdown": "^8.0.5",
-    "remark-breaks": "^3.0.2",
-    "remark-gfm": "^3.0.1",
     "remixicon": "^2.5.0",
     "swr": "^2.0.3",
     "tailwind-merge": "^1.9.0",

ui/AppLink.tsx

@@ -7,9 +7,6 @@ const AppLink = forwardRef<HTMLAnchorElement, Parameters<typeof Link>[0]>((props
   if (props.target === '_blank') {
     return <a ref={ref} {...props} href={props.href.toString()} />;
   }
-  if (props['aria-disabled']) {
-    return <span ref={ref} {...props} />;
-  }
   return <Link ref={ref} {...props} href={props.href} />;
 });
 

ui/Dialog.tsx

@@ -1,54 +0,0 @@
-import { cn } from '@/lib/utils';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import type { ReactNode } from 'react';
-import Icon from './Icon';
-// import Tooltip from './Tooltip';
-
-type DialogProps = {
-  title?: ReactNode;
-  tooltip: ReactNode;
-  trigger: ReactNode;
-  children: ReactNode;
-  open?: boolean;
-  fullscreen?: boolean;
-  className?: string;
-  onOpenChange?: (open: boolean) => void;
-};
-
-export default function Dialog({
-  title,
-  tooltip,
-  trigger,
-  children,
-  open,
-  fullscreen,
-  className,
-  onOpenChange
-}: DialogProps) {
-  return (
-    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      {/* <Tooltip label={tooltip}> */}
-      <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>
-      {/* </Tooltip> */}
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-highlight-primary/50" />
-        <DialogPrimitive.Content
-          className={cn(
-            'fixed left-1/2 top-1/2 z-50 flex w-96 -translate-x-1/2 -translate-y-1/2  transform flex-col overflow-hidden rounded-lg bg-primary-800 shadow-lg sm:w-1/3 sm:bg-primary-800/50',
-            className
-          )}
-        >
-          {title && (
-            <div className="flex w-full justify-between pb-4">
-              {title}
-              <DialogPrimitive.Trigger>
-                <Icon name="close-fill" className="hover:text-highlight-secondary" />
-              </DialogPrimitive.Trigger>
-            </div>
-          )}
-          {children}
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
-    </DialogPrimitive.Root>
-  );
-}

ui/Leaderboard.tsx

@@ -74,10 +74,7 @@ export default function Leaderboard({ token }: { token: string }) {
                     <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
                       <span className="text-lg">{score.pseudo}</span>
                       <span className="text-sm text-muted">
-                        {score.groups
+                        {score.groups?.map((g) => g.name).join(', ')}
-                          ?.map((g) => g.name)
-                          .sort((a, b) => a.localeCompare(b))
-                          .join(', ')}
                       </span>
                     </div>
                   </div>

ui/Puzzle.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import type { Puzzle as PuzzleType } from '@/lib/puzzles';
-import cookies from 'js-cookie';
 import { notFound } from 'next/navigation';
 import { useForm } from 'react-hook-form';
+import cookies from 'js-cookie';
 
 import Button from './Button';
 import Input from './Input';
@@ -36,14 +36,9 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
   async function onSubmit(data: PuzzleData) {
     const formData = new FormData();
 
-    // if (data.code_file[0].size > 16 * 1024 * 1024) {
-    //   alert('Fichier trop volumineux');
-    //   return;
-    // }
-
     formData.append('answer', data.answer);
-    // formData.append('filename', data.code_file[0].name);
+    formData.append('filename', data.code_file[0].name);
-    // formData.append('code_file', data.code_file[0]);
+    formData.append('code_file', data.code_file[0]);
 
     const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/puzzleResponse/${puzzle.id}`, {
       method: 'POST',
@@ -62,7 +57,7 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
     <div className="flex h-full w-full flex-col justify-between space-y-4">
       <div className="flex flex-col space-y-2">
         <h2 className="text-4xl font-bold">{puzzle.name}</h2>
-        {/* <p className="text-sm text-muted">Chapitre</p> */}
+        <p className="text-sm text-muted">Chapitre</p>
       </div>
       <div className="flex h-screen overflow-y-auto">
         <ToHTML className="font-code" data={puzzle.content} />
@@ -74,21 +69,21 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
       >
         <div className="flex flex-col space-x-0 sm:flex-row sm:space-x-6">
           <Input
-            className="w-full"
+            className="w-full sm:w-1/3"
             label="Réponse"
             type="text"
             placeholder="12"
             required
             {...register('answer')}
           />
-          {/* <Input
+          <Input
             className="h-16 w-full sm:w-1/3"
             label="Code"
             type="file"
             required
-            accept=".py,.js,.ts,.java,.rs,.c"
+            accept=".py,.js,.ts,.java,.rust,.c"
             {...register('code_file')}
-          /> */}
+          />
         </div>
         <Button kind="brand" className="mt-6" type="submit">
           Envoyer

ui/Puzzles.tsx

@@ -1,40 +1,23 @@
 'use client';
 
-import { UserContext } from '@/context/user';
-import { useGroups } from '@/lib/hooks/use-groups';
 import { usePuzzles } from '@/lib/hooks/use-puzzles';
-import type { Chapter, Puzzle } from '@/lib/puzzles';
+import { type Chapter } from '@/lib/puzzles';
 import { cn } from '@/lib/utils';
-import { useContext, useState } from 'react';
-import { useForm } from 'react-hook-form';
 import AppLink from './AppLink';
-import Button from './Button';
-import Dialog from './Dialog';
 import Icon from './Icon';
-import Input from './Input';
-import Select from './Select';
 
 export default function Puzzles({ token }: { token: string }) {
-  const { data: me } = useContext(UserContext);
   const { data, isLoading } = usePuzzles({ token });
 
-  const [isOpen, setIsOpen] = useState<boolean[]>([]);
+  // SOme chapters have a start date and a end date (for example, the first chapter is only available for 2 weeks), I want to want to lock the chapter if the current date is not between the start and end date
+  // I want to display a message to the user if the chapter is locked
 
-  function handleClick(index: number) {
+  function isChapterLocked(chapter: Chapter) {
-    setIsOpen((prevState) => {
-      const newState = [...prevState];
-      newState[index] = !newState[index];
-      return newState;
-    });
-  }
-
-  console.log(me);
-
-  function isInEventGroup(chapter: Chapter) {
     return (
-      chapter.startDate &&
+      chapter.startDay &&
-      chapter.endDate &&
+      chapter.endDay &&
-      me?.groups?.some((group) => group.chapter && group.chapter === chapter.id)
+      new Date() > new Date(chapter.startDay) &&
+      new Date() < new Date(chapter.endDay)
     );
   }
 
@@ -43,63 +26,65 @@ export default function Puzzles({ token }: { token: string }) {
       {(!isLoading &&
         data?.map((chapter) => (
           <div key={chapter.id} className="flex flex-col space-y-4">
-            <div className="flex flex-col justify-between lg:flex-row lg:items-center">
+            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-x-2">
+              <h3 className="text-xl font-semibold sm:text-2xl">
-                <h3 className="text-xl font-semibold sm:text-2xl">
+                Chapitre {chapter.id} - {chapter.name}{' '}
-                  Chapitre {chapter.id} - {chapter.name}{' '}
+              </h3>
-                </h3>
+              <div className="h-1 w-1/4 rounded-lg bg-gray-200">
-                {!isInEventGroup(chapter) && (
+                <div className="h-1 w-1/2 rounded-lg bg-gradient-to-tl from-brand to-brand-accent" />
-                  <Dialog
-                    key={chapter.id}
-                    title={chapter.name}
-                    tooltip="Select Hogwarts Level"
-                    open={isOpen[chapter.id]}
-                    onOpenChange={() => handleClick(chapter.id)}
-                    trigger={
-                      <button className="flex items-center gap-x-2 text-sm font-semibold text-muted hover:text-brand">
-                        <Icon name="group-line" />
-                        Rejoindre un groupe
-                      </button>
-                    }
-                    className="right-96 p-4"
-                  >
-                    <GroupForm chapter={chapter} token={token} />
-                  </Dialog>
-                )}
               </div>
-              {chapter.startDate && chapter.endDate ? (
-                <div className="flex items-center gap-x-2">
-                  <Icon name="calendar-line" className="text-sm text-muted" />
-                  <span className="text-sm text-muted">
-                    {new Date(chapter.startDate).toLocaleDateString('fr-FR', {
-                      day: 'numeric',
-                      month: 'long',
-                      year: 'numeric',
-                      hour: 'numeric'
-                    })}{' '}
-                    -{' '}
-                    {new Date(chapter.endDate).toLocaleDateString('fr-FR', {
-                      day: 'numeric',
-                      month: 'long',
-                      year: 'numeric',
-                      hour: 'numeric'
-                    })}
-                  </span>
-                </div>
-              ) : (
-                <div className="h-1 w-1/4 rounded-lg bg-gray-200">
-                  <div className="h-1 w-1/2 rounded-lg bg-gradient-to-tl from-brand to-brand-accent" />
-                </div>
-              )}
             </div>
-            {isInEventGroup(chapter) && (
+            <ul
-              <ul className="flex flex-col space-y-4">
+              className={cn('flex flex-col space-y-4', {
-                {chapter.puzzles &&
+                // If the chapter is locked i want to add a class to li children to make them unclickable
-                  chapter.puzzles.map((puzzle) => (
+                'pointer-events-none': isChapterLocked(chapter)
-                    <PuzzleProp key={puzzle.id} puzzle={puzzle} chapter={chapter} />
+              })}
-                  ))}
+            >
-              </ul>
+              {chapter.puzzles &&
-            )}
+                chapter.puzzles.map((puzzle) => (
+                  <AppLink key={puzzle.id} href={`/dashboard/puzzles/${puzzle.id}`}>
+                    <li
+                      className={cn(
+                        'group flex items-center justify-between rounded-md border-2 bg-primary-700 p-4 font-code hover:bg-primary-600',
+                        {
+                          'border-green-600/30': puzzle.tags
+                            ?.map((tag) => tag.name.toLowerCase())
+                            .includes('easy'),
+                          'border-yellow-600/30': puzzle.tags
+                            ?.map((tag) => tag.name.toLowerCase())
+                            .includes('medium'),
+                          'border-red-600/30': puzzle.tags
+                            ?.map((tag) => tag.name.toLowerCase())
+                            .includes('hard'),
+                          'border-highlight-secondary/30': !puzzle.tags?.length
+                        }
+                      )}
+                    >
+                      <div className="flex gap-x-2">
+                        <span className="text-base font-semibold">{puzzle.name}</span>
+                        {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')}
+                                >
+                                  {tag.name}
+                                </span>
+                              ))}
+                          </div>
+                        )}
+                      </div>
+                      <Icon
+                        className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
+                        name="arrow-right-line"
+                      />
+                    </li>
+                  </AppLink>
+                ))}
+            </ul>
           </div>
         ))) || (
         <div className="flex flex-col space-y-6">
@@ -134,191 +119,3 @@ export default function Puzzles({ token }: { token: string }) {
     </>
   );
 }
-
-function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
-  const isPuzzleAvailable = (chapter: Chapter) => {
-    const today = new Date();
-    const startDate = new Date(chapter.startDate!);
-    const endDate = new Date(chapter.endDate!);
-    return (
-      (chapter.startDate && chapter.endDate && today >= startDate && today <= endDate) ||
-      (!chapter.startDate && !chapter.endDate)
-    );
-  };
-  return (
-    <li
-      className={cn(
-        'group relative flex h-full w-full rounded-md border-2 bg-primary-700 font-code hover:bg-primary-600',
-        {
-          'border-green-600/30': puzzle.tags?.map((tag) => tag.name.toLowerCase()).includes('easy'),
-          'border-yellow-600/30': puzzle.tags
-            ?.map((tag) => tag.name.toLowerCase())
-            .includes('medium'),
-          'border-red-600/30': puzzle.tags?.map((tag) => tag.name.toLowerCase()).includes('hard'),
-          'border-highlight-primary': !puzzle.tags?.length,
-          'cursor-not-allowed': !isPuzzleAvailable(chapter)
-        }
-      )}
-    >
-      {isPuzzleAvailable(chapter) ? (
-        <AppLink
-          className="flex h-full w-full items-center justify-between p-4"
-          key={puzzle.id}
-          href={`/dashboard/puzzles/${puzzle.id}`}
-        >
-          <div className="flex gap-x-2">
-            <span className="text-base font-semibold">{puzzle.name}</span>
-            {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')}
-                    >
-                      {tag.name}
-                    </span>
-                  ))}
-              </div>
-            )}
-          </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">
-            <span className="text-base font-semibold">{puzzle.name}</span>
-            {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')}
-                    >
-                      {tag.name}
-                    </span>
-                  ))}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-    </li>
-  );
-}
-
-type GroupData = {
-  name?: string;
-  chapter?: number;
-  puzzle?: number;
-};
-
-function GroupForm({ chapter, token }: { chapter: Chapter; token: string }) {
-  const [isJoining, setIsJoining] = useState(false);
-
-  const { data: groups } = useGroups({ token });
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-    reset
-  } = useForm<GroupData>({
-    defaultValues: {
-      name: undefined,
-      chapter: chapter.id,
-      puzzle: undefined
-    }
-  });
-
-  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}`
-      }
-    });
-  }
-
-  return (
-    <div className="flex flex-col">
-      <div className="flex justify-between">
-        <button
-          onClick={() => {
-            setIsJoining(false);
-            reset();
-          }}
-          className={cn('rounded-lg p-2 font-semibold', {
-            'bg-primary-500': !isJoining
-          })}
-        >
-          Créer un groupe
-        </button>
-        <button
-          onClick={() => {
-            setIsJoining(true);
-            reset();
-          }}
-          className={cn('rounded-lg p-2 font-semibold', {
-            'bg-primary-500': isJoining
-          })}
-        >
-          Rejoindre un groupe
-        </button>
-      </div>
-      <div className="px-2 py-4">
-        <hr className="border-primary-600" />
-      </div>
-      <form
-        className="flex w-full flex-col justify-between"
-        onSubmit={handleSubmit(onSubmit)}
-        encType="multipart/form-data"
-      >
-        <div className="flex w-56 flex-col space-y-4">
-          {!isJoining ? (
-            <>
-              <div className="flex flex-col">
-                <Input
-                  className="w-full"
-                  label="Nom du groupe"
-                  type="text"
-                  placeholder="Terre en vue mon capitaine !"
-                  required
-                  {...register('name')}
-                />
-              </div>
-            </>
-          ) : (
-            <>
-              <Select
-                className="w-full"
-                label="Groupes"
-                required
-                {...register('name')}
-                options={
-                  groups
-                    ?.filter((group) => group.chapter === chapter.id)
-                    .map((group) => ({
-                      title: group.name,
-                      value: group.name
-                    })) || []
-                }
-              />
-            </>
-          )}
-          <Button kind="brand" type="submit">
-            {isJoining ? 'Rejoindre' : 'Créer'}
-          </Button>
-        </div>
-      </form>
-    </div>
-  );
-}

ui/Timer.tsx

@@ -1,55 +0,0 @@
-import clsx from 'clsx';
-import { useEffect, useReducer } from 'react';
-
-type State = {
-  hours: number;
-  minutes: number;
-  seconds: number;
-};
-
-type Action = {
-  type: string;
-  payload: Partial<State>;
-};
-
-function reducer(state: State, action: Action): State {
-  switch (action.type) {
-    case 'SET_TIME_REMAINING':
-      return { ...state, ...action.payload };
-    default:
-      return state;
-  }
-}
-
-export function Timer({ targetDate, className }: { targetDate: Date; className?: string }) {
-  const [timeRemaining, dispatch] = useReducer(reducer, {
-    hours: 0,
-    minutes: 0,
-    seconds: 0
-  });
-
-  targetDate = new Date(targetDate);
-
-  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 }
-      });
-    }, 1000);
-
-    return () => clearInterval(intervalId);
-  }, [targetDate]);
-
-  return (
-    <span className={clsx('', className)}>
-      {`${timeRemaining.hours.toString().padStart(2, '0')}:${timeRemaining.minutes
-        .toString()
-        .padStart(2, '0')}:${timeRemaining.seconds.toString().padStart(2, '0')}`}
-    </span>
-  );
-}

ui/ToHTML.tsx

@@ -2,22 +2,11 @@
 
 import { cn } from '@/lib/utils';
 import Mardown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
-import remarkBreaks from 'remark-breaks';
 
 export default function ToHTML({ data, className }: { data: string; className?: string }) {
   return (
     <div className={cn('select-none', className)}>
-      <Mardown
+      <Mardown>{data}</Mardown>
-        components={{
-          a: ({ node, ...props }) => (
-            <a {...props} className="text-brand" download={node} target="_blank" rel="noreferrer" />
-          )
-        }}
-        remarkPlugins={[remarkGfm, remarkBreaks]}
-      >
-        {data}
-      </Mardown>
     </div>
   );
 }

ui/UserAuthForm.tsx

@@ -64,7 +64,7 @@ export default function UserAuthForm() {
       if (!email_valid) {
         setError('email', {
           type: 'manual',
-          message: 'Adresse e-mail indisponible'
+          message: 'Email déjà utilisé'
         });
       }
     }
@@ -134,7 +134,7 @@ export default function UserAuthForm() {
         {isSignIn ? 'Se connecter' : "S'inscrire"}
       </Button>
       <div className="flex flex-col text-center">
-        {/* {!isSignIn && (
+        {!isSignIn && (
           <p className="flex flex-col items-center text-sm text-muted">
             En cliquant sur continuer, vous acceptez les{' '}
             <AppLink className="text-white underline" href="/privacy-policy" target="_blank">
@@ -142,7 +142,7 @@ export default function UserAuthForm() {
             </AppLink>
             .
           </p>
-        )} */}
+        )}
         <p className="flex flex-col items-center text-sm text-muted">
           {isSignIn ? "Vous n'avez pas de compte?" : 'Vous possédez un compte?'}{' '}
           <AppLink className="text-brand underline" href={isSignIn ? '/sign-up' : '/sign-in'}>

ui/dashboard/Sidenav.tsx

@@ -41,18 +41,6 @@ export default function Sidenav({ isOpen, toggle }: { isOpen: boolean; toggle: (
         </div>
         <div className="px-4 pt-4">
           <ul className="space-y-4">
-            <li>
-              <NavItem
-                item={{
-                  name: 'Discord',
-                  slug: 'https://discord.gg/72vuHcwUkE',
-                  icon: 'discord-fill',
-                  disabled: false
-                }}
-                isOpen={isOpen}
-                onClick={toggle}
-              />
-            </li>
             <li>
               <NavItem
                 item={{
@@ -82,15 +70,10 @@ function NavItem({
   onClick?: () => void;
 }) {
   const segment = useSelectedLayoutSegment();
-  const pathname = segment?.split('/').pop() || '';
+  const isActive = segment?.split('/').pop() === item.slug || (item.slug === '' && !segment);
-  const isHttp = item.slug.includes('http');
-  const isActive = pathname === item.slug || (item.slug === '' && !segment);
   return (
     <AppLink
-      aria-disabled={item.disabled}
+      href={item.disabled ? '/dashboard' : `/dashboard/${item.slug}`}
-      href={isHttp ? item.slug : `dashboard/${item.slug}`}
-      target={isHttp ? '_blank' : undefined}
-      rel={isHttp ? 'noopener noreferrer' : undefined}
       className={cn('flex justify-center rounded-md px-3 py-3 text-sm lg:justify-start', {
         'text-muted hover:text-secondary': !isActive,
         'bg-highlight-primary text-secondary': isActive,

ui/dashboard/Usernav.tsx

@@ -24,11 +24,11 @@ export default function Usernav({ isOpen, toggle }: { isOpen: boolean; toggle: (
 
   async function handleLogout() {
     cookies.remove('token');
-    router.replace('/');
+    router.refresh();
   }
 
   return (
-    <div className="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary bg-secondary px-8 py-4">
+    <div className="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary bg-secondary py-4 px-8">
       <div className="flex flex-row items-center space-x-2 sm:space-x-0">
         <div className="flex items-center">
           <button onClick={toggle} className="block sm:hidden">

ui/events/Leaderboard.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import { useLeaderboardEvent } from '@/lib/hooks/use-leaderboard';
-import { cn } from '@/lib/utils';
-// import { Timer } from '../Timer';
-import Podium from './podium/Podium';
-import { useMemo } from 'react';
-
-const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
-
-export default function EventLeaderboard({ token, id }: { token: string; id: number }) {
-  const { data, isLoading } = useLeaderboardEvent({ token, id });
-
-  const scores = [data?.groups]
-    .flat()
-    .sort((a, b) => a!.rank - b!.rank)
-    .map((group, place) => ({
-      ...group,
-      place
-    }));
-
-  return (
-    <section className="flex h-full w-full flex-col space-y-4 p-4">
-      {!isLoading && data && <Podium score={scores} />}
-      {/* <Timer targetDate={data && 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">
-          {!isLoading &&
-            data?.groups.map((group, key) => (
-              <li key={key} className="flex justify-between space-x-2">
-                <div className="flex items-center space-x-4">
-                  <span className={cn('font-semibold', SCORE_COLORS[group.rank - 1])}>
-                    {group.rank}
-                  </span>
-                  <div className="flex items-center space-x-2">
-                    <div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
-                      <span className="text-lg">{group.name}</span>
-                      <span className="text-sm text-muted">
-                        {group.players
-                          ?.map((p) => p.pseudo)
-                          .sort((a, b) => a.localeCompare(b))
-                          .join(', ')}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="flex items-center space-x-4">
-                  <div className="flex flex-col">
-                    <span className="text-sm font-semibold">Essaies</span>
-                    <span className="text-lg text-muted">
-                      {group.players.reduce((a, b) => a + b.tries, 0)}
-                    </span>
-                  </div>
-                  <div className="flex flex-col">
-                    <span className="text-sm font-semibold">Score</span>
-                    <span className="text-lg text-muted">
-                      {group.players.reduce((a, b) => a + b.score, 0)}
-                    </span>
-                  </div>
-                </div>
-              </li>
-            ))}
-        </ul>
-      </main>
-    </section>
-  );
-}

ui/events/podium/Podium.tsx

@@ -1,20 +0,0 @@
-import PodiumStep from './PodiumStep';
-
-export default function Podium({ score }: { score: any }) {
-  const podium = [2, 0, 1]
-    .reduce((podiumOrder, position) => [...podiumOrder, score[position]] as any, [])
-    .filter(Boolean);
-
-  console.log(podium);
-
-  return (
-    <div
-      className="mt-8 grid grid-flow-col-dense place-content-center content-end items-end justify-center justify-items-center gap-2"
-      style={{ height: 250 }}
-    >
-      {podium.map((group: any, index: number) => (
-        <PodiumStep key={index} podium={podium} group={group} index={index} />
-      ))}
-    </div>
-  );
-}

ui/events/podium/PodiumStep.tsx

@@ -1,64 +0,0 @@
-import { motion } from 'framer-motion';
-
-export const positions: Record<number, string> = {
-  0: '1 er',
-  1: '2 ème',
-  2: '3 ème'
-};
-
-export default function PodiumStep({
-  podium,
-  group,
-  index
-}: {
-  podium: any;
-  group: any;
-  index: number;
-}) {
-  return (
-    <div className="flex flex-col items-center">
-      <motion.div
-        custom={index}
-        initial="hidden"
-        animate="visible"
-        variants={{
-          visible: () => ({
-            opacity: 1,
-            transition: {
-              delay: podium.length - group.place + 1,
-              duration: 0.75
-            }
-          }),
-          hidden: { opacity: 0 }
-        }}
-        className="w-16 items-center justify-center text-center"
-      >
-        <span className="font-semibold text-white">{group.name}</span>
-      </motion.div>
-      <motion.div
-        custom={index}
-        initial="hidden"
-        animate="visible"
-        variants={{
-          visible: () => ({
-            height: 200 * ((podium.length - group.place) / podium.length),
-            opacity: 2,
-            transition: {
-              delay: podium.length - group.place,
-              duration: 1.25,
-              ease: 'backInOut'
-            }
-          }),
-          hidden: { opacity: 0, height: 0 }
-        }}
-        className="flex w-16 cursor-pointer place-content-center rounded-t-lg bg-brand shadow-lg hover:bg-opacity-80"
-        style={{
-          marginBottom: -1,
-          filter: `opacity(${0.1 + (podium.length - group.place) / podium.length})`
-        }}
-      >
-        <span className="self-end font-semibold text-white">{positions[group.place]}</span>
-      </motion.div>
-    </div>
-  );
-}