Add a messy but mostly working UI

1 files changed, 35 insertions, 7 deletions

diff --git a/ui/src/routes/list/+page.svelte b/ui/src/routes/list/+page.svelte
index 3b463b5..1986665 100644
--- a/ui/src/routes/list/+page.svelte
+++ b/ui/src/routes/list/+page.svelte
@@ -1,17 +1,43 @@
 <script>
+  import { goto } from '$app/navigation';
 
-    
-  let data = null;
+	 let Err = null;
+	 let data;
 
-  const req = fetch(`http://localhost:6130/api/v1/list`)
-    .then((res) => res.json())
-    .then(resData => data = resData);
+    console.log(data);
+	// $: console.log(data)
+
+
+ fetch(`/api/v1/list`)
+	.then((res) => {
+		console.log(`Got res: ${res}`)
+		console.log(res)
+		return res.json()
+	})
+	.then((jsonResp) => {
+			console.log(`jsonResp: ${jsonResp}`)
+			console.log(jsonResp)
+		if (jsonResp.Code === 401) {
+			console.log(`status code === 401: ${jsonResp.Code}`)
+			window.localStorage.removeItem('loggedIn');
+			window.localStorage.setItem('loggedIn', 'false');
+			goto('/login');
+		} else if (jsonResp.Code !== 200) {
+			Err = `Received code: ${jsonResp.Code} message: ${jsonResp.Msg}`
+		} else {
+			window.localStorage.removeItem('loggedIn');
+			window.localStorage.setItem('loggedIn', 'true');
+			data = jsonResp.Data
+		}
+	})
+	.catch((error) => {
+		console.log(error)
+		Err = `Encountered error: ${error}`;
+	})
 
-  
 
 </script>
 
-<!-- TODO: Figure out how to gracefully handle 500's and such here -->
 {#if data}
 <ul>
     {#each data as paste (paste.id)}
@@ -22,6 +48,8 @@
     </li>
     {/each}
 </ul>
+{:else if Err}
+{Err}
 {:else}
 	Loading....
 {/if}