@databiosphere/findable-ui 34.1.0 → 35.0.2

package/src/providers/exploreState/actions/syncStateFromUrl/utils.ts

@@ -1,31 +0,0 @@
-import { ExploreState } from "../../../exploreState";
-import { getFilterCount } from "../../../exploreState/utils";
-import { SyncStateFromUrlPayload } from "./types";
-
-/**
- * Builds the next state, syncing the catalog state, feature flag state, and filter state.
- * @param state - Explore state.
- * @param payload - Payload.
- * @returns state.
- */
-export function buildNextState(
-  state: ExploreState,
-  payload: SyncStateFromUrlPayload
-): Partial<ExploreState> {
-  // Initialize filter count and filter state from current state.
-  let filterCount = state.filterCount;
-  let filterState = state.filterState;
-
-  // Only update filter count and filter state if the payload entityListType matches the current tab value.
-  if (payload.entityListType === state.tabValue) {
-    filterCount = getFilterCount(payload.filterState);
-    filterState = payload.filterState;
-  }
-
-  return {
-    catalogState: payload.catalogState,
-    featureFlagState: payload.featureFlagState,
-    filterCount,
-    filterState,
-  };
-}

package/src/providers/exploreState/hooks/UseBeforePopState/useBeforePopState.ts

@@ -1,46 +0,0 @@
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { ExploreStateContextProps } from "../../../exploreState";
-import { syncStateFromUrl } from "../../../exploreState/actions/syncStateFromUrl/dispatch";
-import { getSyncStateFromUrl } from "./utils";
-
-/**
- * useBeforePopState
- *
- * Keeps ExploreState, URL, and page props aligned when the user clicks
- * the browser Back / Forward buttons.
- *
- * This hook runs inside `ExploreStateProvider` (mounted once in `_app`).
- * It adds a single `router.beforePopState` handler that:
- * - Parses the destination URL.
- * - Dispatches `syncStateFromUrl` so filters, catalogue, and feature-flags in context match the URL.
- * - Calls `router.replace(...{ shallow: false })` to trigger a full page transition, ensuring Next.js
- *   re-executes data-fetching methods that shallow routing would otherwise skip.
- *
- * The provider never unmounts, and a second call to `router.beforePopState` simply overwrites the handler.
- * Cleaning up here would wipe out any handler registered later by other code.
- */
-
-export const useBeforePopState = ({
-  exploreDispatch,
-}: ExploreStateContextProps): void => {
-  const router = useRouter();
-  useEffect(() => {
-    router.beforePopState(({ as, options, url }) => {
-      // Grab the expected state from URL.
-      const payload = getSyncStateFromUrl(url, as);
-      // Only dispatch if the url contains the dynamic segment `[entityListType]`.
-      if (payload.entityListType) {
-        // Sync state from URL.
-        exploreDispatch(syncStateFromUrl(payload));
-        // Force a full route transition to ensure page props are refreshed.
-        router.replace(url, as, { ...options, shallow: false });
-        return false;
-      }
-      // Return true to allow the popstate event to continue.
-      return true;
-    });
-    // No cleanup handler: see the JSDoc above for why we do not reset beforePopState here.
-    // Resetting would remove any handler registered by other parts of the app after this hook mounted.
-  }, [exploreDispatch, router]);
-};

package/src/providers/exploreState/hooks/UseBeforePopState/utils.ts

@@ -1,93 +0,0 @@
-import { SelectedFilter } from "../../../../common/entities";
-import { SyncStateFromUrlPayload } from "../../../exploreState/actions/syncStateFromUrl/types";
-import { EXPLORE_URL_PARAMS } from "../../../exploreState/constants";
-
-/**
- * Returns the filters from the resolved URL.
- * @param paramValue - The filter parameter value.
- * @returns The filters or an empty array.
- */
-export function decodeFiltersParamValue(
-  paramValue: string | undefined
-): SelectedFilter[] {
-  return JSON.parse(decodeURIComponent(paramValue || "[]"));
-}
-
-/**
- * Returns the dynamic segment from the resolved URL.
- * @param pattern - The pattern URL.
- * @param resolved - The resolved URL.
- * @param dynamicSegment - The dynamic segment to extract.
- * @returns The dynamic segment or an empty string.
- */
-function getDynamicSegment(
-  pattern: string,
-  resolved: string,
-  dynamicSegment = "[entityListType]"
-): string {
-  // Remove query strings.
-  const patternPath = pattern.split("?")[0];
-  const resolvedPath = resolved.split("?")[0];
-
-  // Check if the pattern ends with the dynamic segment e.g. /data/[entityListType].
-  // We are not interested in a pattern the suggests we are on an entity page e.g. /data/[entityListType]/[entityId].
-  if (!patternPath.endsWith(`/${dynamicSegment}`)) return "";
-
-  // Split into segments.
-  const patternSegments = patternPath.split("/");
-  const resolvedSegments = resolvedPath.split("/");
-
-  // Find the dynamic segment.
-  const idx = patternSegments.findIndex((seg) => seg === dynamicSegment);
-
-  if (idx === -1) return "";
-
-  return resolvedSegments[idx] || "";
-}
-
-/**
- * Returns a parameter from the resolved URL.
- * @param resolved - The resolved URL.
- * @param param - The parameter to extract.
- * @returns The parameter value or undefined.
- */
-export function getParamValue(
-  resolved: string,
-  param: string
-): string | undefined {
-  // Grab the params from the resolved URL.
-  const params = new URLSearchParams(resolved.split("?")[1]);
-  const paramValue = params.get(param);
-
-  // Return the parameter value or undefined.
-  if (!paramValue) return;
-
-  return paramValue;
-}
-
-/**
- * Returns the entity list type, filters, and feature flag state from the URL.
- * A dynamic segment that is not exactly `[entityListType]` is not supported will return entityListType as an empty string.
- * @param url - The URL to extract from.
- * @param as - The resolved URL.
- * @returns An object containing the entity list type, filters, and feature flag state.
- */
-export function getSyncStateFromUrl(
-  url: string,
-  as: string
-): SyncStateFromUrlPayload {
-  // Get the entity list type from the url.
-  const entityListType = getDynamicSegment(url, as);
-
-  // Get the param values for each param.
-  const [catalogState, featureFlagState, filter] = [
-    EXPLORE_URL_PARAMS.CATALOG,
-    EXPLORE_URL_PARAMS.FEATURE_FLAG,
-    EXPLORE_URL_PARAMS.FILTER,
-  ].map((param) => getParamValue(as, param));
-
-  // Decode the filter param value to selected filters.
-  const filterState = decodeFiltersParamValue(filter);
-
-  return { catalogState, entityListType, featureFlagState, filterState };
-}

package/src/providers/exploreStateSync/hooks/UseMetaCommands/handlers.ts

@@ -1,25 +0,0 @@
-import Router, { NextRouter } from "next/router";
-import { ExploreQueryState } from "./types";
-import { buildQuery, stringifyQuery } from "./utils";
-
-/**
- * Updates the URL query parameters based on state.
- * Pushes or replaces the query to the router.
- * @param state - State -- partial explore state.
- * @param currentQuery - Query -- current.
- * @param method - "push" or "replace".
- */
-export function updateUrlFromState(
-  state: ExploreQueryState,
-  currentQuery: NextRouter["query"],
-  method: "push" | "replace" = "push"
-): void {
-  // Build the next query.
-  const query = buildQuery(state);
-
-  // Do nothing if the next query is the same as the current query.
-  if (stringifyQuery(query) === stringifyQuery(currentQuery)) return;
-
-  // Push or replace the query to the router.
-  Router[method]({ query }, undefined, { shallow: true });
-}

package/src/providers/exploreStateSync/hooks/UseMetaCommands/hook.ts

@@ -1,38 +0,0 @@
-import { useRouter } from "next/router";
-import { useEffect, useMemo } from "react";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import { clearMeta } from "../../../exploreState/actions/clearMeta/dispatch";
-import { updateUrlFromState } from "./handlers";
-import { META_COMMAND } from "./types";
-import { getQueryState } from "./utils";
-
-export const useMetaCommands = (): void => {
-  const { exploreDispatch, exploreState } = useExploreState();
-
-  // Router must be ready before executing any meta-command side effects.
-  const { isReady, query } = useRouter();
-
-  // Command.
-  const command = exploreState.meta?.command;
-
-  // Extract relevant state to update URL.
-  const state = useMemo(() => getQueryState(exploreState), [exploreState]);
-
-  useEffect(() => {
-    // Do nothing if the router is not ready.
-    if (!isReady) return;
-
-    switch (command) {
-      case META_COMMAND.STATE_TO_URL_PUSH:
-        updateUrlFromState(state, query);
-        exploreDispatch(clearMeta());
-        break;
-      case META_COMMAND.STATE_TO_URL_REPLACE:
-        updateUrlFromState(state, query, "replace");
-        exploreDispatch(clearMeta());
-        break;
-      default:
-        break;
-    }
-  }, [command, exploreDispatch, isReady, query, state]);
-};

package/src/providers/exploreStateSync/hooks/UseMetaCommands/types.ts

@@ -1,13 +0,0 @@
-import { ExploreState } from "../../../exploreState";
-
-export interface ExploreQueryState {
-  catalog: ExploreState["catalogState"];
-  entityListType: ExploreState["tabValue"];
-  ff: ExploreState["featureFlagState"];
-  filter: ExploreState["filterState"];
-}
-
-export enum META_COMMAND {
-  STATE_TO_URL_PUSH = "STATE_TO_URL_PUSH",
-  STATE_TO_URL_REPLACE = "STATE_TO_URL_REPLACE",
-}

package/src/providers/exploreStateSync/provider.tsx

@@ -1,29 +0,0 @@
-import React, { ReactNode } from "react";
-import { useMetaCommands } from "./hooks/UseMetaCommands/hook";
-
-/**
- * Synchronizes the ExploreView component's state with the Next.js URL.
- *
- * Listens for reducer meta-commands (`STATE_TO_URL_PUSH`/`STATE_TO_URL_REPLACE`)
- * and updates the URL accordingly using router methods.
- *
- * Usage:
- * ```tsx
- * <ExploreStateProvider>
- *   <ExploreStateSyncProvider>
- *     <ExploreView />
- *   </ExploreStateSyncProvider>
- * </ExploreStateProvider>
- * ```
- */
-
-export function ExploreStateSyncProvider({
-  children,
-}: {
-  children: ReactNode;
-}): JSX.Element {
-  // Meta-command related side effects.
-  useMetaCommands();
-
-  return <>{children}</>;
-}