src/app.d.ts

@@ -5,7 +5,10 @@ import type { User } from '$lib/types';
 // for information about these interfaces
 declare global {
 	namespace App {
-		// interface Error {}
+		interface Error {
+			message: string;
+			errorId: string;
+		}
 		interface Locals {
 			user: User | null;
 		}
@@ -16,4 +19,5 @@ declare global {
 	}
 }
 
-export {};
+export { };
+

src/hooks.server.ts

@@ -1,4 +1,4 @@
-import type { Handle } from '@sveltejs/kit';
+import type { Handle, HandleFetch, HandleServerError } from '@sveltejs/kit';
 
 import { API_URL } from '$env/static/private';
 
@@ -30,3 +30,32 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 	return resolve(event);
 };
+
+export const handleFetch: HandleFetch = async ({ request, fetch, event: { cookies } }) => {
+
+	const session = cookies.get('session');
+
+	if (!session) {
+		return fetch(request);
+	}
+
+	request = new Request(request, {
+		headers: {
+			...request.headers,
+			Authorization: `Bearer ${session}`
+		},
+	});
+
+	return fetch(request);
+}
+
+export const handleError: HandleServerError = async ({ error, status }) => {
+	const errorId = crypto.randomUUID();
+
+	console.error(`Error ID: ${errorId} - Status: ${status} - ${error}`);
+
+	return {
+		message: 'Whoops!',
+		errorId,
+	};
+};

src/routes/(app)/+page.server.ts

@@ -6,17 +6,11 @@ import type { PageServerLoad } from './$types';
 import type { Chapter } from '$lib/types';
 import { handleRedirect } from '$lib/utils';
 
-export const load = (async ({ url, fetch, cookies, locals: { user } }) => {
+export const load = (async ({ url, fetch, locals: { user } }) => {
 
 	if (!user) redirect(302, handleRedirect('login', url));
 
-	const session = cookies.get('session');
+	const res = await fetch(`${API_URL}/chapters`);
-
-	const res = await fetch(`${API_URL}/chapters`, {
-		headers: {
-			Authorization: `Bearer ${session}`
-		}
-	});
 
 	if (!res.ok) {
 		return {

src/routes/(app)/chapters/+page.server.ts

@@ -6,17 +6,11 @@ import type { PageServerLoad } from './$types';
 import type { Chapter } from '$lib/types';
 import { handleRedirect } from '$lib/utils';
 
-export const load = (async ({ url, locals: { user }, fetch, cookies }) => {
+export const load = (async ({ url, locals: { user }, fetch }) => {
 
 	if (!user) redirect(302, handleRedirect('login', url));
 
-	const session = cookies.get('session');
+	const res = await fetch(`${API_URL}/chapters`);
-
-	const res = await fetch(`${API_URL}/chapters`, {
-		headers: {
-			Authorization: `Bearer ${session}`
-		}
-	});
 
 	if (!res.ok) {
 		return {

src/routes/(app)/chapters/[chapterId]/+page.server.ts

@@ -6,17 +6,11 @@ import type { Chapter } from '$lib/types';
 import { handleRedirect } from '$lib/utils';
 import { redirect } from '@sveltejs/kit';
 
-export const load = (async ({ url, locals: { user }, fetch, cookies, params: { chapterId } }) => {
+export const load = (async ({ url, locals: { user }, fetch, params: { chapterId } }) => {
 
 	if (!user) redirect(302, handleRedirect('login', url));
 
-	const session = cookies.get('session');
+	const res = await fetch(`${API_URL}/chapter/${chapterId}`);
-
-	const res = await fetch(`${API_URL}/chapter/${chapterId}`, {
-		headers: {
-			Authorization: `Bearer ${session}`
-		}
-	});
 
 	if (!res.ok) {
 		redirect(302, '/chapters');

src/routes/(app)/chapters/[chapterId]/groups/+page.server.ts

@@ -6,17 +6,11 @@ import type { Chapter, Group } from '$lib/types';
 import { handleRedirect } from '$lib/utils';
 import { redirect } from '@sveltejs/kit';
 
-export const load: PageServerLoad = async ({ url, locals: { user }, fetch, cookies, params: { chapterId } }) => {
+export const load: PageServerLoad = async ({ url, locals: { user }, fetch, params: { chapterId } }) => {
 
   if (!user) redirect(302, handleRedirect('login', url));
 
-  const session = cookies.get('session');
+  let res = await fetch(`${API_URL}/chapter/${chapterId}`);
-
-  let res = await fetch(`${API_URL}/chapter/${chapterId}`, {
-    headers: {
-      Authorization: `Bearer ${session}`
-    }
-  });
 
   if (!res.ok) {
     redirect(302, '/chapters');
@@ -28,12 +22,7 @@ export const load: PageServerLoad = async ({ url, locals: { user }, fetch, cooki
     redirect(302, '/chapters');
   }
 
-  res = await fetch(`${API_URL}/groups/${chapter.id}`, {
+  res = await fetch(`${API_URL}/groups/${chapter.id}`);
-    headers:
-    {
-      Authorization: `Bearer ${session}`
-    }
-  });
 
   if (!res.ok) {
     redirect(302, `/chapters/${chapterId}`);
@@ -50,19 +39,14 @@ export const load: PageServerLoad = async ({ url, locals: { user }, fetch, cooki
 
 
 export const actions: Actions = {
-  join: async ({ fetch, params: { chapterId }, cookies, request }) => {
+  join: async ({ fetch, params: { chapterId }, request }) => {
 
     const data = await request.formData();
 
     const name = data.get('name') as string;
 
-    const session = cookies.get('session');
-
     const res = await fetch(`${API_URL}/groupJoin`, {
       method: 'POST',
-      headers: {
-        Authorization: `Bearer ${session}`
-      },
       body: JSON.stringify({
         name,
         chapter: parseInt(chapterId),
@@ -95,19 +79,14 @@ export const actions: Actions = {
       message: "Une erreur s'est produite"
     };
   },
-  leave: async ({ fetch, params: { chapterId }, cookies, request }) => {
+  leave: async ({ fetch, params: { chapterId }, request }) => {
 
     const data = await request.formData();
 
     const name = data.get('name') as string;
 
-    const session = cookies.get('session');
-
     const res = await fetch(`${API_URL}/groupQuit`, {
       method: 'POST',
-      headers: {
-        Authorization: `Bearer ${session}`
-      },
       body: JSON.stringify({
         name,
         chapter: parseInt(chapterId),

src/routes/(app)/chapters/[chapterId]/groups/new/+page.server.ts

@@ -25,14 +25,12 @@ export const load: PageServerLoad = async ({ url, params: { chapterId }, locals:
 };
 
 export const actions: Actions = {
-  default: async ({ url, locals: { user }, fetch, request, cookies, params: { chapterId } }) => {
+  default: async ({ url, locals: { user }, fetch, request, params: { chapterId } }) => {
 
     if (!user) redirect(302, handleRedirect('login', url));
 
     if (!chapterId) redirect(302, '/chapters');
 
-    const session = cookies.get('session');
-
     const form = await superValidate(request, zod(groupSchema));
 
     if (!form.valid) {
@@ -41,9 +39,6 @@ export const actions: Actions = {
 
     const res = await fetch(`${API_URL}/groupCreate`, {
       method: 'POST',
-      headers: {
-        Authorization: `Bearer ${session}`
-      },
       body: JSON.stringify({
         ...form.data,
         chapter: parseInt(chapterId)

src/routes/(app)/chapters/[chapterId]/leaderboard/+page.server.ts

@@ -5,19 +5,13 @@ import type { PageServerLoad } from './$types';
 import type { LeaderboardEvent } from '$lib/types';
 import { handleRedirect } from '$lib/utils';
 
-export const load: PageServerLoad = async ({ url, locals: { user }, fetch, cookies, params: { chapterId } }) => {
+export const load: PageServerLoad = async ({ url, locals: { user }, fetch, params: { chapterId } }) => {
 
 	if (!user) redirect(302, handleRedirect('login', url));
 
 	if (!chapterId) redirect(302, '/');
 
-	const session = cookies.get('session');
+	const res = await fetch(`${API_URL}/leaderboard/${chapterId}`);
-
-	const res = await fetch(`${API_URL}/leaderboard/${chapterId}`, {
-		headers: {
-			Authorization: `Bearer ${session}`
-		}
-	});
 
 	if (!res.ok) return {
 		leaderboard: []

src/routes/(app)/chapters/[chapterId]/puzzle/[puzzleId]/+page.server.ts

@@ -16,11 +16,7 @@ export const load = (async ({ url, locals: { user }, fetch, cookies, params: { c
 		redirect(302, `/chapters/${chapterId}`);
 	}
 
-	let res = await fetch(`${API_URL}/chapter/${chapterId}`, {
+	let res = await fetch(`${API_URL}/chapter/${chapterId}`);
-		headers: {
-			Authorization: `Bearer ${session}`
-		}
-	});
 
 	if (!res.ok) {
 		redirect(302, `/chapters`);
@@ -39,20 +35,22 @@ export const load = (async ({ url, locals: { user }, fetch, cookies, params: { c
 		redirect(302, `/chapters/${chapterId}`);
 	}
 
-	res = await fetch(`${API_URL}/puzzle/${puzzleId}`, {
+	res = await fetch(`${API_URL}/puzzle/${puzzleId}`);
-		headers: {
-			Authorization: `Bearer ${session}`
-		}
-	});
 
 	if (!res.ok) {
-		error(404, 'Puzzle not found');
+		error(404, {
+			errorId: 'puzzle_not_found',
+			message: 'Puzzle not found'
+		});
 	}
 
 	const puzzle: Puzzle = await res.json();
 
 	if (!puzzle) {
-		error(404, 'Puzzle not found');
+		error(404, {
+			errorId: 'puzzle_not_found',
+			message: 'Puzzle not found'
+		});
 	}
 
 	const content = await compile(puzzle.content);

src/routes/(app)/leaderboard/+page.server.ts

@@ -6,17 +6,11 @@ import type { PageServerLoad } from './$types';
 import type { Leaderboard } from '$lib/types';
 import { handleRedirect } from '$lib/utils';
 
-export const load = (async ({ url, locals: { user }, fetch, cookies }) => {
+export const load = (async ({ url, locals: { user }, fetch }) => {
 
 	if (!user) redirect(302, handleRedirect('login', url));
 
-	const session = cookies.get('session');
+	const res = await fetch(`${API_URL}/leaderboard`);
-
-	const res = await fetch(`${API_URL}/leaderboard`, {
-		headers: {
-			Authorization: `Bearer ${session}`
-		}
-	});
 
 	if (!res.ok) {
 		return {

src/routes/(app)/settings/+layout.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import { Button } from '$lib/components/ui/button';
+	import { cn } from '$lib/utils';
 
 	let routes = [
 		{
@@ -14,7 +16,13 @@
 		<ul class="flex gap-2 lg:flex-col">
 			{#each routes as { name, href } (name)}
 				<li>
-					<Button class="w-full" variant="outline" {href}>{name}</Button>
+					<Button
+						class={cn('w-full', {
+							'bg-secondary': $page.url.pathname === href
+						})}
+						variant="outline"
+						{href}>{name}</Button
+					>
 				</li>
 			{/each}
 		</ul>

src/routes/(app)/settings/+page.server.ts

@@ -20,12 +20,10 @@ export const load: PageServerLoad = async ({ url, locals: { user } }) => {
 };
 
 export const actions: Actions = {
-	default: async ({ request, cookies, locals: { user } }) => {
+	default: async ({ request, fetch, locals: { user } }) => {
 
 		if (!user) return fail(401);
 
-		const session = cookies.get('session');
-
 		const form = await superValidate(request, zod(settingSchema));
 
 		if (!form.valid) {
@@ -34,9 +32,6 @@ export const actions: Actions = {
 
 		const res = await fetch(`${API_URL}/user/settings`, {
 			method: 'POST',
-			headers: {
-				Authorization: `Bearer ${session}`
-			},
 			body: JSON.stringify({
 				...form.data
 			})

src/routes/+error.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+	import Button from '$lib/components/ui/button/button.svelte';
+</script>
+
+<div class="flex min-h-screen items-center justify-center">
+	<div class="text-center">
+		<h1 class="text-6xl font-bold text-red-500">Oops!</h1>
+		<p class="mt-4 text-xl">Apparement tu as navigué en eau trouble...</p>
+		<Button class="mt-4" href="/">Retour au port</Button>
+		<p class="mt-4 text-xs text-muted-foreground">{$page.error?.errorId}</p>
+	</div>
+</div>