From bf6c76554f03e1554057095a7d3449d97f46473b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Sat, 9 Sep 2023 21:23:58 +0200
Subject: [PATCH] fix: chapter

---
 src/app.css                                   |  6 +--
 src/lib/components/Chapter.svelte             | 51 ++++++++++---------
 src/lib/stores/Register.ts                    | 19 -------
 src/lib/types/Database.ts                     |  3 +-
 .../chapters/[chapterId]/+page.server.ts      |  4 ++
 .../chapters/[chapterId]/+page.svelte         | 48 -----------------
 .../puzzle/[puzzleId]/+page.server.ts         | 12 +++--
 .../puzzle/[puzzleId]/+page.svelte            |  5 +-
 src/routes/sign-up/+page.svelte               | 23 ++++-----
 9 files changed, 58 insertions(+), 113 deletions(-)
 delete mode 100644 src/lib/stores/Register.ts

diff --git a/src/app.css b/src/app.css
index eafe054..ab934ea 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
 @font-face {
 	font-family: 'Karrik';
diff --git a/src/lib/components/Chapter.svelte b/src/lib/components/Chapter.svelte
index 5754117..d6f1afe 100644
--- a/src/lib/components/Chapter.svelte
+++ b/src/lib/components/Chapter.svelte
@@ -9,31 +9,34 @@
 
 <li
 	class={cn(
-		'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 hover:bg-primary-600'
-		// 'cursor-not-allowed': !isStarted(chapter)
+		'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
+		{
+			'cursor-not-allowed': !chapter.show,
+			'hover:bg-primary-600': chapter.show,
+		}
 	)}
 >
-	<a class="flex h-full w-full items-center gap-4 p-4" href="/dashboard/chapters/{chapter.id}">
-		<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
-			<h2 class="text-base font-semibold">
-				{chapter.name}
-			</h2>
-			<!-- <div class="flex items-center gap-x-6">
-				{#if puzzle.tags?.length}
-					<div class="flex gap-x-2 text-sm">
-						{#each puzzle.tags as tag}
-							<span
-								class="inline-block rounded-md bg-primary-800 px-2 py-1 text-highlight-secondary"
-							>
-								{tag.name}
-							</span>
-						{/each}
-					</div>
-				{/if}
-			</div> -->
-		</div>
-		<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
-			<ChevronRight />
+	{#if chapter.show}
+		<a
+			class="flex h-full w-full items-center gap-4 p-4"
+			href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
+		>
+			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
+				<h2 class="text-base font-semibold">
+					{chapter.name}
+				</h2>
+			</div>
+			<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
+				<ChevronRight />
+			</span>
+		</a>
+	{:else}
+		<span class="flex h-full w-full items-center gap-4 p-4">
+			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
+				<h2 class="text-base font-semibold">
+					{chapter.name}
+				</h2>
+			</div>
 		</span>
-	</a>
+	{/if}
 </li>
diff --git a/src/lib/stores/Register.ts b/src/lib/stores/Register.ts
deleted file mode 100644
index 763ee86..0000000
--- a/src/lib/stores/Register.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { browser } from '$app/environment';
-import { writable } from 'svelte/store';
-
-const defaultValue = false;
-const initialValue = browser ? window.localStorage.getItem('register') === 'true' : defaultValue;
-
-const register = writable<boolean>(initialValue);
-
-register.subscribe((value) => {
-	if (browser) {
-		window.localStorage.setItem('register', value ? 'true' : 'false');
-	}
-});
-
-export function resetRegister() {
-	register.set(defaultValue);
-}
-
-export default register;
diff --git a/src/lib/types/Database.ts b/src/lib/types/Database.ts
index 8b85147..dff9ef9 100644
--- a/src/lib/types/Database.ts
+++ b/src/lib/types/Database.ts
@@ -47,8 +47,7 @@ export interface Chapter {
 	id: number;
 	name: string;
 	puzzles: Puzzle[];
-	startDate?: string;
-	endDate?: string;
+	show?: boolean;
 }
 
 export interface Tag {
diff --git a/src/routes/dashboard/chapters/[chapterId]/+page.server.ts b/src/routes/dashboard/chapters/[chapterId]/+page.server.ts
index 3476e9a..759c346 100644
--- a/src/routes/dashboard/chapters/[chapterId]/+page.server.ts
+++ b/src/routes/dashboard/chapters/[chapterId]/+page.server.ts
@@ -22,6 +22,10 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId } }) =
 
 	const chapter = (await res.json()) as Chapter;
 
+	if (!chapter || !chapter.show) {
+		throw redirect(302, '/dashboard/chapters');
+	}
+
 	return {
 		chapter
 	};
diff --git a/src/routes/dashboard/chapters/[chapterId]/+page.svelte b/src/routes/dashboard/chapters/[chapterId]/+page.svelte
index 9f3b048..787231c 100644
--- a/src/routes/dashboard/chapters/[chapterId]/+page.svelte
+++ b/src/routes/dashboard/chapters/[chapterId]/+page.svelte
@@ -29,54 +29,6 @@
               </Dialog>
             )} -->
 			</div>
-			<div class="flex flex-col">
-				{#if chapter.startDate && chapter.endDate}
-					<div class="flex items-center justify-start gap-x-2 md:justify-end">
-						<!-- {/* <Icon name="calendar-line" class="text-sm text-muted" /> */} -->
-						<span class="text-sm text-muted">
-							{new Date(chapter.startDate).toLocaleDateString('fr-FR', {
-								day: 'numeric',
-								month: 'long',
-								year: 'numeric',
-								hour: 'numeric',
-								minute: 'numeric'
-							})}{' '}
-							-{' '}
-							{new Date(chapter.endDate).toLocaleDateString('fr-FR', {
-								day: 'numeric',
-								month: 'long',
-								year: 'numeric',
-								hour: 'numeric',
-								minute: 'numeric'
-							})}
-						</span>
-					</div>
-				{:else}
-					<div class="h-1 w-1/4 rounded-lg bg-gray-200">
-						<div class="h-1 w-1/2 rounded-lg bg-gradient-to-tl from-brand to-brand-accent" />
-					</div>
-				{/if}
-				<div class="mt-1 flex justify-start gap-x-2">
-					<!-- {isInEventGroup(chapter) && (
-                <>
-                  <FilterDifficulty
-                    chapters={data}
-                    chapter={chapter}
-                    filter={filterDifficulty}
-                    setFilter={setFilterDifficulty}
-                    setFilterChapter={setFilterChapter}
-                  />
-                  <FilterTags
-                    chapters={data}
-                    chapter={chapter}
-                    filter={filterTags}
-                    setFilter={setFilterTags}
-                    setFilterChapter={setFilterChapter}
-                  />
-                </>
-              )} -->
-				</div>
-			</div>
 		</div>
 		<ul class="mt-4 flex flex-col space-y-4">
 			{#each chapter.puzzles as puzzle}
diff --git a/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.server.ts b/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.server.ts
index b89fa15..704b68c 100644
--- a/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.server.ts
+++ b/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.server.ts
@@ -2,6 +2,7 @@ import { API_URL } from '$env/static/private';
 import { error, redirect, type Actions } from '@sveltejs/kit';
 import type Puzzle from '$lib/components/Puzzle.svelte';
 import type { PageServerLoad } from './$types';
+import type { Chapter } from '$lib/types';
 
 export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzleId } }) => {
 	await parent();
@@ -12,7 +13,6 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
 		throw redirect(303, `/dashboard/chapters/${chapterId}`);
 	}
 
-	// check if puzzle is from the chapter
 	let res = await fetch(`${API_URL}/chapter/${chapterId}`, {
 		headers: {
 			Authorization: `Bearer ${session}`
@@ -23,9 +23,13 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
 		throw redirect(303, `/dashboard/chapters`);
 	}
 
-	const { puzzles } = (await res.json()) as { puzzles: Puzzle[] };
+	const chapter = (await res.json()) as Chapter;
 
-	if (!puzzles.some((puzzle) => puzzle.id === parseInt(puzzleId))) {
+	if (!chapter || !chapter.show) {
+		throw redirect(303, `/dashboard/chapters`);
+	}
+
+	if (!chapter.puzzles.some((puzzle) => puzzle.id === parseInt(puzzleId))) {
 		throw redirect(303, `/dashboard/chapters/${chapterId}`);
 	}
 
@@ -45,6 +49,8 @@ export const load = (async ({ parent, fetch, cookies, params: { chapterId, puzzl
 		throw error(404, 'Puzzle not found');
 	}
 
+	console.log(puzzle.content);
+
 	return {
 		puzzle: puzzle as Puzzle
 	};
diff --git a/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte b/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte
index d0f3369..3043dd4 100644
--- a/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte
+++ b/src/routes/dashboard/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte
@@ -26,8 +26,9 @@
 	};
 
 	const options: MarkedOptions = {
-		breaks: true,
-		renderer
+		breaks: false,
+		renderer,
+		gfm: true
 	};
 </script>
 
diff --git a/src/routes/sign-up/+page.svelte b/src/routes/sign-up/+page.svelte
index 253be5e..11c4be3 100644
--- a/src/routes/sign-up/+page.svelte
+++ b/src/routes/sign-up/+page.svelte
@@ -3,8 +3,6 @@
 
 	import type { ActionData, Snapshot } from './$types';
 
-	import register from '$lib/stores/Register';
-
 	import Button from '$lib/components/ui/Button.svelte';
 	import Input from '$lib/components/ui/Input.svelte';
 	import { fade } from 'svelte/transition';
@@ -15,21 +13,22 @@
 		email: '',
 		firstname: '',
 		lastname: '',
-		pseudo: ''
+		pseudo: '',
+		confirmation: false
 	};
 
 	export const snapshot: Snapshot = {
 		capture: () => data,
 		restore: (value) => (data = value)
 	};
-
-	$: confirmation = $register;
 </script>
 
 <div class="flex h-screen w-full">
 	<div class="flex w-full flex-col items-center justify-center">
 		<div class="flex w-full max-w-xs flex-col gap-4">
-			<h2 class="mx-auto text-xl font-bold">{confirmation ? 'Confirmation' : 'Inscription'}</h2>
+			<h2 class="mx-auto text-xl font-bold">
+				{data.confirmation ? 'Confirmation' : 'Inscription'}
+			</h2>
 			<form
 				class="flex flex-col justify-center gap-2"
 				method="POST"
@@ -37,12 +36,12 @@
 					return async ({ result }) => {
 						switch (result.type) {
 							case 'success':
-								register.set(true);
+								data.confirmation = true;
 								break;
 						}
 					};
 				}}
-				action={confirmation ? '/sign-up?/confirmation' : '/sign-up?/register'}
+				action={data.confirmation ? '/sign-up?/confirmation' : '/sign-up?/confirmation'}
 			>
 				<label for="email">Email</label>
 				<Input
@@ -104,7 +103,7 @@
 					</p>
 				{/if}
 
-				{#if confirmation}
+				{#if data.confirmation}
 					<div
 						class="flex flex-col gap-2"
 						transition:fade={{
@@ -130,17 +129,17 @@
 
 				<Button class="mt-2" variant="brand">
 					<!-- {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} -->
-					{confirmation ? "S'inscrire" : 'Continuer'}
+					{data.confirmation ? "S'inscrire" : 'Continuer'}
 				</Button>
 
 				<ul class="flex justify-between">
 					<li>
 						<a class="text-highlight-secondary hover:text-brand" href="/sign-in">Se connecter</a>
 					</li>
-					{#if confirmation}
+					{#if data.confirmation}
 						<li>
 							<button
-								formaction="/sign-up?/register"
+								formaction="/sign-up?/confirmation"
 								class="text-highlight-secondary hover:text-brand">Pas reçu ?</button
 							>
 						</li>