refactor: Reorganize and clean up Browse page files

CHANGELOG.md

@@ -17,6 +17,8 @@ You can also check the
   - Hiding a temporal column and then enabling an interactive filter doesn't
     result in broken state anymore
   - Fixed workflow for populating Varnish cache
+- Maintenance
+  - Improved code organization around Browse page
 
 ### 6.0.0 - 2025-09-05
 

app/browse/lib/create-use-state.ts

@@ -0,0 +1,110 @@
+import { useMemo, useRef, useState } from "react";
+
+import {
+  BrowseFilter,
+  getFiltersFromParams,
+  getParamsFromFilters,
+} from "@/browse/lib/filters";
+import { BrowseParams } from "@/browse/lib/params";
+import { useUrlSyncState } from "@/browse/lib/use-url-sync-state";
+import { SearchCubeResultOrder } from "@/graphql/query-hooks";
+import { useEvent } from "@/utils/use-event";
+
+/**
+ * Creates a hook that provides the current browse state and actions to update it.
+ *
+ * It will persist/recover this state from the URL if `syncWithUrl` is true.
+ *
+ * TODO: Might be a good idea to use a zustand store, where the persistency is controlled
+ * via syncWithUrl. It would be a bit more explicit and easier to understand.
+ */
+export const createUseBrowseState = ({
+  syncWithUrl,
+}: {
+  syncWithUrl: boolean;
+}) => {
+  const useParamsHook = syncWithUrl ? useUrlSyncState : useState<BrowseParams>;
+  return () => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [browseParams, setParams] = useParamsHook({});
+    const {
+      search,
+      type,
+      order,
+      iri,
+      includeDrafts,
+      dataset: paramDataset,
+    } = browseParams;
+    const previousOrderRef = useRef(SearchCubeResultOrder.Score);
+
+    // Support /browse?dataset=<iri> and legacy /browse/dataset/<iri>
+    const dataset = type === "dataset" ? iri : paramDataset;
+    const filters = getFiltersFromParams(browseParams);
+
+    const setSearch = useEvent((v: string) =>
+      setParams((prev) => ({ ...prev, search: v }))
+    );
+    const setIncludeDrafts = useEvent((v: boolean) =>
+      setParams((prev) => ({ ...prev, includeDrafts: v }))
+    );
+    const setOrder = useEvent((v: SearchCubeResultOrder) =>
+      setParams((prev) => ({ ...prev, order: v }))
+    );
+    const setDataset = useEvent((v: string) =>
+      setParams((prev) => ({ ...prev, dataset: v }))
+    );
+
+    return useMemo(() => {
+      const { CreatedDesc, Score } = SearchCubeResultOrder;
+      const previousOrder = previousOrderRef.current;
+
+      return {
+        inputRef,
+        includeDrafts: !!includeDrafts,
+        setIncludeDrafts,
+        onReset: () => {
+          setParams((prev) => ({
+            ...prev,
+            search: "",
+            order: previousOrder === Score ? CreatedDesc : previousOrder,
+          }));
+        },
+        onSubmitSearch: (newSearch: string) => {
+          setParams((prev) => ({
+            ...prev,
+            search: newSearch,
+            order: newSearch === "" ? CreatedDesc : previousOrder,
+          }));
+        },
+        search,
+        order,
+        onSetOrder: (order: SearchCubeResultOrder) => {
+          previousOrderRef.current = order;
+          setOrder(order);
+        },
+        setSearch,
+        setOrder,
+        dataset,
+        setDataset,
+        filters,
+        setFilters: (filters: BrowseFilter[]) => {
+          setParams((prev) => ({
+            ...prev,
+            ...getParamsFromFilters(filters),
+          }));
+        },
+      };
+    }, [
+      includeDrafts,
+      setIncludeDrafts,
+      search,
+      order,
+      setSearch,
+      setOrder,
+      dataset,
+      setDataset,
+      filters,
+      setParams,
+    ]);
+  };
+};

app/browser/filters.tsx → app/browse/lib/filters.tsx

@@ -1,10 +1,10 @@
+import { BrowseParams } from "@/browse/lib/params";
 import {
   DataCubeOrganization,
   DataCubeTermset,
   DataCubeTheme,
   SearchCubeFilterType,
 } from "@/graphql/query-hooks";
-import { BrowseParams } from "@/pages/browse";
 
 export type DataCubeAbout = {
   __typename: "DataCubeAbout";
@@ -18,10 +18,17 @@ export type BrowseFilter =
   | DataCubeTermset;
 
 /** Builds the state search filters from query params */
-
-export const getFiltersFromParams = (params: BrowseParams) => {
+export const getFiltersFromParams = ({
+  type,
+  subtype,
+  subsubtype,
+  iri,
+  subiri,
+  subsubiri,
+  topic,
+}: BrowseParams) => {
   const filters: BrowseFilter[] = [];
-  const { type, subtype, subsubtype, iri, subiri, subsubiri, topic } = params;
+
   for (const [t, i] of [
     [type, iri],
     [subtype, subiri],
@@ -66,9 +73,11 @@ export const getParamsFromFilters = (filters: BrowseFilter[]) => {
     topic: undefined,
   };
   let i = 0;
+
   for (const filter of filters) {
     const typeAttr = i === 0 ? "type" : i === 1 ? "subtype" : "subsubtype";
     const iriAttr = i === 0 ? "iri" : i === 1 ? "subiri" : "subsubiri";
+
     switch (filter.__typename) {
       case "DataCubeTheme":
         params[typeAttr] = "theme";
@@ -89,7 +98,29 @@ export const getParamsFromFilters = (filters: BrowseFilter[]) => {
         const _exhaustiveCheck: never = filter;
         return _exhaustiveCheck;
     }
+
     i++;
   }
+
   return params;
 };
+
+export const encodeFilter = ({ __typename, iri }: BrowseFilter) => {
+  const folder = (() => {
+    switch (__typename) {
+      case "DataCubeTheme":
+        return "theme";
+      case "DataCubeOrganization":
+        return "organization";
+      case "DataCubeAbout":
+        return "topic";
+      case "DataCubeTermset":
+        return "termset";
+      default:
+        const _exhaustiveCheck: never = __typename;
+        return _exhaustiveCheck;
+    }
+  })();
+
+  return `${folder}/${encodeURIComponent(iri)}`;
+};

app/browse/lib/params.ts

@@ -0,0 +1,110 @@
+import { ParsedUrlQuery } from "querystring";
+
+import mapValues from "lodash/mapValues";
+import pick from "lodash/pick";
+import pickBy from "lodash/pickBy";
+import NextLink from "next/link";
+import { Router } from "next/router";
+import { ComponentProps } from "react";
+
+import { truthy } from "@/domain/types";
+import { SearchCubeResultOrder } from "@/graphql/query-hooks";
+
+const params = [
+  "type",
+  "iri",
+  "subtype",
+  "subiri",
+  "subsubtype",
+  "subsubiri",
+  "topic",
+  "includeDrafts",
+  "order",
+  "search",
+  "dataset",
+  "previous",
+] as const;
+
+export type BrowseParams = {
+  type?: "theme" | "organization" | "dataset" | "termset";
+  iri?: string;
+  subtype?: "theme" | "organization" | "termset";
+  subiri?: string;
+  subsubtype?: "theme" | "organization" | "termset";
+  subsubiri?: string;
+  topic?: string;
+  includeDrafts?: boolean;
+  order?: SearchCubeResultOrder;
+  search?: string;
+  dataset?: string;
+  previous?: string;
+};
+
+export const getBrowseParamsFromQuery = (
+  query: Router["query"]
+): BrowseParams => {
+  const {
+    type,
+    iri,
+    subtype,
+    subiri,
+    subsubtype,
+    subsubiri,
+    topic,
+    includeDrafts,
+    ...values
+  } = mapValues(pick(query, params), (v) => (Array.isArray(v) ? v[0] : v));
+  const previous: BrowseParams | undefined = values.previous
+    ? JSON.parse(values.previous)
+    : undefined;
+
+  return pickBy(
+    {
+      ...values,
+      type: type ?? previous?.type,
+      iri: iri ?? previous?.iri,
+      subtype: subtype ?? previous?.subtype,
+      subiri: subiri ?? previous?.subiri,
+      subsubtype: subsubtype ?? previous?.subsubtype,
+      subsubiri: subsubiri ?? previous?.subsubiri,
+      topic: topic ?? previous?.topic,
+      includeDrafts: includeDrafts ?? previous?.includeDrafts,
+    },
+    (d) => d !== undefined
+  );
+};
+
+export const buildURLFromBrowseParams = ({
+  type,
+  iri,
+  subtype,
+  subiri,
+  subsubtype,
+  subsubiri,
+  ...query
+}: BrowseParams): ComponentProps<typeof NextLink>["href"] => {
+  const typePart = buildQueryPart(type, iri);
+  const subtypePart = buildQueryPart(subtype, subiri);
+  const subsubtypePart = buildQueryPart(subsubtype, subsubiri);
+  const pathname = ["/browse", typePart, subtypePart, subsubtypePart]
+    .filter(truthy)
+    .join("/");
+
+  return { pathname, query };
+};
+
+const buildQueryPart = (type: string | undefined, iri: string | undefined) => {
+  if (!type || !iri) {
+    return undefined;
+  }
+
+  return `${encodeURIComponent(type)}/${encodeURIComponent(iri)}`;
+};
+
+export const extractParamFromPath = (path: string, param: string) => {
+  return path.match(new RegExp(`[&?]${param}=(.*?)(&|$)`));
+};
+
+export const isOdsIframe = (query: ParsedUrlQuery) => {
+  return query["odsiframe"] === "true";
+};

app/components/use-redirect-to-latest-cube.spec.tsx → app/browse/lib/use-redirect-to-latest-cube.spec.tsx

@@ -2,9 +2,10 @@ import { renderHook } from "@testing-library/react";
 import { NextRouter, useRouter } from "next/router";
 import { describe, expect, it, Mock, vi } from "vitest";
 
-import { useRedirectToLatestCube } from "@/components/use-redirect-to-latest-cube";
+import { useRedirectToLatestCube } from "@/browse/lib/use-redirect-to-latest-cube";
 import { useLocale } from "@/locales/use-locale";
 import { queryLatestCubeIri } from "@/rdf/query-latest-cube-iri";
+import { sleep } from "@/utils/sleep";
 
 vi.mock("@/rdf/query-latest-cube-iri", () => ({
   queryLatestCubeIri: vi.fn(),
@@ -18,9 +19,6 @@ vi.mock("@/locales/use-locale", () => ({
   useLocale: vi.fn(),
 }));
 
-const sleep = (duration: number) =>
-  new Promise((resolve) => setTimeout(resolve, duration));
-
 describe("use redirect to versioned cube", () => {
   const setup = async ({
     versionedCube,