feat: better error handling + properly disable buttons

src/routes/+page.svelte

@@ -14,24 +14,30 @@
 	let logoPages = 1;
 	let min = 0;
 	let max = logoAmount;
-  let token: string = "";
+	let token: string = '';
 
-// try {
-// 		currentPage = Number(localStorage.getItem('currentPage')) || 0;
-// 		selected = JSON.parse(localStorage.getItem('selected')) || [];
-// 	} catch (err) {
-// 		console.log(err);
-// 	}
+	let submit = false;
+
+	// try {
+	// 		currentPage = Number(localStorage.getItem('currentPage')) || 0;
+	// 		selected = JSON.parse(localStorage.getItem('selected')) || [];
+	// 	} catch (err) {
+	// 		console.log(err);
+	// 	}
 
 	// TODO: catch blocks.
 	async function exchange_token(bot_token: string) {
 		const response = await fetch('https://poll.revanced.app/auth/exchange', {
-      method: "POST",
+			method: 'POST',
 			headers: {
-        "Authorization": `Bearer ${bot_token}`,
+				Authorization: `Bearer ${bot_token}`
 			}
 		});
 
+		if (!response.ok) {
+			throw Error(`Status Code ${response.status}: ${await response.text()}`);
+		}
+
 		const json = await response.json();
 
 		token = json.access_token;
@@ -40,7 +46,7 @@
 	// you will never see shittier code tm
 	// will refactor later maybe idk
 	onMount(async () => {
-    window["use_token"] = exchange_token;
+		window['use_token'] = exchange_token;
 		const response = await fetch('https://poll.revanced.app/logos');
 		const json = await response.json();
 
@@ -66,15 +72,19 @@
 		// update ui
 		logos = logos;
 
-    if (location.hash !== "") {
+		if (location.hash !== '') {
+			try {
 				await exchange_token(location.hash.substring(1));
+			} catch (err) {
+				alert(`Could not exchange the token: ${err}`);
+			}
 		} else {
-      alert("Warning: No token!");
+			alert('Warning: No token!');
 		}
 	});
 
 	function previousPage() {
-		if (currentPage <= 0) return null;
+		if (currentPage <= 0 || submit) return null;
 		currentPage--;
 		// localStorage.setItem('currentPage', currentPage.toString());
 
@@ -84,7 +94,7 @@
 	}
 
 	function nextPage() {
-		if (currentPage >= logoPages) return null;
+		if (currentPage >= logoPages || submit) return null;
 		currentPage++;
 		// localStorage.setItem('currentPage', currentPage.toString());
 
@@ -94,6 +104,9 @@
 	}
 
 	function clearLogos() {
+    if (submit) {
+      return;
+    }
 		selected = [];
 		// localStorage.setItem('selected', JSON.stringify(selected));
 	}
@@ -101,22 +114,25 @@
 	async function submitBallot() {
 		console.log(token);
 		const data = {
-      votes: logos.map(logo => ({ cid: logo.id, vote: selected.includes(logo.id) })),
+			votes: logos.map((logo) => ({ cid: logo.id, vote: selected.includes(logo.id) }))
 		};
 		console.log(data);
 
 		const response = await fetch('https://poll.revanced.app/ballot', {
-      method: "POST",
+			method: 'POST',
 			headers: {
-        "Authorization": `Bearer ${token}`,
-        "Content-Type": "application/json",
+				Authorization: `Bearer ${token}`,
+				'Content-Type': 'application/json'
 			},
-      body: JSON.stringify(data),
+			body: JSON.stringify(data)
 		});
+		if (!response.ok) {
+			throw Error(`Status Code ${response.status}: ${await response.text()}`);
+		}
 		const json = await response.json();
 
-    if (json.cast) {
-      alert("yay you did a thing");
+		if (!json.cast) {
+			throw Error('Vote not cast.');
 		}
 	}
 
@@ -186,13 +202,33 @@
 		{/if}
 	</div>
 	<div class="buttons-container">
-		<Button on:click={previousPage} unclickable={currentPage <= 0}>
-			Previous
-		</Button>
-		<Button kind="primary" on:click={finalPage ? submitBallot : nextPage} >
+		<Button on:click={previousPage} unclickable={currentPage <= 0 || submit}
+			>Previous</Button
+		>
+		<Button
+			kind="primary"
+			on:click={finalPage ? () => (submit = true) : nextPage}
+			unclickable={submit}
+		>
 			{finalPage ? 'Submit' : 'Next'}
 		</Button>
 	</div>
+
+	{#if submit}
+		<div style="text-align: center;">
+			{#await submitBallot()}
+				<h6>Submitting...</h6>
+			{:then _}
+				<h6>Your vote has been cast.</h6>
+			{:catch err}
+				<h6>
+					An error occured. Try again later.
+					<br />
+					{err}
+				</h6>
+			{/await}
+		</div>
+	{/if}
 </main>
 
 <style>
@@ -237,6 +273,19 @@
 		border-top: 1px solid var(--grey-three);
 	}
 
+	/* This is better for large screens, but I am not entirely sure about the media query... */
+	/* @media screen and (orientation: landscape) and (min-width: 1500px) and (min-height: 950px) {
+	 .buttons-container {
+	 justify-content: center;
+	 z-index: unset;
+	 position: unset;
+	 bottom: unset;
+	 right: unset;
+	 border-top: unset;
+	 background-color: inherit;
+	 }
+	 } */
+
 	button {
 		background-color: transparent;
 		border: none;