From 0ea683ad811f7cceea74034a38592fc6bf20dee9 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Fri, 23 Feb 2024 22:51:26 +0100
Subject: [PATCH 1/4] Create API down ui

---
 src/lib/api/apiStore.ts               |  3 +++
 src/lib/api/index.ts                  | 13 +++++++++++--
 src/lib/components/ApiDown.svelte     | 23 +++++++++++++++++++++++
 src/routes/workspace/Workspace.svelte |  3 +++
 4 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/components/ApiDown.svelte

diff --git a/src/lib/api/apiStore.ts b/src/lib/api/apiStore.ts
index 04877407..0a2edf42 100644
--- a/src/lib/api/apiStore.ts
+++ b/src/lib/api/apiStore.ts
@@ -30,6 +30,7 @@ export interface Assignment {
 }
 
 export async function updateFiles() {
+	console.log('will try to update files');
 	const api = getContext('api') as ApiHandler;
 
 	const userDocuments = await api.getUserDocuments();
@@ -74,3 +75,5 @@ export async function updateAssignments() {
 	assignmentStore.set(json);
 	console.log('updated assignments', json);
 }
+
+export const apiDownStore = writable<boolean>(false);
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 6cfc5133..1edd1748 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -1,5 +1,6 @@
 import type { AuthorizerState } from 'akademia-authorizer-svelte/types';
 import { get, type Readable } from 'svelte/store';
+import { apiDownStore } from './apiStore';
 
 export default class ApiHandler {
 	static baseUrl = 'https://akademia-api.arctix.dev';
@@ -44,7 +45,15 @@ export default class ApiHandler {
 				method,
 				headers
 			}
-		);
+		).catch((error) => {
+			// Handle CORS-related errors
+			if (error.name === 'TypeError' && error.message.includes('Failed to fetch')) {
+				console.log('API seems to be down at the moment');
+				apiDownStore.set(true);
+			} else {
+				console.error('Other error:', error);
+			}
+		});
 	}
 
 	getDocument = (documentId: string) => {
@@ -53,7 +62,7 @@ export default class ApiHandler {
 
 	getDocumentJson = (documentId: string) => {
 		return this.callApi('/documents/' + documentId + '/json');
-	}
+	};
 
 	getUserDocuments = () => {
 		return this.callApi('/documents');
diff --git a/src/lib/components/ApiDown.svelte b/src/lib/components/ApiDown.svelte
new file mode 100644
index 00000000..9b721482
--- /dev/null
+++ b/src/lib/components/ApiDown.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { apiDownStore } from '@/api/apiStore';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import Button from '@/components/ui/button/button.svelte';
+
+	let open = false;
+	$: open = $apiDownStore;
+</script>
+
+<Dialog.Dialog bind:open>
+	<Dialog.Content class="max-w-[23rem]">
+		<Dialog.Title>Oops! ser ud til at API'en er nede</Dialog.Title>
+		<Dialog.Description
+			>Det ser ud til, at vores API har besluttet at tage en kaffe-pause og lade vores udviklere
+			arbejde deres magi bag kulisserne! Vi undskylder for besværet og lover at få det op at køre
+			igen snarest muligt.</Dialog.Description
+		>
+		<div class="flex w-full gap-2">
+			<Button variant="outline" class="flex-1" on:click={() => (open = false)}>Luk</Button>
+			<!-- <Button variant="destructive" class="flex-1" on:click={deleteActiveFile}>Ja</Button> -->
+		</div>
+	</Dialog.Content>
+</Dialog.Dialog>
diff --git a/src/routes/workspace/Workspace.svelte b/src/routes/workspace/Workspace.svelte
index 22140117..a37bdf4d 100644
--- a/src/routes/workspace/Workspace.svelte
+++ b/src/routes/workspace/Workspace.svelte
@@ -7,6 +7,7 @@
 	import { updateFiles, updateUserInfo, updateAssignments } from '@/api/apiStore';
 	import ApiHandler from '@/api';
 	import SidebarAssignment from './SidebarAssignment.svelte';
+	import ApiDown from '@/components/ApiDown.svelte';
 
 	let state: AuthorizerState;
 
@@ -46,6 +47,8 @@
 	</div>
 
 	<slot />
+
+	<ApiDown></ApiDown>
 </div>
 
 <style lang="scss">

From f91213efe57705c67456fc58570a93c4f2ce8bd0 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Fri, 23 Feb 2024 22:53:28 +0100
Subject: [PATCH 2/4] Remove debug code

---
 src/lib/api/apiStore.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/api/apiStore.ts b/src/lib/api/apiStore.ts
index 0a2edf42..ddade439 100644
--- a/src/lib/api/apiStore.ts
+++ b/src/lib/api/apiStore.ts
@@ -30,7 +30,6 @@ export interface Assignment {
 }
 
 export async function updateFiles() {
-	console.log('will try to update files');
 	const api = getContext('api') as ApiHandler;
 
 	const userDocuments = await api.getUserDocuments();

From 419e8ebdbcc1fb8c3f4af45e71406cb054161050 Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Fri, 23 Feb 2024 22:59:23 +0100
Subject: [PATCH 3/4] Add reload page button

---
 src/lib/components/ApiDown.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lib/components/ApiDown.svelte b/src/lib/components/ApiDown.svelte
index 9b721482..0efeec93 100644
--- a/src/lib/components/ApiDown.svelte
+++ b/src/lib/components/ApiDown.svelte
@@ -2,6 +2,7 @@
 	import { apiDownStore } from '@/api/apiStore';
 	import * as Dialog from '$lib/components/ui/dialog';
 	import Button from '@/components/ui/button/button.svelte';
+	import { RefreshCcw } from 'lucide-svelte';
 
 	let open = false;
 	$: open = $apiDownStore;
@@ -17,6 +18,10 @@
 		>
 		<div class="flex w-full gap-2">
 			<Button variant="outline" class="flex-1" on:click={() => (open = false)}>Luk</Button>
+			<Button variant="outline" on:click={() => location.reload()} class="aspect-square px-2">
+				<RefreshCcw size="14"></RefreshCcw>
+			</Button>
+
 			<!-- <Button variant="destructive" class="flex-1" on:click={deleteActiveFile}>Ja</Button> -->
 		</div>
 	</Dialog.Content>

From 162f053edf8c232f85bff9c1768f987ef0487cfe Mon Sep 17 00:00:00 2001
From: Elliott <85990359+Ell1ott@users.noreply.github.com>
Date: Fri, 23 Feb 2024 23:21:22 +0100
Subject: [PATCH 4/4] Null handling for Api

fix api null response handling

fix type

more null handling

more null handling, for api

remove unused css selector
---
 src/lib/api/apiStore.ts                             | 13 +++++++++----
 src/lib/api/index.ts                                |  2 +-
 src/routes/+layout.svelte                           | 12 ------------
 src/routes/workspace/FileViewer.svelte              |  5 ++++-
 src/routes/workspace/editor/+page.svelte            |  1 +
 .../workspace/editor/Toolbar/MoreActions.svelte     |  6 +++---
 6 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/lib/api/apiStore.ts b/src/lib/api/apiStore.ts
index ddade439..2120f176 100644
--- a/src/lib/api/apiStore.ts
+++ b/src/lib/api/apiStore.ts
@@ -32,8 +32,11 @@ export interface Assignment {
 export async function updateFiles() {
 	const api = getContext('api') as ApiHandler;
 
-	const userDocuments = await api.getUserDocuments();
-	const userDocumentsJson = await userDocuments.json();
+	const response = await api.getUserDocuments();
+	if (!response) {
+		throw new Error('Could not update files due to no response');
+	}
+	const userDocumentsJson = await response.json();
 	console.log(userDocumentsJson);
 
 	fileStore.set(userDocumentsJson);
@@ -57,18 +60,20 @@ export function updateUserInfo(state: AuthorizerState) {
 
 // Explicitly specify the type of the store
 export const fileStore = writable<FileInfo[]>([]);
+export const assignmentStore = writable<Assignment[]>([]);
 
 interface userInfo {
 	name: string;
 }
 export const userInfo = writable<userInfo>();
 
-export const assignmentStore = writable<Assignment[]>([]);
-
 export async function updateAssignments() {
 	const api = getContext('api') as ApiHandler;
 
 	const response = await api.getAssignments();
+	if (!response) {
+		throw new Error('Could not update assignments due to no response');
+	}
 	const json = await response.json();
 
 	assignmentStore.set(json);
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 1edd1748..82181ec9 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -16,7 +16,7 @@ export default class ApiHandler {
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	debounce(func: any, timeout = 300) {
-		let timer: number;
+		let timer: NodeJS.Timeout;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		return (...args: any) => {
 			clearTimeout(timer);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8f9ab169..29a54554 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -52,16 +52,4 @@
 		flex-direction: column;
 		min-height: 100vh;
 	}
-
-	main {
-		flex: 1;
-		flex-direction: column;
-		/* padding: 1rem; */
-		width: 100%;
-		max-height: 100%;
-		/* max-width: 64rem; */
-		margin: 0 auto;
-		min-height: 100vh;
-		box-sizing: border-box;
-	}
 </style>
diff --git a/src/routes/workspace/FileViewer.svelte b/src/routes/workspace/FileViewer.svelte
index 4a3a8e39..b0279345 100644
--- a/src/routes/workspace/FileViewer.svelte
+++ b/src/routes/workspace/FileViewer.svelte
@@ -35,7 +35,10 @@
 	<SideBarElem active={false}>
 		<button
 			on:click={async () => {
-				const newFile = await (await api.createDocument(randomName())).json();
+				const newFile = await api.createDocument(randomName()).then((response) => {
+					if (!response) return;
+					return response.json();
+				});
 				activeFile.set(newFile);
 				fileStore.update((before) => [...before, newFile]);
 			}}
diff --git a/src/routes/workspace/editor/+page.svelte b/src/routes/workspace/editor/+page.svelte
index fd409f48..8a57d0cc 100644
--- a/src/routes/workspace/editor/+page.svelte
+++ b/src/routes/workspace/editor/+page.svelte
@@ -21,6 +21,7 @@
 	}
 
 	api.getDocument(id || '').then((file) => {
+		if (!file) return;
 		file.json().then((fileContent) => {
 			activeFile.set(fileContent);
 		});
diff --git a/src/routes/workspace/editor/Toolbar/MoreActions.svelte b/src/routes/workspace/editor/Toolbar/MoreActions.svelte
index a41574d4..4cd305ae 100644
--- a/src/routes/workspace/editor/Toolbar/MoreActions.svelte
+++ b/src/routes/workspace/editor/Toolbar/MoreActions.svelte
@@ -14,9 +14,9 @@
 	function deleteActiveFile() {
 		const id = $activeFile?.id;
 		if (!id) return;
-		api.deleteDocument(id).then((it) => {
-			if (it.status !== 200) return;
-			console.log(it);
+		api.deleteDocument(id).then((response) => {
+			if (!response || response.status !== 200) return;
+			console.log(response);
 			fileStore.update((prev) => prev.filter((it) => it !== $activeFile));
 			activeFile.set(null);
 		});