connect per_page and cursor to URL

src/lib/api/documents.ts

@@ -1,6 +1,8 @@
 /** API helpers related to documents.
  * Lots of duplicated code here that should get consolidated at some point.
  */
+import type { Document, DocumentResults } from "./types";
+
 import { error } from "@sveltejs/kit";
 import { APP_URL, BASE_API_URL } from "@/config/config.js";
 import { DEFAULT_EXPAND } from "@/api/common.js";
@@ -10,14 +12,17 @@ import { isErrorCode } from "../utils";
 /** Search documents */
 export async function search(
   query = "",
-  highlight = false,
+  options = { hl: false, per_page: 25, cursor: "" },
   fetch = globalThis.fetch,
-) {
+): Promise<DocumentResults> {
   const endpoint = new URL("documents/search/", BASE_API_URL);
 
-  endpoint.searchParams.set("expand", DEFAULT_EXPAND);
+  // 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/components/Search.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import { Search24, XCircleFill24 } from "svelte-octicons";
-  import Button from "./common/Button.svelte";
 
   export let query: string = "";
+
   let input: HTMLInputElement;
 
   function clear() {
@@ -11,16 +11,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"

src/routes/app/+page.svelte

@@ -1,39 +1,36 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { Hourglass24 } from "svelte-octicons";
+  import { page } from "$app/stores";
+  import { goto } from "$app/navigation";
+
   import ResultsList from "$lib/components/documents/ResultsList.svelte";
   import ContentLayout from "$lib/components/ContentLayout.svelte";
   import PageToolbar from "$lib/components/common/PageToolbar.svelte";
   import Search from "$lib/components/Search.svelte";
   import Empty from "$lib/components/common/Empty.svelte";
   import Paginator from "@/common/Paginator.svelte";
-  import type { DocumentResults } from "@/lib/api/types";
 
-  export let data: {
-    query: string;
-    searchResults: Promise<DocumentResults>;
-  };
+  export let data;
 
-  let page = 1;
-  let per_page = 25;
+  let page_number = 1;
   let error: Error;
 
   $: searchResults = data.searchResults;
   $: query = data.query;
+  $: per_page = data.per_page;
 
-  async function load(url) {
-    const res = await fetch(url, { credentials: "include" }).catch((e) => {
-      error = e;
-      throw e; // if something went wrong here, something broke
-    });
-
-    if (!res.ok) {
-      // 404 or something similar
-      console.error(res.statusText);
-      error = { name: "Loading error", message: res.statusText };
-    }
+  // update the cursor URL param, forcing refresh of search results
+  function setCursor(url: URL) {
+    const c = url.searchParams.get("cursor");
+    $page.url.searchParams.set("cursor", c);
+    goto($page.url);
+  }
 
-    data.searchResults = res.json();
+  // update the per_page query param
+  function setPerPage(e) {
+    $page.url.searchParams.set("per_page", e.target.value);
+    goto($page.url);
   }
 </script>
 
@@ -60,25 +57,25 @@
         {@const next = sr.next}
         {@const previous = sr.previous}
         <Paginator
-          {page}
+          page={page_number}
           totalPages={total_pages}
           has_next={Boolean(next)}
           has_previous={Boolean(previous)}
           on:next={(e) => {
-            page = Math.min(total_pages, page + 1);
-            load(next);
+            page_number = Math.min(total_pages, page_number + 1);
+            if (next) setCursor(new URL(next));
           }}
           on:previous={(e) => {
-            page = Math.max(1, page - 1);
-            load(previous);
+            page_number = Math.max(1, page_number - 1);
+            if (previous) setCursor(new URL(previous));
           }}
         />
       {/await}
     </svelte:fragment>
 
     <label slot="right">
       Per page
-      <select name="per_page" bind:value={per_page}>
+      <select name="per_page" value={per_page} on:change={setPerPage}>
         <option value={25}>25</option>
         <option value={50}>50</option>
         <option value={100}>100</option>

src/routes/app/+page.ts

@@ -2,10 +2,21 @@ import { search } from "$lib/api/documents.js";
 
 export async function load({ url, fetch }) {
   const query = url.searchParams.get("q") || "";
-  const searchResults = search(query, true, fetch);
+  const per_page = +url.searchParams.get("per_page") || 25;
+  const cursor = url.searchParams.get("cursor") || "";
+
+  const options = {
+    hl: true,
+    per_page,
+    cursor,
+  };
+
+  const searchResults = search(query, options, fetch);
 
   return {
-    searchResults,
     query,
+    per_page,
+    cursor,
+    searchResults,
   };
 }