Handle API error and clear result when not found (#8)

Signed-off-by: thc1006 <84045975+thc1006@users.noreply.github.com>

Dockerfile

@@ -1,3 +1,3 @@
-FROM nginx:1.25-alpine-slim
+FROM nginx:1.30-alpine-slim
 
 COPY src /usr/share/nginx/html

src/script.js

@@ -7,6 +7,9 @@ const status = document.querySelector("#status");
 const rawResultsWrapper = document.querySelector("#rawResultsWrapper");
 const rawResults = document.querySelector("#rawResults");
 
+// Keep the current request so a newer search can cancel the older one
+let inflight = null;
+
 // Parse URL query parameters
 const urlParams = new URLSearchParams(window.location.search);
 const user = urlParams.get('user');
@@ -20,6 +23,9 @@ if (user) {
 function find() {
   let user = gh.value.trim().toLowerCase();
   if (user != "") {
+    // Cancel the previous request so an older slower response can't overwrite a newer one
+    if (inflight) inflight.abort();
+    inflight = new AbortController();
     statusUpdate(`Fetching devstats score for '${user}'`, "info");
     rawResultsWrapper.classList.add('hidden');
     fetch("https://devstats.cncf.io/api/v1", {
@@ -30,14 +36,22 @@ function find() {
         "Content-Type": "application/json",
       },
       redirect: "follow",
+      signal: inflight.signal,
       body: "{\"api\":\"GithubIDContributions\",\"payload\":{\"github_id\":\"" + user + "\"}}",
     })
-    .then(res => res.json())
+    .then(res => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return res.json();
+    })
     .then(data => {
       statusUpdate("", "info");
       let score = data.contributions;
       if (!score) {
         statusUpdate(`Failed to get devstats score for '${user}'.\nEither user doesn't exist or no contributions recorded.`, "error");
+        result.innerHTML = "";
+        subResult.innerHTML = "";
+        rawResultsWrapper.classList.add('hidden');
+        return;
       }
       result.innerHTML = score;
       subResult.innerHTML = `Issues: ${data.issues} | PRs: ${data.prs}`;
@@ -45,6 +59,7 @@ function find() {
       rawResultsWrapper.classList.remove('hidden');
     })
     .catch(err => {
+      if (err.name === "AbortError") return; // request was replaced by a newer one
       statusUpdate(`Failed to get devstats score for '${user}'`, "error");
       console.log(err);
     });