Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

connect per_page and cursor to URL #489

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions src/lib/api/documents.ts
Original file line number Diff line number Diff line change
@@ -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";

Expand All @@ -10,17 +10,31 @@ 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/
*
* Note that in some environments, pagination works by setting page=N
* while in others we use cursers.
* */
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" });

Expand Down
9 changes: 9 additions & 0 deletions src/lib/api/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,15 @@ export interface Section {

export type SectionResults = Page<Section>;

export interface SearchOptions {
hl?: boolean;
per_page?: number;
page?: number;
cursor?: string;
expand?: string;
version?: number | string;
}

export interface OEmbed {
version: "1.0";
provider_name: "DocumentCloud";
Expand Down
13 changes: 8 additions & 5 deletions src/lib/components/Search.svelte
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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"
Expand Down
65 changes: 36 additions & 29 deletions src/routes/app/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,39 +1,46 @@
<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>;
};

let page = 1;
let per_page = 25;
let error: Error;
export let data;

$: searchResults = data.searchResults;
$: query = data.query;
$: per_page = data.per_page;
$: current = data.cursor;
// $: page_number = data.page;

// update the cursor URL param, forcing refresh of search results
function setCursor(next: string, previous: string) {
// snapshot the current URL
const u = new URL($page.url);

async function load(url) {
const res = await fetch(url, { credentials: "include" }).catch((e) => {
error = e;
throw e; // if something went wrong here, something broke
});
u.searchParams.set("cursor", next);

if (!res.ok) {
// 404 or something similar
console.error(res.statusText);
error = { name: "Loading error", message: res.statusText };
// we need to store the current cursor in the URL so we can go back
if (previous) {
u.searchParams.set("previous", current);
} else {
u.searchParams.delete("previous");
}

data.searchResults = res.json();
return goto(u);
}

// update the per_page query param
async function setPerPage(e) {
const u = new URL($page.url);
u.searchParams.set("per_page", e.target.value);
return goto(u);
}
</script>

Expand All @@ -58,27 +65,27 @@
{@const count = sr.count}
{@const total_pages = Math.ceil(count / per_page)}
{@const next = sr.next}
{@const previous = sr.previous}

<Paginator
{page}
totalPages={total_pages}
has_next={Boolean(next)}
has_previous={Boolean(previous)}
on:next={(e) => {
page = Math.min(total_pages, page + 1);
load(next);
has_previous={Boolean(current)}
on:next={async (e) => {
const cursor = new URL(next).searchParams.get("cursor");
await setCursor(cursor, current);
// page_number = Math.min(total_pages, page_number + 1);
}}
on:previous={(e) => {
page = Math.max(1, page - 1);
load(previous);
on:previous={async (e) => {
await setCursor(current, "");
// page_number = Math.max(1, page_number - 1);
}}
/>
{/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>
Expand Down
23 changes: 21 additions & 2 deletions src/routes/app/+page.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,30 @@
import type { SearchOptions } from "$lib/api/types";
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: SearchOptions = {
hl: Boolean(query),
version: "2.0",
};

if (per_page) {
options.per_page = per_page;
}

if (cursor) {
options.cursor = cursor;
}

const searchResults = search(query, options, fetch);

return {
searchResults,
query,
per_page,
cursor,
searchResults,
};
}
Loading