More tests, simpler error handling

src/lib/api/documents.test.ts

@@ -150,6 +150,16 @@ describe("document uploads and processing", () => {
       expect(p).toMatchObject(pending);
     });
   });
+
+  test("pending error", async () => {
+    const mockFetch = vi.fn().mockImplementation(async () => {
+      throw new Error("Bad fetch");
+    });
+
+    documents.pending(mockFetch).then((p) => {
+      expect(p).toEqual([]);
+    });
+  });
 });
 
 describe("document helper methods", () => {

src/lib/api/documents.ts

@@ -163,19 +163,22 @@ export async function process(
  */
 export async function cancel(id: number | string) {}
 
+/**
+ * Get pending documents. This returns an empty array for any error.
+ *
+ * @param {fetch} fetch
+ * @returns {Promise<Pending>}
+ */
 export async function pending(fetch = globalThis.fetch): Promise<Pending[]> {
   const endpoint = new URL("documents/pending/", BASE_API_URL);
 
-  // if this request fails for any reason, just return nothing
-  const resp = await fetch(endpoint, { credentials: "include" }).catch((e) => ({
-    ok: false,
-    json() {
-      return [];
-    },
-  }));
-
-  // if there's an error above, this will return an empty array
-  return resp.json();
+  try {
+    const resp = await fetch(endpoint, { credentials: "include" });
+    if (isErrorCode(resp.status)) return [];
+    return resp.json();
+  } catch (e) {
+    return [];
+  }
 }
 
 // utility functions

src/lib/components/documents/ResultsList.svelte

@@ -87,7 +87,7 @@
 </script>
 
 <div class="container">
-  <slot />
+  <slot name="start" />
   {#each results as document (document.id)}
     <Flex direction="column">
       <Flex gap={0.625} align="center">
@@ -131,6 +131,8 @@
       </Button>
     {/if}
   </div>
+
+  <slot name="end" />
 </div>
 
 <style>

src/lib/components/documents/stories/ResultsList.stories.svelte

@@ -41,7 +41,7 @@
 <Story name="Pending documents">
   <div style="width: 36rem">
     <ResultsList {results} {count} {next}>
-      <Pending {pending} />
+      <Pending {pending} slot="start" />
     </ResultsList>
   </div>
 </Story>

src/routes/app/+page.svelte

@@ -51,16 +51,18 @@
       {#await searchResults}
         <Empty icon={Hourglass24}>Loading…</Empty>
       {:then results}
-        {#await pending then p}
-          <Pending pending={p} />
-        {/await}
-
         <ResultsList
           results={results.results}
           count={results.count}
           next={results.next}
           auto
-        />
+        >
+          <svelte:fragment slot="start">
+            {#await pending then p}
+              <Pending pending={p} />
+            {/await}
+          </svelte:fragment>
+        </ResultsList>
       {/await}
 
       <PageToolbar slot="footer">