Merge pull request #515 from MuckRock/512-sveltekit-pending

src/langs/json/en.json

@@ -425,9 +425,7 @@
     "allDocuments": "All {access}Documents",
     "mustBeVerified": "You must be a verified journalist to upload documents",
     "upload": "Upload",
-    "dropFile": "Drop file to upload"
-  },
-  "document": {
+    "dropFile": "Drop file to upload",
     "open": "Open",
     "updating": "Updating document...",
     "processing": "Processing",
@@ -557,8 +555,9 @@
     "last": "Last Page"
   },
   "processingBar": {
+    "processing": "Processing last upload",
     "doneProcessing": "Done processing",
-    "processingDocuments": "Processing {n, plural, one {document} other {# documents}}"
+    "processingDocuments": "{n, plural, one {# document} other {# documents}} remaining"
   },
   "searchBar": {
     "tips": "Search tips: add filters by typing <code>user:</code>, <code>project:</code>, or <code>organization:</code>, etc. Use <code>sort:</code> to order results.",

src/lib/api/documents.test.ts

@@ -1,4 +1,4 @@
-import type { Document, DocumentUpload, Sizes } from "./types";
+import type { Document, DocumentUpload, Pending, Sizes } from "./types";
 
 import { vi, test as base, describe, expect, afterEach } from "vitest";
 import { APP_URL, DC_BASE, IMAGE_WIDTHS_ENTRIES } from "@/config/config.js";
@@ -23,6 +23,14 @@ const test = base.extend({
 
     await use(created as Document[]);
   },
+
+  pending: async ({}, use: Use<Pending[]>) => {
+    const { default: pending } = await import(
+      "./fixtures/documents/pending.json"
+    );
+
+    await use(pending);
+  },
 });
 
 describe("document fetching", () => {
@@ -129,6 +137,29 @@ describe("document uploads and processing", () => {
   });
 
   test.todo("documents.cancel");
+
+  test("pending", async ({ pending }) => {
+    const mockFetch = vi.fn().mockImplementation(async () => ({
+      ok: true,
+      async json() {
+        return pending;
+      },
+    }));
+
+    documents.pending(mockFetch).then((p) => {
+      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

@@ -5,6 +5,7 @@ import type {
   Document,
   DocumentUpload,
   DocumentResults,
+  Pending,
   SearchOptions,
   Sizes,
 } from "./types";
@@ -84,7 +85,6 @@ export async function create(
   csrf_token: string,
   fetch = globalThis.fetch,
 ): Promise<Document[]> {
-  console.log(`creating ${documents.length} documents`);
   const endpoint = new URL("documents/", BASE_API_URL);
 
   const resp = await fetch(endpoint, {
@@ -142,7 +142,6 @@ export async function process(
   csrf_token: string,
   fetch = globalThis.fetch,
 ): Promise<Response> {
-  console.log(`processing ${documents.length} documents`);
   const endpoint = new URL("documents/process/", BASE_API_URL);
 
   return fetch(endpoint, {
@@ -164,6 +163,24 @@ 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);
+
+  try {
+    const resp = await fetch(endpoint, { credentials: "include" });
+    if (isErrorCode(resp.status)) return [];
+    return resp.json();
+  } catch (e) {
+    return [];
+  }
+}
+
 // utility functions
 
 /**

src/lib/components/common/Tip.svelte

@@ -13,13 +13,14 @@
 <style>
   .tip {
     display: flex;
-    gap: 1rem;
-    padding: 1rem;
-    border-radius: 1rem;
+    gap: var(--gap, 1rem);
+    padding: var(--padding, 1rem);
+    border-radius: var(--border-radius, 1rem);
     color: var(--color, var(--gray-5, #233944));
     fill: var(--fill, var(--gray-4, #5c717c));
     background-color: var(--background-color, var(--gray-1, #f5f6f7));
     border: 1px solid var(--border-color, var(--gray-3, #99a8b3));
+    box-shadow: var(--shadow);
   }
   .icon {
     display: flex;

src/lib/components/documents/DocumentListItem.svelte

@@ -64,7 +64,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
   <div class="info">
     <h3>{document.title}</h3>
     <p class="meta">
-      {$_("document.pageCount", { values: { n: document.page_count } })} -
+      {$_("documents.pageCount", { values: { n: document.page_count } })} -
       {#if userOrgString(document)}{userOrgString(document)} -
       {/if}
       {date}
@@ -76,7 +76,7 @@ It's deliberately minimal and can be wrapped in other components to add addition
     {/if}
     <div class="actions">
       <a href={canonicalUrl(document).toString()} class="open"
-        >{$_("document.open")}</a
+        >{$_("documents.open")}</a
       >
 
       {#each projects as project}

src/lib/components/documents/NoteHighlights.svelte

@@ -37,7 +37,7 @@
 
 {#if count > 0}
   <details bind:open>
-    <summary>{$_("document.matchingNotes", { values: { n: count } })}</summary>
+    <summary>{$_("documents.matchingNotes", { values: { n: count } })}</summary>
 
     {#each Object.entries(note_highlights) as [note_id, highlight]}
       {@const note = notes.get(note_id)}
@@ -53,7 +53,7 @@
         {/if}
         <cite>
           <a href={noteUrl(document, note).toString()}
-            >{$_("document.noteLink")}</a
+            >{$_("documents.noteLink")}</a
           >
         </cite>
       </blockquote>

src/lib/components/documents/Pending.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Pending } from "$lib/api/types";
+
+  import { _ } from "svelte-i18n";
+  import { Sync24 } from "svelte-octicons";
+  import Tip from "../common/Tip.svelte";
+
+  export let pending: Pending[];
+</script>
+
+{#if pending.length > 0}
+  <Tip
+    --background-color="var(--blue-1)"
+    --border-color="var(--blue-3)"
+    --border-radius="0.5rem"
+    --gap="0.75rem"
+    --padding="0.5rem 0.75rem"
+  >
+    <Sync24 slot="icon" />
+    <h4>{$_("processingBar.processing")}</h4>
+    <p>
+      {$_("processingBar.processingDocuments", {
+        values: { n: pending.length },
+      })}
+    </p>
+  </Tip>
+{/if}

src/lib/components/documents/ResultsList.svelte

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

src/lib/components/documents/SearchHighlights.svelte

@@ -42,11 +42,11 @@
 
 {#if count}
   <details class="highlights" bind:open>
-    <summary>{$_("document.matchingPages", { values: { n: count } })}</summary>
+    <summary>{$_("documents.matchingPages", { values: { n: count } })}</summary>
 
     {#each Object.entries(highlights) as [page, segments]}
       {@const [number, href] = pageLink(page)}
-      <h4><a {href}>{$_("document.page")} {number}</a></h4>
+      <h4><a {href}>{$_("documents.page")} {number}</a></h4>
       <blockquote class="highlight">
         {#each segments as segment}
           <p class="segment">{@html sanitize(segment)}</p>

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

@@ -0,0 +1,17 @@
+<script context="module" lang="ts">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Pending from "../Pending.svelte";
+
+  import pending from "$lib/api/fixtures/documents/pending.json";
+
+  export const meta = {
+    title: "Components / Documents / Pending",
+    component: Pending,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="default">
+  <Pending {pending} />
+</Story>

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

@@ -3,6 +3,7 @@
 
   import { Story } from "@storybook/addon-svelte-csf";
   import ResultsList from "../ResultsList.svelte";
+  import Pending from "../Pending.svelte";
 
   // typescript complains without the type assertion
   import searchResults from "$lib/api/fixtures/documents/search-highlight.json";
@@ -15,6 +16,8 @@
   const count = searchResults.count;
   const next = searchResults.next;
 
+  import pending from "$lib/api/fixtures/documents/pending.json";
+
   export const meta = {
     title: "Components / Documents / Results list",
     component: ResultsList,
@@ -35,6 +38,14 @@
   <div style="width: 36rem"><ResultsList {results} {count} {next} auto /></div>
 </Story>
 
+<Story name="Pending documents">
+  <div style="width: 36rem">
+    <ResultsList {results} {count} {next}>
+      <Pending {pending} slot="start" />
+    </ResultsList>
+  </div>
+</Story>
+
 <Story name="Highlighted">
   <div style="width: 36rem">
     <ResultsList results={highlighted} {count} {next} />

src/routes/(embed)/documents/[id]/annotations/[note_id]/+page.svelte

@@ -24,7 +24,7 @@
   $: sizes = pageSizesFromSpec(doc.page_spec);
   $: aspect = sizes[note.page_number];
   $: url = canonicalNoteUrl(doc, note).toString();
-  $: title = `${note.title} (${$_("document.pageAbbrev")} ${
+  $: title = `${note.title} (${$_("documents.pageAbbrev")} ${
     note.page_number + 1
   })`;
   $: maxWidth = docWidth * notes.width(note);
@@ -67,7 +67,7 @@
     >
       <span class="DC-note-title">{note.title}</span>
       <span class="DC-note-page-number"
-        >({$_("document.pageAbbrev")} {note.page_number + 1})</span
+        >({$_("documents.pageAbbrev")} {note.page_number + 1})</span
       >
     </a>
   </div>

src/routes/(embed)/documents/[id]/pages/[page]/+page.svelte

@@ -28,7 +28,7 @@
   $: slugId = `${doc.id}-${doc.slug}`;
   $: notes = data.notes;
   $: page = +data.page;
-  $: title = `${doc.title} (${$_("document.pageAbbrev")} ${data.page})`;
+  $: title = `${doc.title} (${$_("documents.pageAbbrev")} ${data.page})`;
   $: url = canonicalPageUrl(doc, page).toString();
   $: sizes = pageSizesFromSpec(doc.page_spec);
   $: aspect = sizes[page - 1];

src/routes/app/+page.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { Hourglass24, PlusCircle16 } from "svelte-octicons";
+
+  import Pending from "$lib/components/documents/Pending.svelte";
   import ResultsList, {
     selected,
     total,
@@ -22,6 +24,7 @@
 
   $: searchResults = data.searchResults;
   $: query = data.query;
+  $: pending = data.pending;
 
   function selectAll(e) {
     if (e.target.checked) {
@@ -53,7 +56,13 @@
           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">

src/routes/app/+page.ts

@@ -1,7 +1,7 @@
 import type { SearchOptions } from "$lib/api/types";
 
 import { DEFAULT_PER_PAGE } from "@/config/config.js";
-import { search } from "$lib/api/documents";
+import { search, pending } from "$lib/api/documents";
 import { getPinnedAddons } from "@/lib/api/addons.js";
 
 export async function load({ url, fetch }) {
@@ -30,6 +30,7 @@ export async function load({ url, fetch }) {
     per_page,
     cursor,
     searchResults,
+    pending: pending(fetch),
     pinnedAddons,
   };
 }