Merge pull request #4 from Akademiaapp/api-down-handling

Create API down ui

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,20 +60,24 @@ 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);
 	console.log('updated assignments', json);
 }
+
+export const apiDownStore = writable<boolean>(false);

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';
@@ -15,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);
@@ -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');

src/lib/components/ApiDown.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	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;
+</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="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>
+</Dialog.Dialog>

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>

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]);
 			}}

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">

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);
 		});

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);
 		});