Convert api/notes to TS

src/lib/api/notes.test.ts

@@ -0,0 +1,43 @@
+import { test, describe, expect } from "vitest";
+
+import { APP_URL } from "@/config/config.js";
+import * as notes from "./notes";
+import type { Document, Note } from "./types";
+import document from "./fixtures/documents/document.json";
+import note from "./fixtures/notes/note.json";
+
+describe("fetching notes", () => {
+  test.todo("notes.get");
+  test.todo("notes.list");
+});
+
+describe("note helper methods", () => {
+  const d = document as Document;
+  const n = note as Note;
+
+  test("canonicalNoteUrl", () => {
+    expect(notes.canonicalNoteUrl(d, n)).toStrictEqual(
+      new URL(
+        "/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/annotations/557/",
+        APP_URL,
+      ),
+    );
+  });
+
+  test("noteUrl", () => {
+    expect(notes.noteUrl(d, n)).toStrictEqual(
+      new URL(
+        "/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/#document/p3/a557",
+        APP_URL,
+      ),
+    );
+  });
+
+  test("width", () => {
+    expect(notes.width(n)).toStrictEqual(n.x2 - n.x1);
+  });
+
+  test("height", () => {
+    expect(notes.height(n)).toStrictEqual(n.y2 - n.y1);
+  });
+});

src/lib/api/notes.ts

@@ -0,0 +1,82 @@
+import { error } from "@sveltejs/kit";
+import { BASE_API_URL } from "@/config/config.js";
+import { DEFAULT_EXPAND } from "@/api/common.js";
+import { canonicalUrl } from "./documents";
+import type { Document, Note, NoteResults } from "./types";
+import { isErrorCode } from "../utils";
+
+/**
+ * Load notes from a single document from the API
+ * @example https://api.www.documentcloud.org/api/documents/2622/notes/
+ */
+export async function list(
+  doc_id: number,
+  fetch = globalThis.fetch,
+): Promise<NoteResults> {
+  const endpoint = new URL(`documents/${doc_id}/notes.json`, BASE_API_URL);
+
+  endpoint.searchParams.set("expand", DEFAULT_EXPAND);
+
+  const resp = await fetch(endpoint, { credentials: "include" });
+
+  if (isErrorCode(resp.status)) {
+    error(resp.status, resp.statusText);
+  }
+
+  return resp.json();
+}
+
+/**
+ * Load a single note from a single document from the API
+ * @example https://api.www.documentcloud.org/api/documents/2622/notes/549/
+ */
+export async function get(
+  doc_id: number,
+  note_id: number,
+  fetch = globalThis.fetch,
+): Promise<Note> {
+  const endpoint = new URL(
+    `documents/${doc_id}/notes/${note_id}.json`,
+    BASE_API_URL,
+  );
+
+  endpoint.searchParams.set("expand", DEFAULT_EXPAND);
+
+  const resp = await fetch(endpoint, { credentials: "include" });
+
+  if (isErrorCode(resp.status)) {
+    error(resp.status, resp.statusText);
+  }
+
+  return resp.json();
+}
+
+/**
+ * Canonical URL for a note, relative to the current server
+ * This will be correct in all environments, including deploy previews
+ * @example https://www.documentcloud.org/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/annotations/557
+ */
+export function canonicalNoteUrl(document: Document, note: Note): URL {
+  return new URL(`annotations/${note.id}/`, canonicalUrl(document));
+}
+
+/**
+ * Hash URL for a note within the document viewer
+ * @example https://www.documentcloud.org/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/#document/p3/a557
+ */
+export function noteUrl(document: Document, note: Note): URL {
+  return new URL(
+    `#document/p${note.page_number + 1}/a${note.id}`,
+    canonicalUrl(document),
+  );
+}
+
+/** Width of a note, relative to the document */
+export function width(note: Note): number {
+  return note.x2 - note.x1;
+}
+
+/** Height of a note, relative to the document */
+export function height(note: Note): number {
+  return note.y2 - note.y1;
+}

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

@@ -5,9 +5,9 @@
 
   import { informSize } from "@/embed/iframeSizer.js";
   import { pageImageUrl } from "@/lib/api/documents";
-  import * as notes from "$lib/api/notes.js";
+  import * as notes from "@/lib/api/notes";
   import { embedUrl } from "$lib/api/embed";
-  import { canonicalNoteUrl, noteUrl } from "$lib/api/notes.js";
+  import { canonicalNoteUrl, noteUrl } from "@/lib/api/notes";
   import { pageSizesFromSpec } from "@/api/pageSize.js";
   import { IMAGE_WIDTHS_MAP } from "@/config/config.js";
 

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

@@ -1,6 +1,6 @@
 // load a note for embedding
 import * as documents from "@/lib/api/documents";
-import * as notesApi from "$lib/api/notes.js";
+import * as notesApi from "$lib/api/notes";
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ params, url, fetch }) {

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

@@ -0,0 +1,20 @@
+// load data for a single page embed
+import * as documents from "@/lib/api/documents";
+import * as notesApi from "$lib/api/notes";
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, fetch }) {
+  const { page } = params;
+  let [document, notes] = await Promise.all([
+    documents.get(params.id, fetch),
+    notesApi.list(params.id, fetch),
+  ]);
+
+  notes = notes.results.filter((note) => note.page_number === page - 1);
+
+  return {
+    document,
+    notes,
+    page,
+  };
+}

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

@@ -1,6 +1,6 @@
 // load data for a single page embed
 import * as documents from "@/lib/api/documents";
-import * as notesApi from "$lib/api/notes.js";
+import * as notesApi from "$lib/api/notes";
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ params, fetch }) {