Merge pull request #754 from MuckRock/750-flat-pages

src/lib/api/flatpages.ts

@@ -1,18 +1,37 @@
-import type { Flatpage } from "./types";
+import type { APIResponse, Flatpage } from "./types";
+
 import { BASE_API_URL } from "@/config/config";
+import { getApiResponse } from "$lib/utils/api";
 
+/**
+ * Return the tip of the day flatpage
+ * @param fetch
+ */
 export async function getTipOfDay(
   fetch = globalThis.fetch,
 ): Promise<Flatpage | undefined> {
-  const endpoint = new URL("flatpages/tipofday/", BASE_API_URL);
-  try {
-    const resp = await fetch(endpoint, { credentials: "include" }).catch(
-      console.error,
-    );
-    if (!resp) return;
-    if (!resp.ok) return;
-    return resp.json();
-  } catch (e) {
-    return;
+  const { data, error } = await get("/tipofday/", fetch);
+  if (!error) {
+    return data;
   }
 }
+
+/**
+ * Get a single flat page
+ * @param path
+ * @param fetch
+ */
+export async function get(
+  path: string,
+  fetch = globalThis.fetch,
+): Promise<APIResponse<Flatpage, unknown>> {
+  if (!path.startsWith("/")) {
+    path = "/" + path;
+  }
+
+  const endpoint = new URL("flatpages" + path, BASE_API_URL);
+  console.log(endpoint.href);
+  const resp = await fetch(endpoint, { credentials: "include" });
+
+  return getApiResponse<Flatpage>(resp);
+}

src/lib/api/tests/flatpages.test.ts

@@ -0,0 +1,35 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { BASE_API_URL } from "@/config/config";
+import { flatpage } from "@/test/fixtures/flatpages";
+import * as flatpages from "../flatpages";
+
+describe("flatpages", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test("flatpages.get", async () => {
+    const mockFetch = vi.fn().mockImplementation(async (endpoint, options) => {
+      return {
+        ok: true,
+        status: 200,
+        async json() {
+          return flatpage;
+        },
+      };
+    });
+
+    const { error, data } = await flatpages.get(flatpage.url, mockFetch);
+
+    expect(error).toBeUndefined();
+    expect(data).toEqual(flatpage);
+
+    expect(mockFetch).toHaveBeenCalledWith(
+      new URL("/api/flatpages" + flatpage.url, BASE_API_URL),
+      {
+        credentials: "include",
+      },
+    );
+  });
+});

src/routes/(pages)/[...path]/+page.svelte

@@ -3,8 +3,8 @@
 
   export let data;
 
-  $: title = data.data.title;
-  $: content = data.data.content;
+  $: title = data.title;
+  $: content = data.content;
 </script>
 
 <svelte:head>

src/routes/(pages)/[...path]/+page.ts

@@ -1,19 +1,15 @@
 // load data for flatpages
-import { redirect } from "@sveltejs/kit";
+import { error } from "@sveltejs/kit";
 import { BASE_API_URL } from "@/config/config.js";
-import { isRedirectCode } from "@/lib/utils/api";
-import { getApiResponse } from "$lib/utils/api";
-import type { Flatpage } from "@/lib/api/types.js";
 
-const ROOT = new URL("flatpages/", BASE_API_URL);
+import * as flatpages from "$lib/api/flatpages";
 
-/** @type {import('./$types').PageLoad} */
 export async function load({ fetch, params }) {
-  const endpoint = new URL(params.path, ROOT);
-  const resp = await fetch(endpoint, { credentials: "include" });
-  // we should be following redirects, so this shouldn't happen
-  if (isRedirectCode(resp.status)) {
-    redirect(resp.status, resp.headers.get("Location"));
+  const { data, error: err } = await flatpages.get(params.path, fetch);
+
+  if (err) {
+    return error(err.status, { message: err.message });
   }
-  return getApiResponse<Flatpage>(resp);
+
+  return data;
 }

src/routes/(pages)/home/+page.ts

@@ -1,34 +1,27 @@
 // load homepage data
 import { error } from "@sveltejs/kit";
+import DOMPurify from "isomorphic-dompurify";
 import { marked } from "marked";
 import { gfmHeadingId } from "marked-gfm-heading-id";
-import DOMPurify from "isomorphic-dompurify";
 
-import { BASE_API_URL } from "@/config/config.js";
-import { isErrorCode } from "@/lib/utils/api";
+import * as flatpages from "$lib/api/flatpages";
 
 marked.use(gfmHeadingId());
 
-const ROOT = new URL("flatpages/", BASE_API_URL);
-const endpoint = new URL("home/", ROOT);
-
-/** @type {import('./$types').PageLoad} */
 export async function load({ fetch }) {
-  const resp = await fetch(endpoint, { credentials: "include" });
+  const { data: page, error: err } = await flatpages.get("/home/", fetch);
 
-  if (isErrorCode(resp.status)) {
-    error(resp.status, resp.statusText);
+  if (err) {
+    return error(err.status, { message: err.message });
   }
 
-  const page = await resp.json();
-
   return {
     title: page.title,
     url: page.url,
     content: render(page.content),
   };
 }
 
-function render(content) {
+function render(content: string): string {
   return DOMPurify.sanitize(marked.parse(content));
 }