History and Scheduled, too

MuckRock · Nov 25, 2024 · 65931ba · 65931ba
1 parent 9fc2adf
commit 65931ba
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 26 deletions.
diff --git a/src/lib/components/addons/History.svelte b/src/lib/components/addons/History.svelte
@@ -3,41 +3,46 @@
   import type { Run } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
-  import { History16, History24, Hourglass24 } from "svelte-octicons";
+  import { Alert16, History16, History24, Hourglass24 } from "svelte-octicons";
 
   import HistoryEvent from "./HistoryEvent.svelte";
   import Paginator from "$lib/components/common/Paginator.svelte";
   import SidebarGroup from "../sidebar/SidebarGroup.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
   import Empty from "../common/Empty.svelte";
 
+  import { getApiResponse } from "$lib/utils/api";
+
   export let runs: Run[];
   export let previous: Maybe<Nullable<string>> = undefined;
   export let next: Maybe<Nullable<string>> = undefined;
 
   export let loading = false;
 
+  let error: string = "";
+
   $: empty = runs.length === 0;
 
   // load the next set of results
   async function load(url: URL) {
     loading = true;
 
-    // todo: better error handling
-    const res = await fetch(url, { credentials: "include" }).catch(
+    const resp = await fetch(url, { credentials: "include" }).catch(
       console.error,
     );
-    if (!res) return console.error("API error");
-    if (!res.ok) {
-      console.error(res.statusText);
-      loading = false;
+
+    const { data: results, error: err } = await getApiResponse<Page<Run>>(resp);
+
+    if (err) {
+      error = err.message;
     }
 
-    const results: Page<Run> = await res.json();
+    if (results) {
+      runs = results.results;
+      next = results.next;
+      previous = results.previous;
+    }
 
-    runs = results.results;
-    next = results.next;
-    previous = results.previous;
     loading = false;
   }
 </script>
@@ -50,6 +55,10 @@
 
   {#if loading}
     <Empty icon={Hourglass24}>Loading past runs…</Empty>
+  {:else if error}
+    <Empty icon={Alert16}>
+      {error}
+    </Empty>
   {:else}
     {#each runs as run}
       <HistoryEvent {run} />
@@ -62,10 +71,10 @@
     <Paginator
       has_next={Boolean(next)}
       has_previous={Boolean(previous)}
-      on:next={(e) => {
+      on:next={() => {
         if (next) load(new URL(next));
       }}
-      on:previous={(e) => {
+      on:previous={() => {
         if (previous) load(new URL(previous));
       }}
     />

diff --git a/src/lib/components/addons/Scheduled.svelte b/src/lib/components/addons/Scheduled.svelte
@@ -2,39 +2,45 @@
   import type { Maybe, Nullable, Page, Event } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
-  import { Clock16, Hourglass24 } from "svelte-octicons";
+  import { Alert16, Clock16, Hourglass24 } from "svelte-octicons";
 
   import ScheduledEvent from "./ScheduledEvent.svelte";
   import SidebarGroup from "../sidebar/SidebarGroup.svelte";
   import SidebarItem from "../sidebar/SidebarItem.svelte";
   import Paginator from "$lib/components/common/Paginator.svelte";
   import Empty from "../common/Empty.svelte";
 
+  import { getApiResponse } from "$lib/utils/api";
+
   export let events: Event[];
   export let previous: Maybe<Nullable<string>> = undefined;
   export let next: Maybe<Nullable<string>> = undefined;
 
   export let loading = false;
 
+  let error: string = "";
+
   // load the next set of results
   async function load(url: URL) {
     loading = true;
 
-    // todo: better error handling
-    const res = await fetch(url, { credentials: "include" }).catch(
+    const resp = await fetch(url, { credentials: "include" }).catch(
       console.error,
     );
-    if (!res) return console.error("API error");
-    if (!res.ok) {
-      console.error(res.statusText);
-      loading = false;
+
+    const { data: results, error: err } =
+      await getApiResponse<Page<Event>>(resp);
+
+    if (err) {
+      error = err.message;
     }
 
-    const results: Page<Event> = await res.json();
+    if (results) {
+      events = results.results;
+      next = results.next;
+      previous = results.previous;
+    }
 
-    events = results.results;
-    next = results.next;
-    previous = results.previous;
     loading = false;
   }
 </script>
@@ -47,6 +53,10 @@
 
   {#if loading}
     <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
+  {:else if error}
+    <Empty icon={Alert16}>
+      {error}
+    </Empty>
   {:else}
     {#each events as event}
       <ScheduledEvent {event} />
@@ -61,12 +71,12 @@
     <Paginator
       has_next={Boolean(next)}
       has_previous={Boolean(previous)}
-      on:next={(e) => {
+      on:next={() => {
         if (next) {
           load(new URL(next));
         }
       }}
-      on:previous={(e) => {
+      on:previous={() => {
         if (previous) {
           load(new URL(previous));
         }