From fe04b99c3570d237b17dde59f6ed87fe2568c65d Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Thu, 3 Feb 2022 02:58:08 +0200
Subject: [PATCH] add error messages for not being able to fetch initial
 information

---
 frontend/public/global.css                    |  2 +-
 frontend/src/api/APIClient.js                 |  8 +++---
 frontend/src/components/App.svelte            | 25 ++++++++++++++++++-
 frontend/src/components/MessageDisplay.svelte | 10 ++++++++
 4 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/MessageDisplay.svelte

diff --git a/frontend/public/global.css b/frontend/public/global.css
index e633a7c..15ad848 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -142,5 +142,5 @@ button:focus {
 }
 
 .grayed-text {
-	color: var(--color-red);
+	color: var(--grayed-text-color);
 }
diff --git a/frontend/src/api/APIClient.js b/frontend/src/api/APIClient.js
index f02e6e2..fa68416 100644
--- a/frontend/src/api/APIClient.js
+++ b/frontend/src/api/APIClient.js
@@ -4,18 +4,18 @@ class APIClient {
         this.token = token;
     }
 
-    async getRequest(path) {
+    async getRequest(path, throwOnError=false) {
         const res = await fetch(`${this.baseUrl}${path}`, {
             headers: {
                 "Authorization": this.token
             }
         });
-        if (!res.ok)
+        if (!res.ok && throwOnError)
             throw new Error("APIClient.getRequest(): request failed with non-200 http code");
         return (await res.json());
     }
 
-    async postRequest(path, body) {
+    async postRequest(path, body, throwOnError=true) {
         const res = await fetch(`${this.baseUrl}${path}`, {
             method: "POST",
             headers: {
@@ -24,7 +24,7 @@ class APIClient {
             },
             body: JSON.stringify(body)
         });
-        if (!res.ok)
+        if (!res.ok && throwOnError)
             throw new Error("APIClient.postRequest(): request failed with non-200 http code");
         return (await res.json());
     }
diff --git a/frontend/src/components/App.svelte b/frontend/src/components/App.svelte
index fc0f513..e157d24 100644
--- a/frontend/src/components/App.svelte
+++ b/frontend/src/components/App.svelte
@@ -2,6 +2,7 @@
 	import { apiClient } from "../api/common";
 	import ChatView from "./ChatView.svelte";
 import FuzzyView from "./FuzzyView.svelte";
+import MessageDisplay from "./MessageDisplay.svelte";
 
 	let messageStore = {};
 	let selectedGuild = null;
@@ -10,13 +11,33 @@ import FuzzyView from "./FuzzyView.svelte";
 	let user = null;
 	let view = { type: "CHAT" };
 
-	apiClient.getRequest("/users/@self")
+	apiClient.getRequest("/users/@self", false)
 		.then((res) => {
+			let userErrorMessage = "";
+			if (res.error) {
+				userErrorMessage = "Something went wrong while trying to fetch current user info.";
+				if (res.message === "ERROR_UNAUTHORIZED" || res.message === "ERROR_FORBIDDEN") {
+					userErrorMessage = "You're not logged in or your session is invalid.";
+				}
+				view = { type: "MESSAGE_DISPLAY", header: "Error", content: userErrorMessage };
+				return;
+			}
+
 			user = res.user;
 		});
 
 	apiClient.getRequest("/users/@self/guilds")
 		.then((res) => {
+			let userErrorMessage = "";
+			if (res.error) {
+				userErrorMessage = "Something went wrong while trying to fetch guild info.";
+				if (res.message === "ERROR_UNAUTHORIZED" || res.message === "ERROR_FORBIDDEN") {
+					userErrorMessage = "You're not logged in or your session is invalid.";
+				}
+				view = { type: "MESSAGE_DISPLAY", header: "Error", content: userErrorMessage };
+				return;
+			}
+
 			guilds = res.guilds
 				.map(e => {
 					// we only want text channels
@@ -145,5 +166,7 @@ import FuzzyView from "./FuzzyView.svelte";
 		<FuzzyView on:selected={fuzzySelectedGuild} elements={guilds} title="Select a guild" />
 	{:else if view.type === "CHANNEL_FUZZY"}
 		<FuzzyView on:selected={fuzzySelectedChannel} elements={selectedGuild ? selectedGuild.channels : []} title={`Select a channel in ${selectedGuild ? selectedGuild.name : "[unknown guild]"}`} />
+	{:else if view.type === "MESSAGE_DISPLAY"}
+		<MessageDisplay header={ view.header } content={ view.content } ></MessageDisplay>
 	{/if}
 </main>
diff --git a/frontend/src/components/MessageDisplay.svelte b/frontend/src/components/MessageDisplay.svelte
new file mode 100644
index 0000000..5b16385
--- /dev/null
+++ b/frontend/src/components/MessageDisplay.svelte
@@ -0,0 +1,10 @@
+<script>
+    export let header;
+    export let content;
+</script>
+
+<div class="card full-card">
+    <span class="main-panel-header"><b>{ header }</b></span>
+    <br>
+    <p>{ content }</p>
+</div>