From 24e55c2ed3abc92c7d1676e8ecae7437e1fc3276 Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Fri, 27 Jan 2023 23:12:42 +0100
Subject: [PATCH] :goal_net: Added error-catching to user-view

---
 .../src/routes/user/[user_id]/+page.svelte    | 222 +++++++++---------
 frontend/src/routes/user/[user_id]/+page.ts   |   7 +-
 2 files changed, 122 insertions(+), 107 deletions(-)

diff --git a/frontend/src/routes/user/[user_id]/+page.svelte b/frontend/src/routes/user/[user_id]/+page.svelte
index 07dcd2c..ad049e2 100644
--- a/frontend/src/routes/user/[user_id]/+page.svelte
+++ b/frontend/src/routes/user/[user_id]/+page.svelte
@@ -34,125 +34,92 @@
 </script>
 
 <svelte:head>
-	<title>ClassQuiz - @{data.user.username}</title>
+	<title>ClassQuiz - {data.user.username ? `@${data.user.username}` : 'User not found'}</title>
 </svelte:head>
 
 <div class="h-full">
 	<div class="grid grid-cols-6 h-full">
 		<div class="pl-2">
-			<div class="flex justify-center">
-				<img src={`/api/v1/users/avatar/${data.user.id}`} alt="profile" />
-			</div>
-			<h2 class="text-3xl text-center">
-				@{data.user.username}
-			</h2>
-			<p class="italic text-center">
-				Joined on {new Date(data.user.created_at).toLocaleDateString()}
-			</p>
+			{#if data.user.username === undefined}
+				<h2 class="text-4xl text-center p-4">User not found</h2>
+			{:else}
+				<div class="flex justify-center">
+					<img src={`/api/v1/users/avatar/${data.user.id}`} alt="profile" />
+				</div>
+				<h2 class="text-3xl text-center">
+					@{data.user.username}
+				</h2>
+				<p class="italic text-center">
+					Joined on {new Date(data.user.created_at).toLocaleDateString()}
+				</p>
+			{/if}
 		</div>
 		<div
 			class="col-start-2 col-end-7 border-l border-black h-full p-4 overflow-y-scroll flex flex-col gap-4"
 		>
-			{#each data.quizzes as quiz}
-				<div
-					class="rounded-lg border-2 border-black hover:outline transition-all outline-[#B07156] -outline-offset-2 outline-8"
-				>
-					<div class="grid grid-cols-6 h-[25vh]">
-						<!--						<p
-													style='writing-mode: vertical-lr'
-													class='text-center h-full text-xl p-2'
-												>
-													{@html quiz.title}
-												</p>-->
-						<div class="col-start-2 col-end-6">
-							<h3 class="text-center text-2xl">{@html quiz.title}</h3>
-							<p class="text-center">
-								{@html quiz.description}
-							</p>
-							{#if quiz.cover_image}
-								<div class="flex justify-center align-middle items-center">
-									<div class="h-[20vh] m-auto w-auto max-h-[18vh]">
-										<img
-											class="max-h-full max-w-full  block"
-											src={quiz.cover_image}
-											alt="Not provided"
-											loading="lazy"
-										/>
-									</div>
-								</div>
-							{/if}
-						</div>
-
-						<!--						<div class='flex justify-end'>
-													<p
-														style='writing-mode: sideways-lr'
-														class='text-center text-xl p-2'
+			{#if data.quizzes.length === 0}
+				<p class="text-center text-4xl">No original quizzes found...</p>
+			{:else}
+				{#each data.quizzes as quiz}
+					<div
+						class="rounded-lg border-2 border-black hover:outline transition-all outline-[#B07156] -outline-offset-2 outline-8"
+					>
+						<div class="grid grid-cols-6 h-[25vh]">
+							<!--						<p
+														style='writing-mode: vertical-lr'
+														class='text-center h-full text-xl p-2'
 													>
 														{@html quiz.title}
-													</p>
-												</div>-->
-					</div>
-					<div class="flex justify-center">
-						<a href="/view/{quiz.id}" class="action-button w-1/6">{$t('words.view')}</a>
-					</div>
-					<div class="flex justify-center pb-10 pt-8">
-						<div class="grid grid-cols-2 gap-3 w-1/3">
-							{#if $signedIn}
-								<button
-									on:click={() => {
-										start_game = quiz.id;
-									}}
-									class="action-button"
-								>
-									{$t('words.start')}
-								</button>
-								<a
-									href="/api/v1/eximport/{quiz.id}"
-									aria-label="Download the quiz"
-									class="flex justify-center px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
-									><!-- heroicons/download -->
-									<svg
-										class="w-5 h-5"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-										xmlns="http://www.w3.org/2000/svg"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-										/>
-									</svg>
-								</a>
-							{:else}
-								<div
-									use:tippy={{
-										content: 'You need be signed in to start a game.'
-									}}
-									class="w-full"
-								>
+													</p>-->
+							<div class="col-start-2 col-end-6">
+								<h3 class="text-center text-2xl">{@html quiz.title}</h3>
+								<p class="text-center">
+									{@html quiz.description}
+								</p>
+								{#if quiz.cover_image}
+									<div class="flex justify-center align-middle items-center">
+										<div class="h-[20vh] m-auto w-auto max-h-[18vh]">
+											<img
+												class="max-h-full max-w-full  block"
+												src={quiz.cover_image}
+												alt="Not provided"
+												loading="lazy"
+											/>
+										</div>
+									</div>
+								{/if}
+							</div>
+
+							<!--						<div class='flex justify-end'>
+														<p
+															style='writing-mode: sideways-lr'
+															class='text-center text-xl p-2'
+														>
+															{@html quiz.title}
+														</p>
+													</div>-->
+						</div>
+						<div class="flex justify-center">
+							<a href="/view/{quiz.id}" class="action-button w-1/6"
+								>{$t('words.view')}</a
+							>
+						</div>
+						<div class="flex justify-center pb-10 pt-8">
+							<div class="grid grid-cols-2 gap-3 w-1/3">
+								{#if $signedIn}
 									<button
 										on:click={() => {
 											start_game = quiz.id;
 										}}
-										disabled
-										class="action-button w-full"
+										class="action-button"
 									>
 										{$t('words.start')}
 									</button>
-								</div>
-								<div
-									use:tippy={{
-										content: 'You need be signed in to download a game.'
-									}}
-									class="w-full"
-								>
-									<button
-										disabled
-										class="action-button w-full flex justify-center"
-									>
+									<a
+										href="/api/v1/eximport/{quiz.id}"
+										aria-label="Download the quiz"
+										class="flex justify-center px-4 py-2 leading-5 text-black dark:text-white transition-colors duration-200 transform bg-gray-50 dark:bg-gray-700 rounded text-center hover:bg-gray-300 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-gray-600"
+										><!-- heroicons/download -->
 										<svg
 											class="w-5 h-5"
 											fill="none"
@@ -167,13 +134,56 @@
 												d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
 											/>
 										</svg>
-									</button>
-								</div>
-							{/if}
+									</a>
+								{:else}
+									<div
+										use:tippy={{
+											content: 'You need be signed in to start a game.'
+										}}
+										class="w-full"
+									>
+										<button
+											on:click={() => {
+												start_game = quiz.id;
+											}}
+											disabled
+											class="action-button w-full"
+										>
+											{$t('words.start')}
+										</button>
+									</div>
+									<div
+										use:tippy={{
+											content: 'You need be signed in to download a game.'
+										}}
+										class="w-full"
+									>
+										<button
+											disabled
+											class="action-button w-full flex justify-center"
+										>
+											<svg
+												class="w-5 h-5"
+												fill="none"
+												stroke="currentColor"
+												viewBox="0 0 24 24"
+												xmlns="http://www.w3.org/2000/svg"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													stroke-width="2"
+													d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+												/>
+											</svg>
+										</button>
+									</div>
+								{/if}
+							</div>
 						</div>
 					</div>
-				</div>
-			{/each}
+				{/each}
+			{/if}
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/routes/user/[user_id]/+page.ts b/frontend/src/routes/user/[user_id]/+page.ts
index 7aadc47..3c8e1a9 100644
--- a/frontend/src/routes/user/[user_id]/+page.ts
+++ b/frontend/src/routes/user/[user_id]/+page.ts
@@ -16,7 +16,12 @@ export const load = async ({ params, fetch }) => {
 		};
 	}
 	const quiz_req = await fetch(`/api/v1/community/quizzes/${params.user_id}?imported=false`);
-	const quizzes = await quiz_req.json();
+	let quizzes;
+	if (quiz_req.status === 404) {
+		quizzes = [];
+	} else {
+		quizzes = await quiz_req.json();
+	}
 	return {
 		user,
 		quizzes