@databiosphere/findable-ui 1.0.1 → 2.0.1

package/src/providers/exploreState/utils.ts

@@ -1,86 +1,64 @@
 import { SelectedFilter } from "../../common/entities";
-import { getInitialTableColumnVisibility } from "../../components/Table/common/utils";
-import { 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 filterState = initFilterState(decodedFilterParam);
-  const filterCount = getFilterCount(filterState);
-  return {
-    ...INITIAL_STATE,
-    catalogState: decodedCatalogParam,
-    entityPageState: initEntityPageState(config),
-    featureFlagState: decodedFeatureFlagParam,
-    filterCount,
-    filterState,
-    listView: ENTITY_VIEW.EXACT,
-    tabValue: entityListType,
-  };
+export function getEntityCategoryConfigs(
+  state: ExploreState
+): CategoryConfig[] | undefined {
+  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 {
-  return config.entities.reduce(
-    (acc, entity) => ({
-      ...acc,
-      [entity.route]: {
-        columnsVisibility: getInitialTableColumnVisibility(entity.list.columns),
-        sorting: getDefaultSorting(entity),
-      },
-    }),
-    {}
-  );
+export function getFilterCount(filterState: SelectedFilter[]): number {
+  return filterState.reduce((acc, filter) => acc + filter.value.length, 0);
 }
 
 /**
@@ -94,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,19 +9,23 @@ import React, {
 } from "react";
 import { AzulSearchIndex } from "../apis/azul/common/entities";
 import { SelectCategory, SelectedFilter } from "../common/entities";
-import { CategoryConfig, EntityPath, SiteConfig } from "../config/entities";
+import { CategoryGroup, SiteConfig } from "../config/entities";
 import { useAuthentication } from "../hooks/useAuthentication/useAuthentication";
-import { useCategoryConfigs } from "../hooks/useCategoryConfigs";
 import {
   buildCategoryViews,
   buildNextFilterState,
 } 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,
@@ -34,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;
@@ -53,33 +60,19 @@ export enum ENTITY_VIEW {
  * Explore context.
  */
 export interface ExploreContext {
-  categoryConfigs?: CategoryConfig[];
   config: SiteConfig;
   entityList: string;
 }
 
-/**
- * State for each entity.
- */
-export interface EntityPageState {
-  columnsVisibility: Record<string, boolean>;
-  sorting: ColumnSort[];
-}
-
-/**
- * State for all entities.
- */
-export interface EntityPageStateMapper {
-  [key: EntityPath]: EntityPageState;
-}
-
 /**
  * Explore state.
  */
 export type ExploreState = {
   catalogState: CatalogState;
+  categoryGroups?: CategoryGroup[];
   categoryViews: SelectCategory[];
   entityPageState: EntityPageStateMapper;
+  entityStateByCategoryGroupConfigKey: EntityStateByCategoryGroupConfigKey;
   featureFlagState: FeatureFlagState;
   filterCount: number;
   filterState: SelectedFilter[];
@@ -177,13 +170,12 @@ export function ExploreStateProvider({
   entityListType: string;
 }): JSX.Element {
   const { config, defaultEntityListType } = useConfig();
-  const categoryConfigs = useCategoryConfigs();
   const { decodedCatalogParam, decodedFeatureFlagParam, decodedFilterParam } =
     useURLFilterParams();
   const { isEnabled: isAuthEnabled, token } = useAuthentication();
   const entityList = entityListType || defaultEntityListType;
-  const [initReducerState] = useState(() =>
-    initExploreState(
+  const [initializerArg] = useState(() =>
+    initReducerArguments(
       config,
       entityList,
       decodedFilterParam,
@@ -195,11 +187,10 @@ export function ExploreStateProvider({
   const [exploreState, exploreDispatch] = useReducer(
     (s: ExploreState, a: ExploreAction) =>
       exploreReducer(s, a, {
-        categoryConfigs,
         config,
         entityList,
       }),
-    initReducerState
+    initializerArg
   );
 
   // does this help? https://hswolff.com/blog/how-to-usecontext-with-usereducer/
@@ -357,17 +348,20 @@ function exploreReducer(
   exploreContext: ExploreContext
 ): ExploreState {
   const { payload, type } = action;
-  const { categoryConfigs, config, entityList } = exploreContext;
+  const { config, entityList } = exploreContext;
 
   switch (type) {
     /**
      * 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),
       };
     }
@@ -392,15 +386,19 @@ function exploreReducer(
      * Process explore response
      **/
     case ExploreActionKind.ProcessExploreResponse: {
+      const nextCategoryViews = payload.selectCategories
+        ? buildCategoryViews(
+            payload.selectCategories,
+            getEntityCategoryConfigs(state),
+            state.filterState
+          )
+        : state.categoryViews;
+      updateEntityStateByCategoryGroupConfigKey(state, {
+        categoryViews: nextCategoryViews,
+      });
       return {
         ...state,
-        categoryViews: payload.selectCategories
-          ? buildCategoryViews(
-              payload.selectCategories,
-              categoryConfigs,
-              state.filterState
-            )
-          : state.categoryViews,
+        categoryViews: nextCategoryViews,
         listItems: payload.loading ? [] : payload.listItems,
         loading: payload.loading,
         paginationState: {
@@ -433,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
@@ -442,8 +440,16 @@ function exploreReducer(
       if (payload === state.tabValue) {
         return state;
       }
+      const entityState = getEntityState(
+        getEntityCategoryGroupConfigKey(payload, state.entityPageState),
+        state
+      );
       return {
         ...state,
+        categoryGroups: entityState.categoryGroups,
+        categoryViews: entityState.categoryViews,
+        filterCount: getFilterCount(entityState.filterState),
+        filterState: entityState.filterState,
         listItems: [],
         loading: true,
         paginationState: resetPage(state.paginationState),
@@ -470,6 +476,7 @@ function exploreReducer(
         payload.selectedValue,
         payload.selected
       );
+      updateEntityStateByCategoryGroupConfigKey(state, { filterState });
       return {
         ...state,
         filterCount: getFilterCount(filterState),
@@ -481,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),
       };
     }
@@ -499,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,
@@ -66,16 +66,16 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
   const { config, entityConfig } = useConfig(); // Get app level config.
   const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
-  const {
-    categoryGroupConfigs,
-    entities,
-    explorerTitle,
-    summaryConfig,
-    trackingConfig,
-  } = config;
+  const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
-  const { categoryViews, filterCount, isRelatedView, tabValue } = exploreState;
+  const {
+    categoryGroups,
+    categoryViews,
+    filterCount,
+    isRelatedView,
+    tabValue,
+  } = exploreState;
   const { push } = useRouter();
   const tabs = getTabs(entities);
   const { response: summaryResponse } = useSummary(); // Fetch summary.
@@ -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 }) => {
@@ -291,7 +291,7 @@ function renderList(
   if (entityListType !== tabValue) {
     // required currently for client-side fetching as the pre-rendered page
     // loads with the previous tabs data on the first render after switching tabs. (or similar)
-    return <></>; // TODO(Fran) review loading and return.
+    return <></>;
   }
 
   return (

package/src/hooks/useCategoryConfigs.ts

@@ -1,17 +0,0 @@
-import { useMemo } from "react";
-import { CategoryConfig } from "../config/entities";
-import { useConfig } from "./useConfig";
-
-/**
- * Returns configured grouped configured categories as a list of configured categories.
- * @returns a list of configured categories.
- */
-export const useCategoryConfigs = (): CategoryConfig[] | undefined => {
-  const { config } = useConfig();
-  const { categoryGroupConfigs } = config;
-  return useMemo(() => {
-    return categoryGroupConfigs?.flatMap(
-      ({ categoryConfigs }) => categoryConfigs
-    );
-  }, [categoryGroupConfigs]);
-};