Merge pull request #452 from MuckRock/paginator

Consolidates onto single Paginator component

jest-setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

jest.config.js

@@ -6,13 +6,15 @@ export default {
   },
   moduleFileExtensions: ["js", "ts", "svelte"],
   rootDir: "src",
-  setupFiles: ["dotenv/config"],
+  setupFiles: ["dotenv/config", "<rootDir>/langs/i18n.js"],
+  setupFilesAfterEnv: ["<rootDir>/../jest-setup.js"],
   testEnvironment: "jsdom",
   transform: {
     "^.+\\.svelte$": ["svelte-jester", { preprocess: true }],
-    "^.+\\.ts$": ["ts-jest", { useESM: true }],
+    "^.+\\.ts$": ["ts-jest", { useESM: true, tsconfig: "tsconfig.test.json" }],
   },
   transformIgnorePatterns: ["/node_modules/(?!svue).+\\.js$"],
+  coverageDirectory: "<rootDir>/../coverage",
   collectCoverageFrom: ["./**/*.{js,ts,svelte}"],
-  coverageReporters: ["html", "text-summary"],
+  coverageReporters: ["lcov", "html", "text-summary"],
 };

package.json

@@ -65,10 +65,12 @@
     "@storybook/svelte": "^7.6.10",
     "@storybook/svelte-webpack5": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/svelte": "^4.1.0",
     "@types/lucene": "^2.1.7",
     "chromatic": "^9.1.0",
     "eslint": "^7.32.0",
-    "jest": "^29.6.3",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "msw": "^1.2.3",
     "msw-storybook-addon": "^1.10.0",

src/addons/browser/Browser.svelte

@@ -2,13 +2,14 @@
 
 <script lang="ts">
   import { _ } from "svelte-i18n";
-  import { baseApiUrl } from "../../api/base.js";
   import AddOnList from "./AddOnList.svelte";
   import type { AddOnListItem } from "../types.ts";
-  import Drawer from "../Drawer.svelte";
-  import Paginator from "../Paginator.svelte";
-  import Search, { query } from "./SearchInput.svelte";
-  import Filters, { filter, FILTERS, CATEGORIES } from "./Filters.svelte";
+  import Filters from "./Filters.svelte";
+  import Categories from "./Categories.svelte";
+  import { buildParams, buildUrl, filter } from "./browser";
+  import Drawer from "../../common/Drawer.svelte";
+  import Paginator from "../../common/Paginator.svelte";
+  import Search, { query } from "../../common/SearchInput.svelte";
   import Pin from "../../common/icons/Pin.svelte";
   import Star from "../../common/icons/Star.svelte";
   import Credit from "../../common/icons/Credit.svelte";
@@ -17,29 +18,29 @@
   export let per_page = 10;
 
   let drawer: Drawer;
-  let loading = false;
-  let error = null;
-  let res: {
-    next?: string | null;
-    previous?: string | null;
-    results?: AddOnListItem[];
-  } = {};
-
-  const options: RequestInit = {
-    credentials: "include",
-  };
 
   $: urlParams = buildParams({
     per_page,
     query: $query,
     filter: $filter,
   });
-
   $: url = buildUrl(urlParams);
   $: next_url = res.next ? new URL(res.next).toString() : null;
   $: previous_url = res.previous ? new URL(res.previous).toString() : null;
   $: items = res.results;
 
+  /** Network logic */
+  let loading = false;
+  let error = null;
+  let res: {
+    next?: string | null;
+    previous?: string | null;
+    results?: AddOnListItem[];
+  } = {};
+  const options: RequestInit = {
+    credentials: "include",
+  };
+
   export async function load(url) {
     loading = true;
 
@@ -64,49 +65,6 @@
   $: loadNext = () => load(next_url);
   $: loadPrev = () => load(previous_url);
   $: reload = () => load(url);
-
-  function buildUrl({ query = "", filters = {}, per_page = 5 }) {
-    const u = new URL("addons/", baseApiUrl);
-
-    u.search = new URLSearchParams({
-      query,
-      per_page: String(per_page),
-      ...filters,
-    }).toString();
-
-    return u.toString();
-  }
-
-  function buildParams({
-    query = "",
-    per_page = 5,
-    filter = [],
-  }: {
-    query: string;
-    per_page: number;
-    filter: string | string[];
-  }) {
-    if (!Array.isArray(filter)) {
-      filter = [filter];
-    }
-    const params = { per_page, query, filters: {} };
-    const filters = FILTERS.map(([n]) => n).filter((n) => filter.includes(n));
-    const categories = CATEGORIES.map(([n]) => n).filter((n) =>
-      filter.includes(n),
-    );
-    params.filters = filters.reduce((m, f) => {
-      if (f !== "all") {
-        m[f] = true;
-      }
-      return m;
-    }, {});
-
-    if (categories.length) {
-      params.filters["category"] = categories.join(",");
-    }
-
-    return params;
-  }
 </script>
 
 <Drawer bind:this={drawer} bind:visible anchor="right" on:open on:close>
@@ -117,7 +75,10 @@
     </header>
     <aside class="sidebar">
       <div class="search"><Search /></div>
-      <div class="filters"><Filters /></div>
+      <div class="filters">
+        <Filters />
+        <Categories />
+      </div>
     </aside>
     <main class="results">
       <div class="list">

src/addons/browser/Categories.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { _ } from "svelte-i18n";
+  import { filter, CATEGORIES } from "./browser";
+  import Filter from "./Filter.svelte";
+</script>
+
+<div class="categories">
+  <h3>{$_("addonBrowserDialog.categories")}</h3>
+  <ul>
+    {#each CATEGORIES as [category, name]}
+      <li class="category" class:selected={$filter.includes(category)}>
+        <Filter {name} selected={$filter.includes(category)}>
+          <input
+            slot="input"
+            type="radio"
+            value={category}
+            bind:group={$filter}
+          />
+        </Filter>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+  ul {
+    list-style: none;
+    margin-block-start: 0;
+    padding-inline-start: 0;
+  }
+
+  ul li {
+    margin-bottom: 0.25em;
+  }
+  h3 {
+    margin: 0.5em;
+  }
+</style>