@databiosphere/findable-ui 32.0.0 → 32.1.0

package/src/providers/exploreState/hooks/UseMetaCommands/useMetaCommands.ts

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+import { ExploreStateContextProps } from "../../../exploreState";
+import { clearMeta } from "../../actions/clearMeta/dispatch";
+import { navigateToFilters, replaceToFilters } from "./actions";
+import { META_COMMAND } from "./types";
+
+export const useMetaCommands = ({
+  exploreDispatch,
+  exploreState,
+}: ExploreStateContextProps): void => {
+  useEffect(() => {
+    const command = exploreState.meta?.command;
+
+    switch (command) {
+      case META_COMMAND.NAVIGATE_TO_FILTERS:
+        navigateToFilters(exploreState);
+        exploreDispatch(clearMeta());
+        break;
+      case META_COMMAND.REPLACE_TO_FILTERS:
+        replaceToFilters(exploreState);
+        exploreDispatch(clearMeta());
+        break;
+      default:
+        break;
+    }
+  }, [exploreDispatch, exploreState]);
+};

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

@@ -0,0 +1,33 @@
+import { UrlObject } from "url";
+import { ExploreState } from "../../../exploreState";
+import { EXPLORE_URL_PARAMS } from "../../../exploreState/constants";
+
+/**
+ * Builds a query object from the current explore state.
+ * Contains catalog, feature flag, filter, and entity list type.
+ * @param exploreState - The current explore state.
+ * @returns A query object.
+ */
+export function buildQuery(exploreState: ExploreState): UrlObject["query"] {
+  const query: UrlObject["query"] = {};
+
+  // Entity list type.
+  query["entityListType"] = exploreState.tabValue;
+
+  // Filter state.
+  if (exploreState.filterState.length > 0) {
+    query[EXPLORE_URL_PARAMS.FILTER] = JSON.stringify(exploreState.filterState);
+  }
+
+  // Catalog state.
+  if (exploreState.catalogState) {
+    query[EXPLORE_URL_PARAMS.CATALOG] = exploreState.catalogState;
+  }
+
+  // Feature flag state.
+  if (exploreState.featureFlagState) {
+    query[EXPLORE_URL_PARAMS.FEATURE_FLAG] = exploreState.featureFlagState;
+  }
+
+  return query;
+}

package/src/providers/exploreState/initializer/constants.ts

@@ -36,6 +36,7 @@ export const INITIAL_STATE: ExploreState = {
   filterState: [],
   listItems: [],
   loading: true,
+  meta: null,
   paginationState: DEFAULT_PAGINATION_STATE,
   rowPreview: undefined,
   tabValue: "",

package/src/providers/exploreState.tsx

@@ -20,6 +20,10 @@ import {
 } from "../hooks/useCategoryFilter";
 import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
+import { clearMetaAction } from "./exploreState/actions/clearMeta/action";
+import { ClearMetaAction } from "./exploreState/actions/clearMeta/types";
+import { syncStateFromUrlAction } from "./exploreState/actions/syncStateFromUrl/action";
+import { SyncStateFromUrlAction } from "./exploreState/actions/syncStateFromUrl/types";
 import { updateGroupingAction } from "./exploreState/actions/updateGrouping/action";
 import { UpdateGroupingAction } from "./exploreState/actions/updateGrouping/types";
 import { updateColumnVisibilityAction } from "./exploreState/actions/updateVisibility/action";
@@ -28,7 +32,11 @@ import {
   EntityPageStateMapper,
   EntityStateByCategoryGroupConfigKey,
   ListItem,
+  Meta,
 } from "./exploreState/entities";
+import { useBeforePopState } from "./exploreState/hooks/UseBeforePopState/useBeforePopState";
+import { META_COMMAND } from "./exploreState/hooks/UseMetaCommands/types";
+import { useMetaCommands } from "./exploreState/hooks/UseMetaCommands/useMetaCommands";
 import {
   DEFAULT_PAGINATION_STATE,
   INITIAL_STATE,
@@ -87,6 +95,7 @@ export type ExploreState = {
   filterState: SelectedFilter[];
   listItems: ListItems;
   loading: boolean;
+  meta: Meta | null;
   paginationState: PaginationState;
   rowPreview: RowPreviewState;
   tabValue: string;
@@ -206,6 +215,12 @@ export function ExploreStateProvider({
     });
   }, [exploreDispatch, token]);
 
+  // Meta-command related side effects.
+  useMetaCommands({ exploreDispatch, exploreState });
+
+  // Before pop state related side effects (forward / backward navigation by browser buttons).
+  useBeforePopState({ exploreDispatch, exploreState });
+
   return (
     <ExploreStateContext.Provider value={exploreContextValue}>
       {children}
@@ -219,12 +234,14 @@ export function ExploreStateProvider({
 export enum ExploreActionKind {
   ApplySavedFilter = "APPLY_SAVED_FILTER",
   ClearFilters = "CLEAR_FILTERS",
+  ClearMeta = "CLEAR_META",
   PaginateTable = "PAGINATE_TABLE",
   PatchExploreResponse = "PATCH_EXPLORE_RESPONSE",
   ProcessExploreResponse = "PROCESS_EXPLORE_RESPONSE",
   ResetExploreResponse = "RESET_EXPLORE_RESPONSE",
   ResetState = "RESET_STATE",
   SelectEntityType = "SELECT_ENTITY_TYPE",
+  SyncStateFromUrl = "SYNC_STATE_FROM_URL",
   UpdateColumnVisibility = "UPDATE_COLUMN_VISIBILITY",
   UpdateEntityFilters = "UPDATE_ENTITY_FILTERS",
   UpdateEntityViewAccess = "UPDATE_ENTITY_VIEW_ACCESS",
@@ -241,12 +258,14 @@ export enum ExploreActionKind {
 export type ExploreAction =
   | ApplySavedFilterAction
   | ClearFiltersAction
+  | ClearMetaAction
   | PaginateTableAction
   | PatchExploreResponseAction
   | ProcessExploreResponseAction
   | ResetExploreResponseAction
   | ResetStateAction
   | SelectEntityTypeAction
+  | SyncStateFromUrlAction
   | UpdateColumnVisibilityAction
   | UpdateEntityFiltersAction
   | UpdateEntityViewAccessAction
@@ -426,6 +445,7 @@ function exploreReducer(
         ),
         filterCount: getFilterCount(filterState),
         filterState,
+        meta: { command: META_COMMAND.NAVIGATE_TO_FILTERS },
         paginationState: resetPage(state.paginationState),
         rowPreview,
       };
@@ -451,10 +471,17 @@ function exploreReducer(
         ),
         filterCount,
         filterState,
+        meta: { command: META_COMMAND.NAVIGATE_TO_FILTERS },
         paginationState: resetPage(state.paginationState),
         rowPreview,
       };
     }
+    /**
+     * Clear meta
+     */
+    case ExploreActionKind.ClearMeta: {
+      return clearMetaAction(state, payload);
+    }
     /**
      * Paginate table
      **/
@@ -551,7 +578,8 @@ function exploreReducer(
      **/
     case ExploreActionKind.SelectEntityType: {
       if (payload === state.tabValue) {
-        return state;
+        // Update meta to match command "REPLACE_TO_FILTERS" - facilitates navigation to filters on return back to entity from elsewhere.
+        return { ...state, meta: { command: META_COMMAND.REPLACE_TO_FILTERS } };
       }
       const entityState = getEntityState(
         state,
@@ -566,11 +594,18 @@ function exploreReducer(
         filterState: entityState.filterState,
         listItems: [],
         loading: true,
+        meta: { command: META_COMMAND.REPLACE_TO_FILTERS },
         paginationState: { ...resetPage(state.paginationState), rows: 0 },
         rowPreview,
         tabValue: payload,
       };
     }
+    /**
+     * Sync state from URL.
+     */
+    case ExploreActionKind.SyncStateFromUrl: {
+      return syncStateFromUrlAction(state, payload);
+    }
     /**
      * Update column visibility
      **/
@@ -620,6 +655,13 @@ function exploreReducer(
           categoryGroupConfigKey
         ),
         rowPreview: closeRowPreview(state.rowPreview),
+        ...(payload.entityListType === state.tabValue
+          ? {
+              filterCount: getFilterCount(filterState),
+              filterState,
+              paginationState: { ...resetPage(state.paginationState), rows: 0 },
+            }
+          : {}),
       };
     }
     /**
@@ -657,6 +699,7 @@ function exploreReducer(
         ),
         filterCount: getFilterCount(filterState),
         filterState,
+        meta: { command: META_COMMAND.NAVIGATE_TO_FILTERS },
         paginationState: resetPage(state.paginationState),
         rowPreview,
       };