Infinite scroll for search results

src/config/config.js

@@ -63,6 +63,7 @@ export const IMAGE_WIDTHS = IMAGE_WIDTHS_ENTRIES.map(([name, width]) => [
 
 export const IMAGE_WIDTHS_MAP = new Map(IMAGE_WIDTHS_ENTRIES);
 
+export const DEFAULT_PER_PAGE = 25;
 export const MAX_PER_PAGE = 100;
 
 export const PDF_SIZE_LIMIT = 525336576;

src/lib/api/documents.ts

@@ -1,7 +1,7 @@
 /** API helpers related to documents.
  * Lots of duplicated code here that should get consolidated at some point.
  */
-import type { Document, sizes } from "./types";
+import type { Document, DocumentResults, SearchOptions, sizes } from "./types";
 
 import { error } from "@sveltejs/kit";
 
@@ -10,17 +10,29 @@ import { isOrg } from "@/api/types/orgAndUser";
 import { APP_URL, BASE_API_URL } from "@/config/config.js";
 import { isErrorCode } from "../utils";
 
-/** Search documents */
+/**
+ * Search documents
+ * https://www.documentcloud.org/help/search/
+ *
+ *  */
 export async function search(
   query = "",
-  highlight = false,
+  options: SearchOptions = {
+    hl: Boolean(query),
+    per_page: 25,
+    cursor: "",
+    version: "2.0",
+  },
   fetch = globalThis.fetch,
-) {
+): Promise<DocumentResults> {
   const endpoint = new URL("documents/search/", BASE_API_URL);
 
   endpoint.searchParams.set("expand", DEFAULT_EXPAND);
   endpoint.searchParams.set("q", query);
-  endpoint.searchParams.set("hl", String(highlight));
+
+  for (const [k, v] of Object.entries(options)) {
+    endpoint.searchParams.set(k, String(v));
+  }
 
   const resp = await fetch(endpoint, { credentials: "include" });
 

src/lib/api/types.d.ts

@@ -105,7 +105,6 @@ export interface Document {
   note_highlights?: Record<string, Highlight[]>;
 }
 
-// export type DocumentResults = Page<Document>;
 export interface DocumentResults extends Page<Document> {}
 
 export interface Note {
@@ -135,6 +134,14 @@ export interface Section {
 
 export type SectionResults = Page<Section>;
 
+export interface SearchOptions {
+  hl?: boolean;
+  per_page?: number;
+  cursor?: string;
+  expand?: string;
+  version?: number | string;
+}
+
 export interface OEmbed {
   version: "1.0";
   provider_name: "DocumentCloud";

src/lib/components/Search.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { Search24, XCircleFill24 } from "svelte-octicons";
-  import Button from "./common/Button.svelte";
 
   export let query: string = "";
   let input: HTMLInputElement;
@@ -11,16 +10,19 @@
   }
 </script>
 
-<form class="container" on:submit|preventDefault>
+<form class="container" on:submit>
   <label for="query" title="Search"><Search24 /></label>
   <input
+    type="search"
     id="query"
-    name="query"
+    name="q"
+    autocomplete="off"
+    placeholder="Search…"
     bind:value={query}
     bind:this={input}
     on:change
-    autocomplete="off"
-    placeholder="Search…"
+    on:input
+    on:reset
   />
   <button
     title="Clear Search"