From d475a08790311c1ee1ddb5fbd13eef2ca0181e60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Tue, 11 Apr 2023 11:22:32 +0200
Subject: [PATCH] Added group check

---
 ui/Puzzles.tsx | 333 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 268 insertions(+), 65 deletions(-)

diff --git a/ui/Puzzles.tsx b/ui/Puzzles.tsx
index b3d8c3c..62ae387 100644
--- a/ui/Puzzles.tsx
+++ b/ui/Puzzles.tsx
@@ -1,23 +1,40 @@
 'use client';
 
+import { UserContext } from '@/context/user';
+import { useGroups } from '@/lib/hooks/use-groups';
 import { usePuzzles } from '@/lib/hooks/use-puzzles';
-import { type Chapter } from '@/lib/puzzles';
+import type { Chapter, Puzzle } 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 });
 
-  // 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
+  const [isOpen, setIsOpen] = useState<boolean[]>([]);
 
-  function isChapterLocked(chapter: Chapter) {
+  function handleClick(index: number) {
+    setIsOpen((prevState) => {
+      const newState = [...prevState];
+      newState[index] = !newState[index];
+      return newState;
+    });
+  }
+
+  console.log(me);
+
+  function isInEventGroup(chapter: Chapter) {
     return (
-      chapter.startDay &&
-      chapter.endDay &&
-      new Date() > new Date(chapter.startDay) &&
-      new Date() < new Date(chapter.endDay)
+      chapter.startDate &&
+      chapter.endDate &&
+      me?.groups?.some((group) => group.chapter && group.chapter === chapter.id)
     );
   }
 
@@ -26,65 +43,63 @@ 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 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 className="flex flex-col justify-between lg:flex-row lg:items-center">
+              <div className="flex items-center gap-x-2">
+                <h3 className="text-xl font-semibold sm:text-2xl">
+                  Chapitre {chapter.id} - {chapter.name}{' '}
+                </h3>
+                {!isInEventGroup(chapter) && (
+                  <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>
-            <ul
-              className={cn('flex flex-col space-y-4', {
-                // If the chapter is locked i want to add a class to li children to make them unclickable
-                'pointer-events-none': isChapterLocked(chapter)
-              })}
-            >
-              {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>
+            {isInEventGroup(chapter) && (
+              <ul className="flex flex-col space-y-4">
+                {chapter.puzzles &&
+                  chapter.puzzles.map((puzzle) => (
+                    <PuzzleProp key={puzzle.id} puzzle={puzzle} chapter={chapter} />
+                  ))}
+              </ul>
+            )}
           </div>
         ))) || (
         <div className="flex flex-col space-y-6">
@@ -119,3 +134,191 @@ 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>
+  );
+}