From 9fc2adfed9ac926ac5552e7b7060c9b223f3a3bf Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Sun, 24 Nov 2024 20:15:49 -0500
Subject: [PATCH 1/3] Use getApiResponse on infinite scrolls, too

---
 src/langs/json/en.json                        |  4 +-
 .../components/documents/ResultsList.svelte   | 45 ++++++++++++-------
 .../stories/ResultsList.stories.svelte        |  6 ++-
 src/test/handlers/documents.ts                |  4 ++
 4 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 0ec1235fb..215355db4 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -203,7 +203,9 @@
     "pageAbbrev": "p.",
     "pageCount": "{n, plural, one {# page} other {# pages}}",
     "select": "Select",
-    "noteCount": "{n, plural, one {# note} other {# notes}}"
+    "noteCount": "{n, plural, one {# note} other {# notes}}",
+    "more": "Load more",
+    "retry": "Please try again."
   },
   "error": {
     "report": "Report a problem"
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index c850b756b..f83d15c86 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -1,11 +1,11 @@
 <script context="module" lang="ts">
+  import type { Document, DocumentResults, Maybe } from "$lib/api/types";
   import {
     derived,
     writable,
     type Readable,
     type Writable,
   } from "svelte/store";
-  import type { Document, DocumentResults, Maybe } from "$lib/api/types";
 
   // IDs might be strings or numbers, depending on the API endpoint
   // enforce type consistency here to avoid comparison bugs later
@@ -32,6 +32,8 @@
   import NoteHighlights from "./NoteHighlights.svelte";
   import PageHighlights from "./PageHighlights.svelte";
 
+  import { getApiResponse } from "$lib/utils/api";
+
   export let results: Document[] = [];
   export let count: Maybe<number> = undefined;
   export let next: string | null = null;
@@ -41,6 +43,7 @@
   let loading = false;
   let end: HTMLElement;
   let observer: IntersectionObserver;
+  let error: string = "";
 
   const embed: boolean = getContext("embed");
 
@@ -50,24 +53,25 @@
   // load the next set of results
   async function load(url: URL) {
     loading = true;
-    const res = await fetch(url, { credentials: "include" }).catch(
+    const resp = await fetch(url, { credentials: "include" }).catch(
       console.error,
     );
 
-    // todo: better error handling
-    if (!res) return console.error("API error");
-    if (!res.ok) {
-      console.error(res.statusText);
-      loading = false;
+    const { data, error: err } = await getApiResponse<DocumentResults>(resp);
+
+    if (err) {
+      // show an error message, but let the user try loading more
+      error = err.message;
     }
 
-    const r: DocumentResults = await res.json();
+    if (data) {
+      results = [...results, ...data.results];
+      $total = data.count ?? $total;
+      next = data.next;
+      if (auto) watch(end);
+    }
 
-    results = [...results, ...r.results];
-    $total = r.count ?? $total;
-    next = r.next;
     loading = false;
-    if (auto) watch(end);
   }
 
   function watch(el: HTMLElement) {
@@ -145,12 +149,17 @@
         }}
       >
         {#if loading}
-          Loading &hellip;
+          {$_("common.loading")}
         {:else}
-          Load more
+          {$_("documents.more")}
         {/if}
       </Button>
     {/if}
+
+    {#if error}
+      <p class="error">{error}</p>
+      <p class="error">{$_("documents.retry")}</p>
+    {/if}
   </div>
 
   <slot name="end" />
@@ -177,6 +186,12 @@
 
   .end {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .error {
+    color: var(--error, red);
   }
 </style>
diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
index c11f64b9a..8150abf5f 100644
--- a/src/lib/components/documents/stories/ResultsList.stories.svelte
+++ b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -7,6 +7,7 @@
   import Unverified from "../../accounts/Unverified.svelte";
 
   import { me } from "@/test/fixtures/accounts";
+  import { documents as mock } from "@/test/handlers/documents";
 
   // typescript complains without the type assertion
   import searchResults from "@/test/fixtures/documents/search-highlight.json";
@@ -24,7 +25,6 @@
   export const meta = {
     title: "Components / Documents / Results list",
     component: ResultsList,
-    tags: ["autodocs"],
   };
 
   const user = { ...me, verified_journalist: false };
@@ -57,3 +57,7 @@
     <Unverified {user} slot="start" />
   </ResultsList>
 </Story>
+
+<Story name="Loading error" parameters={{ msw: { handlers: [mock.error] } }}>
+  <ResultsList {results} {count} {next} auto />
+</Story>
diff --git a/src/test/handlers/documents.ts b/src/test/handlers/documents.ts
index 21f59b624..4b411b20f 100644
--- a/src/test/handlers/documents.ts
+++ b/src/test/handlers/documents.ts
@@ -13,6 +13,10 @@ export const documents = {
     new URL("documents/pending/", BASE_API_URL).href,
     (req, res, ctx) => res(ctx.json(pending)),
   ),
+  error: rest.get(
+    new URL("documents/search/", "https://api.www.documentcloud.org/api/").href,
+    (req, res, ctx) => res(ctx.status(500, "Something went wrong")),
+  ),
 };
 
 export const revisionControl = {

From 65931babb5054ad024b3eb4859b9b9424607ed60 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Sun, 24 Nov 2024 21:43:40 -0500
Subject: [PATCH 2/3] History and Scheduled, too

---
 src/lib/components/addons/History.svelte   | 35 +++++++++++++--------
 src/lib/components/addons/Scheduled.svelte | 36 ++++++++++++++--------
 2 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/addons/History.svelte b/src/lib/components/addons/History.svelte
index d295a0987..7aa5223a7 100644
--- a/src/lib/components/addons/History.svelte
+++ b/src/lib/components/addons/History.svelte
@@ -3,7 +3,7 @@
   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";
@@ -11,33 +11,38 @@
   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
index 10428c2bd..7c8f813a4 100644
--- a/src/lib/components/addons/Scheduled.svelte
+++ b/src/lib/components/addons/Scheduled.svelte
@@ -2,7 +2,7 @@
   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";
@@ -10,31 +10,37 @@
   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));
         }

From 31f55fb89529779dab074d5e4f3a0fa084021300 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 25 Nov 2024 10:03:55 -0500
Subject: [PATCH 3/3] Apply suggestions from code review

Co-authored-by: Allan Lasser <lasser.allan@gmail.com>
---
 src/lib/components/addons/History.svelte        | 4 ++--
 src/lib/components/addons/Scheduled.svelte      | 4 ++--
 src/lib/components/documents/ResultsList.svelte | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/addons/History.svelte b/src/lib/components/addons/History.svelte
index 7aa5223a7..f9f7d492a 100644
--- a/src/lib/components/addons/History.svelte
+++ b/src/lib/components/addons/History.svelte
@@ -3,7 +3,7 @@
   import type { Run } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
-  import { Alert16, History16, History24, Hourglass24 } from "svelte-octicons";
+  import { Alert24, History16, History24, Hourglass24 } from "svelte-octicons";
 
   import HistoryEvent from "./HistoryEvent.svelte";
   import Paginator from "$lib/components/common/Paginator.svelte";
@@ -56,7 +56,7 @@
   {#if loading}
     <Empty icon={Hourglass24}>Loading past runs…</Empty>
   {:else if error}
-    <Empty icon={Alert16}>
+    <Empty icon={Alert24}>
       {error}
     </Empty>
   {:else}
diff --git a/src/lib/components/addons/Scheduled.svelte b/src/lib/components/addons/Scheduled.svelte
index 7c8f813a4..4f197a9a1 100644
--- a/src/lib/components/addons/Scheduled.svelte
+++ b/src/lib/components/addons/Scheduled.svelte
@@ -2,7 +2,7 @@
   import type { Maybe, Nullable, Page, Event } from "$lib/api/types";
 
   import { _ } from "svelte-i18n";
-  import { Alert16, Clock16, Hourglass24 } from "svelte-octicons";
+  import { Alert24, Clock16, Hourglass24 } from "svelte-octicons";
 
   import ScheduledEvent from "./ScheduledEvent.svelte";
   import SidebarGroup from "../sidebar/SidebarGroup.svelte";
@@ -54,7 +54,7 @@
   {#if loading}
     <Empty icon={Hourglass24}>{$_("common.loading")}</Empty>
   {:else if error}
-    <Empty icon={Alert16}>
+    <Empty icon={Alert24}>
       {error}
     </Empty>
   {:else}
diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
index f83d15c86..a0b58600a 100644
--- a/src/lib/components/documents/ResultsList.svelte
+++ b/src/lib/components/documents/ResultsList.svelte
@@ -192,6 +192,7 @@
   }
 
   .error {
+    text-align: center;
     color: var(--error, red);
   }
 </style>