From 4ca1c599fd75b700392d66c90c794dbb624fec5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Mon, 6 Mar 2023 17:51:51 +0100
Subject: [PATCH] added somes ISR & loading stuff

---
 app/dashboard/leaderboard/page.tsx  | 66 +-----------------------
 app/dashboard/puzzles/[id]/page.tsx |  4 +-
 app/dashboard/puzzles/page.tsx      |  4 +-
 lib/hooks/use-leaderboard.ts        |  6 +++
 lib/puzzles.ts                      |  2 -
 middleware.ts                       |  2 -
 styles/globals.css                  |  1 -
 tailwind.config.js                  |  9 +---
 tsconfig.json                       |  1 +
 ui/Button.tsx                       |  2 +-
 ui/Input.tsx                        |  2 +-
 ui/Leaderboard.tsx                  | 79 +++++++++++++++++++++++++++++
 ui/Puzzle.tsx                       |  9 +++-
 ui/Puzzles.tsx                      | 78 +++++++++++++++++++---------
 14 files changed, 158 insertions(+), 107 deletions(-)
 create mode 100644 lib/hooks/use-leaderboard.ts
 create mode 100644 ui/Leaderboard.tsx

diff --git a/app/dashboard/leaderboard/page.tsx b/app/dashboard/leaderboard/page.tsx
index f2bc96a..6e83730 100644
--- a/app/dashboard/leaderboard/page.tsx
+++ b/app/dashboard/leaderboard/page.tsx
@@ -1,22 +1,4 @@
-import { getScores } from '@/lib/leaderboard';
-import { cn } from '@/lib/utils';
-import Avatar from '@/ui/Avatar';
-import Select from '@/ui/Select';
-
-// TODO: Generate this later
-const scoreColors = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
-
-// TODO: Generate this later
-const options = [
-  { value: '1i1', title: '1I1' },
-  { value: '1i2', title: '1I2' },
-  { value: '1i3', title: '1I3' },
-  { value: '1i4', title: '1I4' },
-  { value: '1i5', title: '1I5' },
-  { value: '1i6', title: '1I6' },
-  { value: '1i7', title: '1I7' },
-  { value: '1i8', title: '1I8' }
-];
+import Leaderboard from '@/ui/Leaderboard';
 
 export const metadata = {
   title: 'Tableau des scores - Peer-at Code',
@@ -24,49 +6,5 @@ export const metadata = {
 };
 
 export default async function Page() {
-  // TODO: CSR fetch data for leaderboard (useSWR) to make it more reactive
-  const data = await getScores();
-  return (
-    <div className="flex h-full w-full flex-col space-y-4">
-      <div className="w-full">
-        <section className="flex flex-col space-y-4">
-          <header className="flex items-center justify-between">
-            <div>
-              <h3 className="text-xl font-semibold">Tableau des scores</h3>
-              <p className="hidden text-muted sm:block">
-                Suivez la progression des élèves en direct
-              </p>
-            </div>
-            <Select className="w-28" options={options} />
-          </header>
-          <main className="flex flex-col justify-between space-x-0 space-y-4">
-            {data.map((score, key) => (
-              <div key={key} className="flex flex-col space-y-2">
-                <div className="flex justify-between space-x-2">
-                  <div className="flex items-center space-x-4">
-                    <span className={cn('font-semibold', scoreColors[key])}>{key + 1}</span>
-                    <div className="flex items-center space-x-2">
-                      <Avatar name={score.pseudo} />
-                      <span className="text-lg">{score.pseudo}</span>
-                      <span className="text-sm text-muted">{score.group}</span>
-                    </div>
-                  </div>
-                  <div className="flex items-center space-x-4">
-                    <div className="flex flex-col">
-                      <span className="text-sm font-semibold">Puzzles</span>
-                      <span className="text-lg text-muted">{score.completions}</span>
-                    </div>
-                    <div className="flex flex-col">
-                      <span className="text-sm font-semibold">Score</span>
-                      <span className="text-lg text-muted">{score.score}</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </main>
-        </section>
-      </div>
-    </div>
-  );
+  return <Leaderboard />;
 }
diff --git a/app/dashboard/puzzles/[id]/page.tsx b/app/dashboard/puzzles/[id]/page.tsx
index 40704d4..68664a6 100644
--- a/app/dashboard/puzzles/[id]/page.tsx
+++ b/app/dashboard/puzzles/[id]/page.tsx
@@ -23,8 +23,10 @@ export default async function Page({ params }: { params: { id: number } }) {
   return <Puzzle puzzle={puzzle} />;
 }
 
+// export const dynamicParams = true;
+
 // export async function generateStaticParams() {
 //   const { puzzles } = await getPuzzles();
 //   // every id is a number, but we need to return a string
-//   return puzzles.map((puzzle) => ({ id: puzzle.id.toString() }));
+//   return puzzles.flatMap((puzzle) => ({ id: puzzle.id.toString() }));
 // }
diff --git a/app/dashboard/puzzles/page.tsx b/app/dashboard/puzzles/page.tsx
index 1e1db4f..29f9ba8 100644
--- a/app/dashboard/puzzles/page.tsx
+++ b/app/dashboard/puzzles/page.tsx
@@ -1,4 +1,3 @@
-import { getPuzzles } from '@/lib/puzzles';
 import Puzzles from '@/ui/Puzzles';
 
 export const metadata = {
@@ -6,10 +5,9 @@ export const metadata = {
 };
 
 export default async function Page() {
-  const data = await getPuzzles();
   return (
     <div className="flex flex-col space-y-6">
-      <Puzzles data={data} />
+      <Puzzles />
     </div>
   );
 }
diff --git a/lib/hooks/use-leaderboard.ts b/lib/hooks/use-leaderboard.ts
new file mode 100644
index 0000000..fb11515
--- /dev/null
+++ b/lib/hooks/use-leaderboard.ts
@@ -0,0 +1,6 @@
+import useSWR from 'swr';
+import { getScores } from '../leaderboard';
+
+export function useLeaderboard() {
+  return useSWR('leaderboard', () => getScores());
+}
diff --git a/lib/puzzles.ts b/lib/puzzles.ts
index 9505794..5b374d7 100644
--- a/lib/puzzles.ts
+++ b/lib/puzzles.ts
@@ -17,8 +17,6 @@ export const getChapters = async (): Promise<Chapter[]> => {
 
   chapters = chapters.filter((chapter: Chapter) => chapter.id !== 0);
 
-  console.log(chapters);
-
   return chapters as Chapter[];
 };
 
diff --git a/middleware.ts b/middleware.ts
index b7cf541..3c074e8 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -20,8 +20,6 @@ export async function middleware(req: NextRequest) {
   else if (req.nextUrl.pathname.includes('sign') && token)
     return NextResponse.redirect(getURL('/dashboard'));
 
-  res.headers.set('Authorization', `Bearer ${token}`);
-
   return res;
 }
 
diff --git a/styles/globals.css b/styles/globals.css
index 9ed3a33..fe01a95 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -5,6 +5,5 @@
 @layer components {
   .console {
     @apply relative top-0.5 inline-block;
-    /* make it hidden then visible every seconde */
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index a342765..b160c52 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -29,8 +29,8 @@ module.exports = {
           0: 'hsl(258deg 8% 100%)'
         },
         brand: {
-          DEFAULT: '#1c56cb',
-          accent: '#236bfe'
+          DEFAULT: '#5049ca',
+          accent: '#913fb6'
         },
         success: {
           DEFAULT: 'hsl(104deg 39% 59%)',
@@ -55,11 +55,6 @@ module.exports = {
         highlight: {
           primary: 'hsl(258deg 15% 17%)',
           secondary: 'hsl(258deg 10% 46%)'
-        },
-        product: {
-          ignite: 'hsl(8deg 89% 57%)',
-          pipe: 'hsl(214deg 100% 58%)',
-          channels: 'hsl(46deg 74% 51%)'
         }
       },
       backgroundColor: {
diff --git a/tsconfig.json b/tsconfig.json
index 597f483..8eac0d6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "downlevelIteration": true,
     "plugins": [
       {
         "name": "next"
diff --git a/ui/Button.tsx b/ui/Button.tsx
index 2ec101f..270ce0f 100644
--- a/ui/Button.tsx
+++ b/ui/Button.tsx
@@ -14,7 +14,7 @@ const Button = forwardRef<
       {
         'bg-highlight-primary hover:bg-highlight-primary/60': kind === 'default',
         'bg-error hover:bg-error/60': kind === 'danger',
-        'bg-brand hover:bg-brand/60': kind === 'brand'
+        'bg-gradient-to-tl from-brand to-brand-accent hover:bg-opacity-80': kind === 'brand'
       },
       className
     )}
diff --git a/ui/Input.tsx b/ui/Input.tsx
index cea1335..dd4f0d5 100644
--- a/ui/Input.tsx
+++ b/ui/Input.tsx
@@ -14,7 +14,7 @@ const Input = forwardRef<
     <Label label={label} description={description} required={props.required} className={className}>
       <input
         ref={ref}
-        className="w-full rounded-md border border-primary-600 bg-highlight-primary px-5 py-2.5 text-sm font-medium outline-none focus:border-brand focus:bg-primary-800 disabled:opacity-50"
+        className="w-full rounded-md border border-primary-600 bg-highlight-primary px-5 py-2.5 text-sm font-medium focus:border-brand focus:bg-primary-800 focus:outline-none disabled:opacity-50"
         {...props}
       />
     </Label>
diff --git a/ui/Leaderboard.tsx b/ui/Leaderboard.tsx
new file mode 100644
index 0000000..504f4a1
--- /dev/null
+++ b/ui/Leaderboard.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { useLeaderboard } from '@/lib/hooks/use-leaderboard';
+import { cn } from '@/lib/utils';
+import Avatar from './Avatar';
+import Select from './Select';
+
+// TODO: Generate this later
+const scoreColors = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
+
+// TODO: Generate this later
+export const options = [
+  { value: '1i1', title: '1I1' },
+  { value: '1i2', title: '1I2' },
+  { value: '1i3', title: '1I3' },
+  { value: '1i4', title: '1I4' },
+  { value: '1i5', title: '1I5' },
+  { value: '1i6', title: '1I6' },
+  { value: '1i7', title: '1I7' },
+  { value: '1i8', title: '1I8' }
+];
+
+export default function Leaderboard() {
+  const { data, isLoading } = useLeaderboard();
+  return (
+    <div className="flex h-full w-full flex-col space-y-4">
+      <div className="w-full">
+        <section className="flex flex-col space-y-4">
+          <header className="flex items-center justify-between">
+            <div>
+              <h3 className="text-xl font-semibold">Tableau des scores</h3>
+              <p className="hidden text-muted sm:block">
+                Suivez la progression des élèves en direct
+              </p>
+            </div>
+            <Select className="w-28" options={options} />
+          </header>
+          <main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
+            {(!isLoading &&
+              data?.map((score, key) => (
+                <div key={key} className="flex flex-col space-y-2">
+                  <div className="flex justify-between space-x-2">
+                    <div className="flex items-center space-x-4">
+                      <span className={cn('font-semibold', scoreColors[key])}>{key + 1}</span>
+                      <div className="flex items-center space-x-2">
+                        <Avatar name={score.pseudo} />
+                        <span className="text-lg">{score.pseudo}</span>
+                        <span className="text-sm text-muted">{score.group}</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-4">
+                      <div className="flex flex-col">
+                        <span className="text-sm font-semibold">Puzzles</span>
+                        <span className="text-lg text-muted">{score.completions}</span>
+                      </div>
+                      <div className="flex flex-col">
+                        <span className="text-sm font-semibold">Score</span>
+                        <span className="text-lg text-muted">{score.score}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))) ||
+              [...Array(20).keys()].map((i) => (
+                <span
+                  key={i}
+                  className="inline-block h-12 animate-pulse rounded-lg bg-primary-600"
+                  style={{
+                    animationDelay: `${i * 0.05}s`,
+                    animationDuration: '1s'
+                  }}
+                />
+              ))}
+          </main>
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/Puzzle.tsx b/ui/Puzzle.tsx
index 709f55f..ae66e31 100644
--- a/ui/Puzzle.tsx
+++ b/ui/Puzzle.tsx
@@ -3,6 +3,7 @@
 import type { Puzzle as PuzzleType } from '@/lib/puzzles';
 import { notFound } from 'next/navigation';
 import { useForm } from 'react-hook-form';
+import cookies from 'js-cookie';
 
 import Button from './Button';
 import Input from './Input';
@@ -10,6 +11,7 @@ import ToHTML from './ToHTML';
 
 type PuzzleData = {
   answer: string;
+  filename: string;
   code_file: File[];
 };
 
@@ -26,6 +28,7 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
   } = useForm<PuzzleData>({
     defaultValues: {
       answer: '',
+      filename: '',
       code_file: undefined
     }
   });
@@ -34,11 +37,15 @@ export default function Puzzle({ puzzle }: { puzzle: PuzzleType }) {
     const formData = new FormData();
 
     formData.append('answer', data.answer);
+    formData.append('filename', data.code_file[0].name);
     formData.append('code_file', data.code_file[0]);
 
     const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/puzzleResponse/${puzzle.id}`, {
       method: 'POST',
-      body: formData
+      body: formData,
+      headers: {
+        Authorization: `Bearer ${cookies.get('token')}}`
+      }
     });
 
     if (res.ok) {
diff --git a/ui/Puzzles.tsx b/ui/Puzzles.tsx
index 08ae810..42982a2 100644
--- a/ui/Puzzles.tsx
+++ b/ui/Puzzles.tsx
@@ -1,38 +1,68 @@
 'use client';
 
-import { Chapter, Puzzle } from '@/lib/puzzles';
+import { usePuzzles } from '@/lib/hooks/use-puzzles';
 import AppLink from './AppLink';
 import Icon from './Icon';
 
-export default function Puzzles({ data }: { data: { chapters: Chapter[]; puzzles: Puzzle[] } }) {
-  // const { data, isLoading } = usePuzzles();
+export default function Puzzles() {
+  const { data, isLoading } = usePuzzles();
   return (
     <>
-      {data?.chapters?.map((chapter) => (
-        <div key={chapter.id} className="flex flex-col space-y-4">
-          <div className="flex items-center justify-between">
-            <h3 className="text-2xl font-semibold">
-              Chapitre {chapter.id} - {chapter.name}
-            </h3>
-            <div className="h-1 w-1/4 rounded-lg bg-gray-200">
-              <div className="h-1 w-1/2 rounded-lg bg-brand" />
+      {(!isLoading &&
+        data?.chapters?.map((chapter) => (
+          <div key={chapter.id} className="flex flex-col space-y-4">
+            <div className="flex items-center justify-between">
+              <h3 className="text-xl font-semibold sm:text-2xl">
+                Chapitre {chapter.id} - {chapter.name}
+              </h3>
+              <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>
+            <ul className="flex flex-col space-y-4">
+              {data?.puzzles.map((puzzle) => (
+                <AppLink key={puzzle.id} href={`/dashboard/puzzles/${puzzle.id}`}>
+                  <li className="group flex items-center justify-between rounded-md bg-primary-700 p-4 font-code hover:bg-primary-600">
+                    <span className="text-base font-semibold">{puzzle.name}</span>
+                    <Icon
+                      className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
+                      name="arrow-right-line"
+                    />
+                  </li>
+                </AppLink>
+              ))}
+            </ul>
           </div>
-          <ul className="flex flex-col space-y-4">
-            {data?.puzzles.map((puzzle) => (
-              <AppLink key={puzzle.id} href={`/dashboard/puzzles/${puzzle.id}`}>
-                <li className="group flex justify-between rounded-md bg-primary-700 p-4 font-code hover:bg-primary-600">
-                  <span className="font-semibold">{puzzle.name}</span>
-                  <Icon
-                    className="-translate-x-2 transform-gpu duration-300 group-hover:translate-x-0"
-                    name="arrow-right-line"
+        ))) || (
+        <div className="flex flex-col space-y-6">
+          {[...Array(3).keys()].map((i) => (
+            <div key={i} className="flex flex-col space-y-4">
+              <div className="flex items-center justify-between">
+                <span className="inline-block h-8 w-1/2 rounded-lg bg-primary-600" />
+                <span
+                  className="inline-block h-1 w-1/4 animate-pulse rounded-lg bg-primary-600"
+                  style={{
+                    animationDelay: `${i * 0.05}s`,
+                    animationDuration: '1s'
+                  }}
+                />
+              </div>
+              <ul className="flex flex-col space-y-4">
+                {[...Array(7).keys()].map((j) => (
+                  <span
+                    key={j}
+                    className="inline-block h-14 animate-pulse rounded-lg bg-primary-600"
+                    style={{
+                      animationDelay: `${j * 0.05}s`,
+                      animationDuration: '1s'
+                    }}
                   />
-                </li>
-              </AppLink>
-            ))}
-          </ul>
+                ))}
+              </ul>
+            </div>
+          ))}
         </div>
-      ))}
+      )}
     </>
   );
 }