@databiosphere/findable-ui 2.0.0 → 2.0.1

package/src/providers/exploreState/utils.ts

@@ -1,114 +1,64 @@
 import { SelectedFilter } from "../../common/entities";
-import { getInitialTableColumnVisibility } from "../../components/Table/common/utils";
-import {
-  CategoryConfig,
-  CategoryGroupConfig,
-  SiteConfig,
-} from "../../config/entities";
-import { getDefaultSorting } from "../../config/utils";
+import { CategoryConfig } from "../../config/entities";
+import { ExploreState, PaginationState } from "../exploreState";
 import {
+  CategoryGroupConfigKey,
+  EntityPageState,
   EntityPageStateMapper,
-  ENTITY_VIEW,
-  ExploreState,
-  PaginationState,
-} from "../exploreState";
-import { INITIAL_STATE } from "./constants";
+  EntityState,
+} from "./entities";
+import { DEFAULT_ENTITY_STATE } from "./initializer/constants";
 
 /**
- * Returns the filter count.
- * @param filterState - Filter state.
- * @returns filter count.
+ * Returns the category group config key for the current entity.
+ * @param entityPath - Entity path.
+ * @param entityPageState - Entity page state mapper.
+ * @returns category group config key.
  */
-export function getFilterCount(filterState: SelectedFilter[]): number {
-  return filterState.reduce((acc, filter) => acc + filter.value.length, 0);
+export function getEntityCategoryGroupConfigKey(
+  entityPath: string,
+  entityPageState: EntityPageStateMapper
+): CategoryGroupConfigKey {
+  return entityPageState[entityPath].categoryGroupConfigKey;
 }
 
 /**
- * Returns the initial explore state.
- * @param config - Site config.
- * @param entityListType - Entity list type.
- * @param decodedFilterParam - Decoded filter parameter.
- * @param decodedCatalogParam - Decoded catalog parameter.
- * @param decodedFeatureFlagParam - Decoded feature flag parameter.
- * @returns explore state.
+ * Returns the category configs for the current entity.
+ * @param state - Explore state.
+ * @returns category configs.
  */
-export function initExploreState(
-  config: SiteConfig,
-  entityListType: string,
-  decodedFilterParam: string,
-  decodedCatalogParam?: string,
-  decodedFeatureFlagParam?: string
-): ExploreState {
-  const entityPageState = initEntityPageState(config);
-  const filterState = initFilterState(decodedFilterParam);
-  const filterCount = getFilterCount(filterState);
-  return {
-    ...INITIAL_STATE,
-    catalogState: decodedCatalogParam,
-    categoryGroupConfigs: entityPageState[entityListType].categoryGroupConfigs,
-    entityPageState: initEntityPageState(config),
-    featureFlagState: decodedFeatureFlagParam,
-    filterCount,
-    filterState,
-    listView: ENTITY_VIEW.EXACT,
-    tabValue: entityListType,
-  };
-}
-
-/**
- * Returns configured grouped configured categories as a list of configured categories.
- * @param categoryGroupConfigs - Configured category groups.
- * @returns a list of configured categories.
- */
-function flattenCategoryGroupConfigs(
-  categoryGroupConfigs?: CategoryGroupConfig[]
+export function getEntityCategoryConfigs(
+  state: ExploreState
 ): CategoryConfig[] | undefined {
-  return categoryGroupConfigs?.flatMap(
-    ({ categoryConfigs }) => categoryConfigs
-  );
+  return getEntityState(
+    getEntityCategoryGroupConfigKey(state.tabValue, state.entityPageState),
+    state
+  ).categoryConfigs;
 }
 
 /**
- * Initializes filter state from URL "filter" parameter.
- * @param decodedFilterParam - Decoded filter parameter.
- * @returns filter state.
+ * Returns the entity state for the given category group config key.
+ * @param categoryGroupConfigKey - Category group config key.
+ * @param state - Explore state.
+ * @returns entity state.
  */
-export function initFilterState(decodedFilterParam: string): SelectedFilter[] {
-  // Define filter state, from URL "filter" parameter, if present and valid.
-  let filterState: SelectedFilter[] = [];
-  try {
-    filterState = JSON.parse(decodedFilterParam);
-  } catch {
-    // do nothing
-  }
-  return filterState;
+export function getEntityState(
+  categoryGroupConfigKey: CategoryGroupConfigKey,
+  state: ExploreState
+): EntityState {
+  return (
+    state.entityStateByCategoryGroupConfigKey.get(categoryGroupConfigKey) ||
+    DEFAULT_ENTITY_STATE
+  );
 }
 
 /**
- * Initializes entity page state.
- * @param config - Site config.
- * @returns entity page state.
+ * Returns the filter count.
+ * @param filterState - Filter state.
+ * @returns filter count.
  */
-export function initEntityPageState(config: SiteConfig): EntityPageStateMapper {
-  const { categoryGroupConfigs } = config;
-  return config.entities.reduce(
-    (acc, entity) => ({
-      ...acc,
-      [entity.route]: {
-        categoryConfigs: flattenCategoryGroupConfigs(
-          entity.categoryGroupConfigs ?? categoryGroupConfigs
-        ),
-        categoryGroupConfigs:
-          entity.categoryGroupConfigs ?? categoryGroupConfigs,
-        categoryViews: [],
-        columnsVisibility: getInitialTableColumnVisibility(entity.list.columns),
-        filterCount: 0,
-        filterState: [],
-        sorting: getDefaultSorting(entity),
-      },
-    }),
-    {}
-  );
+export function getFilterCount(filterState: SelectedFilter[]): number {
+  return filterState.reduce((acc, filter) => acc + filter.value.length, 0);
 }
 
 /**
@@ -122,3 +72,64 @@ export function resetPage(paginationState: PaginationState): PaginationState {
   nextPaginationState.currentPage = 1;
   return nextPaginationState;
 }
+
+/**
+ * Sets entity state for the given category group config key.
+ * @param categoryGroupConfigKey - Category group config key.
+ * @param state - Explore state.
+ * @param nextEntityState - Next entity state.
+ */
+function setEntityStateByCategoryGroupConfigKey(
+  categoryGroupConfigKey: CategoryGroupConfigKey,
+  state: ExploreState,
+  nextEntityState: EntityState
+): void {
+  state.entityStateByCategoryGroupConfigKey.set(
+    categoryGroupConfigKey,
+    nextEntityState
+  );
+}
+
+/**
+ * Updates entity page state for the given entity path.
+ * @param entityPath - Entity path.
+ * @param entityPageState - Entity page state.
+ * @param nextEntityPageState - Partial next entity page state.
+ * @returns updated entity page state.
+ */
+export function updateEntityPageState(
+  entityPath: string, // entityListType.
+  entityPageState: EntityPageStateMapper,
+  nextEntityPageState: Partial<EntityPageState>
+): EntityPageStateMapper {
+  return {
+    ...entityPageState,
+    [entityPath]: {
+      ...entityPageState[entityPath],
+      ...nextEntityPageState,
+    },
+  };
+}
+
+/**
+ * Updates entity state by category group config key.
+ * @param state - Explore state.
+ * @param nextEntityState - Partial next entity state.
+ * @returns updated entity state by category group config key.
+ */
+export function updateEntityStateByCategoryGroupConfigKey(
+  state: ExploreState,
+  nextEntityState: Partial<EntityState>
+): void {
+  const categoryGroupConfigKey = getEntityCategoryGroupConfigKey(
+    state.tabValue,
+    state.entityPageState
+  );
+  const entityState = getEntityState(categoryGroupConfigKey, state);
+  if (entityState) {
+    setEntityStateByCategoryGroupConfigKey(categoryGroupConfigKey, state, {
+      ...entityState,
+      ...nextEntityState,
+    });
+  }
+}

package/src/providers/exploreState.tsx

@@ -1,4 +1,3 @@
-import { ColumnSort } from "@tanstack/react-table";
 import React, {
   createContext,
   Dispatch,
@@ -10,12 +9,7 @@ import React, {
 } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategory, SelectedFilter } from "../common/entities";
-import {
-  CategoryConfig,
-  CategoryGroupConfig,
-  EntityPath,
-  SiteConfig,
-} from "../config/entities";
+import { CategoryGroup, SiteConfig } from "../config/entities";
 import { useAuthentication } from "../hooks/useAuthentication/useAuthentication";
 import {
   buildCategoryViews,
@@ -23,10 +17,15 @@ import {
 } from "../hooks/useCategoryFilter";
 import { useConfig } from "../hooks/useConfig";
 import { useURLFilterParams } from "../hooks/useURLFilterParams";
+import {
+  EntityPageStateMapper,
+  EntityStateByCategoryGroupConfigKey,
+} from "./exploreState/entities";
 import {
   DEFAULT_PAGINATION_STATE,
   INITIAL_STATE,
-} from "./exploreState/constants";
+} from "./exploreState/initializer/constants";
+import { initReducerArguments } from "./exploreState/initializer/utils";
 import {
   PaginateTablePayload,
   ProcessExploreResponsePayload,
@@ -38,9 +37,13 @@ import {
   UpdateSortingPayload,
 } from "./exploreState/payloads/entities";
 import {
+  getEntityCategoryConfigs,
+  getEntityCategoryGroupConfigKey,
+  getEntityState,
   getFilterCount,
-  initExploreState,
   resetPage,
+  updateEntityPageState,
+  updateEntityStateByCategoryGroupConfigKey,
 } from "./exploreState/utils";
 
 export type CatalogState = string | undefined;
@@ -61,34 +64,15 @@ export interface ExploreContext {
   entityList: string;
 }
 
-/**
- * State for each entity.
- */
-export interface EntityPageState {
-  categoryConfigs?: CategoryConfig[];
-  categoryGroupConfigs?: CategoryGroupConfig[];
-  categoryViews: SelectCategory[];
-  columnsVisibility: Record<string, boolean>;
-  filterCount: number;
-  filterState: SelectedFilter[];
-  sorting: ColumnSort[];
-}
-
-/**
- * State for all entities.
- */
-export interface EntityPageStateMapper {
-  [key: EntityPath]: EntityPageState;
-}
-
 /**
  * Explore state.
  */
 export type ExploreState = {
   catalogState: CatalogState;
-  categoryGroupConfigs?: CategoryGroupConfig[];
+  categoryGroups?: CategoryGroup[];
   categoryViews: SelectCategory[];
   entityPageState: EntityPageStateMapper;
+  entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
   featureFlagState: FeatureFlagState;
   filterCount: number;
   filterState: SelectedFilter[];
@@ -190,8 +174,8 @@ export function ExploreStateProvider({
     useURLFilterParams();
   const { isEnabled: isAuthEnabled, token } = useAuthentication();
   const entityList = entityListType || defaultEntityListType;
-  const [initReducerState] = useState(() =>
-    initExploreState(
+  const [initializerArg] = useState(() =>
+    initReducerArguments(
       config,
       entityList,
       decodedFilterParam,
@@ -206,7 +190,7 @@ export function ExploreStateProvider({
         config,
         entityList,
       }),
-    initReducerState
+    initializerArg
   );
 
   // does this help? https://hswolff.com/blog/how-to-usecontext-with-usereducer/
@@ -371,10 +355,13 @@ function exploreReducer(
      * Clear all filters
      **/
     case ExploreActionKind.ClearFilters: {
+      const filterCount = 0;
+      const filterState: SelectedFilter[] = [];
+      updateEntityStateByCategoryGroupConfigKey(state, { filterState });
       return {
         ...state,
-        filterCount: 0,
-        filterState: [],
+        filterCount,
+        filterState,
         paginationState: resetPage(state.paginationState),
       };
     }
@@ -399,27 +386,19 @@ function exploreReducer(
      * Process explore response
      **/
     case ExploreActionKind.ProcessExploreResponse: {
-      const { entityPageState, tabValue } = state;
-      const { categoryConfigs, categoryViews, filterState } =
-        entityPageState[tabValue];
       const nextCategoryViews = payload.selectCategories
         ? buildCategoryViews(
             payload.selectCategories,
-            categoryConfigs,
-            filterState
+            getEntityCategoryConfigs(state),
+            state.filterState
           )
-        : undefined;
+        : state.categoryViews;
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        categoryViews: nextCategoryViews,
+      });
       return {
         ...state,
-        categoryGroupConfigs: entityPageState[tabValue].categoryGroupConfigs,
-        categoryViews: nextCategoryViews ?? categoryViews,
-        entityPageState: {
-          ...entityPageState,
-          [tabValue]: {
-            ...entityPageState[tabValue],
-            categoryViews: nextCategoryViews ?? categoryViews,
-          },
-        },
+        categoryViews: nextCategoryViews,
         listItems: payload.loading ? [] : payload.listItems,
         loading: payload.loading,
         paginationState: {
@@ -452,7 +431,7 @@ function exploreReducer(
      * Reset the current state to the initial
      */
     case ExploreActionKind.ResetState: {
-      return initExploreState(config, entityList, "");
+      return initReducerArguments(config, entityList, "");
     }
     /**
      * Select entity type
@@ -461,10 +440,16 @@ function exploreReducer(
       if (payload === state.tabValue) {
         return state;
       }
+      const entityState = getEntityState(
+        getEntityCategoryGroupConfigKey(payload, state.entityPageState),
+        state
+      );
       return {
         ...state,
-        filterCount: state.entityPageState[payload].filterCount,
-        filterState: state.entityPageState[payload].filterState,
+        categoryGroups: entityState.categoryGroups,
+        categoryViews: entityState.categoryViews,
+        filterCount: getFilterCount(entityState.filterState),
+        filterState: entityState.filterState,
         listItems: [],
         loading: true,
         paginationState: resetPage(state.paginationState),
@@ -491,18 +476,10 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
-      const filterCount = getFilterCount(filterState);
+      updateEntityStateByCategoryGroupConfigKey(state, { filterState });
       return {
         ...state,
-        entityPageState: {
-          ...state.entityPageState,
-          [state.tabValue]: {
-            ...state.entityPageState[state.tabValue],
-            filterCount,
-            filterState,
-          },
-        },
-        filterCount,
+        filterCount: getFilterCount(filterState),
         filterState,
         paginationState: resetPage(state.paginationState),
       };
@@ -511,17 +488,13 @@ function exploreReducer(
      * Update sorting
      **/
     case ExploreActionKind.UpdateSorting: {
-      const currentEntity = state.tabValue;
-      const currentPageState = state.entityPageState[currentEntity];
       return {
         ...state,
-        entityPageState: {
-          ...state.entityPageState,
-          [currentEntity]: {
-            ...currentPageState,
-            sorting: payload,
-          },
-        },
+        entityPageState: updateEntityPageState(
+          state.tabValue,
+          state.entityPageState,
+          { sorting: payload }
+        ),
         paginationState: resetPage(state.paginationState),
       };
     }
@@ -529,17 +502,13 @@ function exploreReducer(
      * Update column visibility
      **/
     case ExploreActionKind.UpdateColumnVisibility: {
-      const currentEntity = state.tabValue;
-      const currentPageState = state.entityPageState[currentEntity];
       return {
         ...state,
-        entityPageState: {
-          ...state.entityPageState,
-          [currentEntity]: {
-            ...currentPageState,
-            columnsVisibility: payload,
-          },
-        },
+        entityPageState: updateEntityPageState(
+          state.tabValue,
+          state.entityPageState,
+          { columnsVisibility: payload }
+        ),
       };
     }
 

package/src/views/ExploreView/exploreView.tsx

@@ -26,7 +26,7 @@ import { SidebarTools } from "../../components/Layout/components/Sidebar/compone
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
 import { TableCreator } from "../../components/TableCreator/tableCreator";
 import {
-  CategoryGroupConfig,
+  CategoryGroup,
   ComponentsConfig,
   EntityConfig,
   SummaryConfig,
@@ -70,7 +70,7 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
   const {
-    categoryGroupConfigs,
+    categoryGroups,
     categoryViews,
     filterCount,
     isRelatedView,
@@ -83,8 +83,8 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   useEntityListRelatedView(); // Fetch related entities.
   const { entityListType } = props;
   const categoryFilters = useMemo(
-    () => buildCategoryFilters(categoryViews, categoryGroupConfigs),
-    [categoryViews, categoryGroupConfigs]
+    () => buildCategoryFilters(categoryViews, categoryGroups),
+    [categoryGroups, categoryViews]
   );
 
   /**
@@ -216,17 +216,17 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
 /**
  * Builds the category views into category views grouped by the given category group configuration.
  * @param selectCategoryViews - View models of categories to display.
- * @param categoryGroupConfigs - Category group configuration.
+ * @param categoryGroups - Category groups.
  * @returns category filters.
  */
 function buildCategoryFilters(
   selectCategoryViews: SelectCategoryView[],
-  categoryGroupConfigs?: CategoryGroupConfig[]
+  categoryGroups?: CategoryGroup[]
 ): CategoryFilter[] {
-  if (!categoryGroupConfigs) {
+  if (!categoryGroups) {
     return [{ categoryViews: selectCategoryViews }];
   }
-  return categoryGroupConfigs.map(({ categoryConfigs, label }) => {
+  return categoryGroups.map(({ categoryConfigs, label }) => {
     // Grab the category views for the configured grouped categories.
     const categoryViews = categoryConfigs.reduce(
       (acc, { key: categoryKey }) => {