From fd63bbb091215370d2bdd55c6a7c1547aeeb44cd Mon Sep 17 00:00:00 2001
From: Ashhhleyyy <ash@ashhhleyyy.dev>
Date: Mon, 19 Feb 2024 18:16:40 +0000
Subject: [PATCH] feat(extension): better error handling

---
 extension/src/ash.css       | 13 +++++++++++++
 extension/src/background.js |  2 +-
 extension/src/popup.js      | 30 +++++++++++++++++++++++++-----
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/extension/src/ash.css b/extension/src/ash.css
index a983ecf..0c5b72a 100644
--- a/extension/src/ash.css
+++ b/extension/src/ash.css
@@ -239,3 +239,16 @@ tr.code-bad {
 td.code-bad {
     text-decoration: line-through;
 }
+
+.error {
+    display: flex;
+    align-items: center;
+    gap: .5em;
+}
+
+.error::before {
+    content: "! ";
+    color: red;
+    font-weight: 900;
+    font-size: 2em;
+}
diff --git a/extension/src/background.js b/extension/src/background.js
index cc98aa2..c9f20a9 100644
--- a/extension/src/background.js
+++ b/extension/src/background.js
@@ -56,7 +56,7 @@ function interceptSubmit(details) {
             code: activity.code,
             success: codeCorrect,
         }),
-    }).then(res => console.log('submitted code: ', res)).error(e => console.error('failed to submit code', e));
+    }).then(res => console.log('submitted code: ', res)).catch(e => console.error('failed to submit code', e));
 }
 
 function interceptCode(details) {
diff --git a/extension/src/popup.js b/extension/src/popup.js
index b215244..9676c9b 100644
--- a/extension/src/popup.js
+++ b/extension/src/popup.js
@@ -44,14 +44,34 @@
         return root;
     }
 
-    const res = await fetch(SERVER_URL + '/api/codes');
+    function message(message, error = false) {
+        const ele = document.createElement('p');
+        if (error) {
+            ele.classList.add('error');
+            const s = document.createElement('span');
+            s.innerText = message;
+            ele.appendChild(s);
+        } else {
+            ele.innerText = message;
+        }
+        root.appendChild(ele);
+    }
+
+    const res = await fetch(SERVER_URL + '/api/codes').catch((e) => {
+        message(`Something went wrong: ` + e);
+        console.error(e);
+    });
     if (!res.ok) {
-        // TODO: Handle error
+        message('Server returned error code ' + res.status + ': ' + res.statusText, true);
         return;
     }
     const { activities } = await res.json();
-    activities.sort(activity => activity.time);
-    for (const activity of activities) {
-        root.appendChild(activityEle(activity));
+    if (activities.length === 0) {
+        message('No codes are available right now :/');
+    } else {
+        activities.sort(activity => activity.time);
+        for (const activity of activities) {
+            root.appendChild(activityEle(activity));
+        }
     }
 })();