From 065f517d54efaa001dcf7fe7c27e54182450436d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Fri, 21 Apr 2023 17:03:34 +0200
Subject: [PATCH] Added other filter & animations

---
 app/dashboard/puzzles/page.tsx |  4 ++--
 lib/puzzles.ts                 |  3 ++-
 ui/Puzzles.tsx                 | 17 +++++++++++++++--
 ui/Select.tsx                  |  2 +-
 ui/dashboard/Sidenav.tsx       | 17 ++++++++++-------
 5 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/app/dashboard/puzzles/page.tsx b/app/dashboard/puzzles/page.tsx
index 62bef6c..3a37113 100644
--- a/app/dashboard/puzzles/page.tsx
+++ b/app/dashboard/puzzles/page.tsx
@@ -20,10 +20,10 @@ export default async function Page() {
   }
 
   return (
-    <div className="flex flex-col space-y-6">
+    <section className="flex w-full flex-col space-y-6">
       <SWRFallback fallback={{ ['puzzles']: puzzles }}>
         <Puzzles token={token!} />
       </SWRFallback>
-    </div>
+    </section>
   );
 }
diff --git a/lib/puzzles.ts b/lib/puzzles.ts
index 570162d..c96eb73 100644
--- a/lib/puzzles.ts
+++ b/lib/puzzles.ts
@@ -2,7 +2,8 @@ export const getChapters = async ({ token }: { token: string }): Promise<Chapter
   const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/chapters`, {
     headers: {
       Authorization: `Bearer ${token}`
-    }
+    },
+    cache: 'force-cache'
   });
 
   const chapters = (await res.json()) as Chapter[];
diff --git a/ui/Puzzles.tsx b/ui/Puzzles.tsx
index 6e923a1..ff6e033 100644
--- a/ui/Puzzles.tsx
+++ b/ui/Puzzles.tsx
@@ -43,7 +43,17 @@ export default function Puzzles({ token }: { token: string }) {
 
   const filteredData = useMemo(() => {
     if (filter && filterChapter) {
-      console.log(filter);
+      if (filter === 'completed' || filter === 'no-completed') {
+        return data
+          ?.find((chapter) => chapter.id === filterChapter)
+          ?.puzzles.filter((puzzle) => {
+            if (filter === 'completed') {
+              return puzzle!.score;
+            }
+            return !puzzle!.score;
+          })
+          .map((puzzle) => puzzle);
+      }
       return data
         ?.find((chapter) => chapter.id === filterChapter)
         ?.puzzles.filter((puzzle) => puzzle!.tags!.some((tag) => tag.name === filter))
@@ -193,7 +203,7 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
   return (
     <li
       className={cn(
-        'group relative flex h-full w-full rounded-md border-2 bg-primary-700 font-code hover:bg-primary-600',
+        'group relative flex h-full w-full rounded-md border-2 bg-primary-700 font-code transition-colors duration-150 hover:bg-primary-600',
         {
           'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
           'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
@@ -284,6 +294,9 @@ function FilterChapter({
       return { title: t!.name, value: t!.name };
     }) as { title: string; value: string }[];
 
+
+    options?.unshift({ title: 'Pas encore terminé', value: 'no-completed' });
+  options?.unshift({ title: 'Terminés', value: 'completed' });
   options?.unshift({ title: 'Tout les puzzles', value: '' });
 
   setFilterChapter(chapter.id);
diff --git a/ui/Select.tsx b/ui/Select.tsx
index da9a6eb..c2af9eb 100644
--- a/ui/Select.tsx
+++ b/ui/Select.tsx
@@ -16,7 +16,7 @@ const Select = forwardRef<
     <Label label={label} description={description} required={props.required} className={className}>
       <select
         className={
-          'w-full cursor-pointer overflow-hidden rounded-lg border-2 border-highlight-primary bg-transparent px-5 py-2.5 text-sm font-medium text-secondary opacity-80 outline-none outline-0 transition-opacity  hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50'
+          'w-full cursor-pointer overflow-hidden rounded-lg border-2 border-highlight-primary bg-highlight-primary px-5 py-2.5 text-sm font-medium text-secondary opacity-80 outline-none outline-0 transition-opacity  hover:opacity-100 focus:outline-none disabled:opacity-50'
         }
         {...props}
         ref={ref}
diff --git a/ui/dashboard/Sidenav.tsx b/ui/dashboard/Sidenav.tsx
index d62d80c..39cf498 100644
--- a/ui/dashboard/Sidenav.tsx
+++ b/ui/dashboard/Sidenav.tsx
@@ -99,13 +99,16 @@ function NavItem({
       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,
-        'cursor-not-allowed text-gray-600 hover:text-gray-600': item.disabled,
-        'justify-center lg:justify-start': isOpen,
-        'justify-start sm:justify-center': !isOpen
-      })}
+      className={cn(
+        'flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
+        {
+          'text-muted hover:text-secondary': !isActive,
+          'bg-highlight-primary text-secondary hover:text-white': isActive,
+          'cursor-not-allowed text-gray-600 hover:text-gray-600': item.disabled,
+          'justify-center lg:justify-start': isOpen,
+          'justify-start sm:justify-center': !isOpen
+        }
+      )}
       onClick={onClick}
     >
       <div className="flex items-center space-x-2">