@databiosphere/findable-ui 50.6.1 → 50.7.1

package/src/hooks/useAsync.ts

@@ -1,100 +0,0 @@
-/**
- * Hook to make API async calls and handles the API result state.
- */
-import { useCallback, useEffect, useReducer, useRef } from "react";
-import { DataExplorerError } from "../types/error";
-
-/**
- * Hook to safely call async functions and managing the result's state.
- * @param state - API request's initial state. Default to idle
- * @returns set of functions to be used to as request handlers
- */
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type -- TODO revisit return type here
-export const useAsync = <T>(state: State<T> = { status: "idle" }) => {
-  const initialStateRef = useRef<State<T>>(state);
-  const [{ data, error, status }, setState] = useReducer(
-    (s: State<T>, a: State<T>) => ({ ...s, ...a }),
-    initialStateRef.current,
-  );
-
-  const safeSetState = useSafeDispatch(setState);
-
-  const setData = useCallback(
-    (data?: T) => safeSetState({ data, status: "resolved" }),
-    [safeSetState],
-  );
-  const setError = useCallback(
-    (error: Error) => safeSetState({ error, status: "rejected" }),
-    [safeSetState],
-  );
-  const reset = useCallback(
-    () => safeSetState(initialStateRef.current),
-    [safeSetState],
-  );
-
-  if (error) {
-    throw new DataExplorerError(error);
-  }
-
-  const run = useCallback(
-    (promise: Promise<T>) => {
-      if (!promise || !promise.then) {
-        throw new Error(
-          `The argument passed to useAsync().run must be a promise.`,
-        );
-      }
-      safeSetState({ status: "pending" });
-      return promise.then(
-        (data: T) => {
-          setData(data);
-          return data;
-        },
-        (error: Error) => {
-          setError(error);
-          return Promise.reject(error);
-        },
-      );
-    },
-    [safeSetState, setData, setError],
-  );
-
-  return {
-    data,
-    error,
-    isError: status === "rejected",
-    isIdle: status === "idle",
-    isLoading: status === "pending",
-    isSuccess: status === "resolved",
-    reset,
-    run,
-    status,
-  };
-};
-
-/**
- * Hook to safely call an async function, by checking if the component is mounted before the call
- * @param dispatch - Function to be called in case the component is mounted.
- * @returns A memoized function that will call the @dispatch param or nothing.
- */
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type -- TODO revisit return type here
-const useSafeDispatch = <T>(dispatch: (args: T) => void) => {
-  const mounted = useRef(false);
-  useEffect(() => {
-    mounted.current = true;
-    return (): void => {
-      mounted.current = false;
-    };
-  }, []);
-  return useCallback(
-    (args: T) => (mounted.current ? dispatch(args) : void 0),
-    [dispatch],
-  );
-};
-
-type Error = { message: string };
-
-interface State<T> {
-  data?: T;
-  error?: Error;
-  status: "idle" | "pending" | "rejected" | "resolved";
-}

package/src/hooks/useBreakpoint.ts

@@ -1,55 +0,0 @@
-import { BREAKPOINT_FN_NAME, useBreakpointHelper } from "./useBreakpointHelper";
-import {
-  UseCurrentBreakpoint,
-  useCurrentBreakpoint,
-} from "./useCurrentBreakpoint";
-
-export type UseBreakpoint = {
-  breakpoint?: UseCurrentBreakpoint; // current breakpoint.
-  lg: boolean; // desktop.
-  lgDown: boolean;
-  lgUp: boolean;
-  md: boolean; // small desktop.
-  mdDown: boolean;
-  mdUp: boolean;
-  sm: boolean; // tablet.
-  smDown: boolean;
-  smUp: boolean;
-  xs: boolean; // mobile.
-  xsDown: boolean;
-  xsUp: boolean;
-};
-
-export const useBreakpoint = (): UseBreakpoint => {
-  const breakpoint = useCurrentBreakpoint();
-  // Current breakpoint.
-  const xs = breakpoint === "xs";
-  const sm = breakpoint === "sm";
-  const md = breakpoint === "md";
-  const lg = breakpoint === "lg";
-  // Current breakpoint, down.
-  const xsDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "xs");
-  const smDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "sm");
-  const mdDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "md");
-  const lgDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, "lg");
-  // Current breakpoint, up.
-  const xsUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "xs");
-  const smUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "sm");
-  const mdUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "md");
-  const lgUp = useBreakpointHelper(BREAKPOINT_FN_NAME.UP, "lg");
-  return {
-    breakpoint,
-    lg,
-    lgDown,
-    lgUp,
-    md,
-    mdDown,
-    mdUp,
-    sm,
-    smDown,
-    smUp,
-    xs,
-    xsDown,
-    xsUp,
-  };
-};

package/src/hooks/useBreakpointHelper.ts

@@ -1,24 +0,0 @@
-import { Breakpoint, Theme, useMediaQuery } from "@mui/material";
-
-/**
- * Hook utilising Mui's breakpoint helper (media query hook).
- * https://mui.com/material-ui/react-use-media-query/#using-muis-breakpoint-helpers
- */
-
-export enum BREAKPOINT_FN_NAME {
-  DOWN = "down",
-  ONLY = "only",
-  UP = "up",
-}
-
-type BreakpointFnName = BREAKPOINT_FN_NAME;
-export type BreakpointKey = Breakpoint;
-
-export const useBreakpointHelper = (
-  fnName: BreakpointFnName,
-  breakpointKey: BreakpointKey,
-): boolean => {
-  return useMediaQuery((theme: Theme) =>
-    theme.breakpoints[fnName](breakpointKey),
-  );
-};

package/src/hooks/useCatalog.ts

@@ -1,17 +0,0 @@
-import { useConfig } from "./useConfig";
-import { useExploreState } from "./useExploreState";
-
-/**
- * Returns configured catalog value.
- * @returns catalog value.
- */
-export const useCatalog = (): string | undefined => {
-  const { config } = useConfig();
-  const {
-    exploreState: { catalogState },
-  } = useExploreState();
-  const { dataSource } = config;
-  const { defaultParams } = dataSource || {};
-  const { catalog } = defaultParams || {};
-  return catalogState || catalog;
-};

package/src/hooks/useCategoryFilter.ts

@@ -1,289 +0,0 @@
-import { CategoryConfig } from "../common/categories/config/types";
-import { findSelectCategoryConfig } from "../common/categories/config/utils";
-import { isRangeCategory } from "../common/categories/models/range/typeGuards";
-import { buildNextRangeFilterState } from "../common/categories/models/range/utils";
-import { buildNextSelectFilterState } from "../common/categories/models/select/utils";
-import { Category } from "../common/categories/models/types";
-import { buildRangeCategoryView } from "../common/categories/views/range/utils";
-import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
-import { COLLATOR_CASE_INSENSITIVE } from "../common/constants";
-import {
-  CategoryKey,
-  CategoryValueKey,
-  ClearAll,
-  Filters,
-  SelectCategory,
-  SelectCategoryValue,
-  SelectCategoryValueView,
-  SelectCategoryView,
-  SelectedFilter,
-} from "../common/entities";
-import { FILTER_SORT } from "../common/filters/sort/config/types";
-import { sortCategoryValueViews } from "../common/filters/sort/models/utils";
-
-/**
- * State backing filter functionality and calculations. Converted to view model for display.
- */
-export type FilterState = Filters;
-
-/**
- * Function invoked when selected state of a category value is toggled or range is selected.
- */
-export type OnFilterFn = (
-  categoryKey: CategoryKey | ClearAll,
-  selectedCategoryValue: CategoryValueKey,
-  selected: boolean,
-  categorySection?: string,
-  viewKind?: VIEW_KIND,
-  searchTerm?: string,
-) => void;
-
-/**
- * Build the view-specific model of the given category value.
- * @param categoryValue - The category value to build a view model of.
- * @param categorySelectedFilter - Current filter state for a category.
- * @returns Full built category value view, ready for display.
- */
-function buildCategoryValueView(
-  categoryValue: SelectCategoryValue,
-  categorySelectedFilter?: SelectedFilter,
-): SelectCategoryValueView {
-  // Determine if the category value is currently selected.
-  const selected = isCategoryValueSelected(
-    categoryValue.key,
-    categorySelectedFilter,
-  );
-
-  // Build view model.
-  return {
-    count: categoryValue.count,
-    key: categoryValue.key,
-    label: categoryValue.label,
-    selected,
-  };
-}
-
-/**
- * Build the view-specific model of the given select category, including the category label pulled from the config.
- * @param selectCategory - The select category to build a view model of.
- * @param selectCategoryValueViews - Set of select category value view models for the given category.
- * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
- * @returns Full built select category view, ready for display.
- */
-function buildCategoryView(
-  selectCategory: SelectCategory,
-  selectCategoryValueViews: SelectCategoryValueView[],
-  categoryConfigs: CategoryConfig[],
-): SelectCategoryView {
-  const selectCategoryConfig = findSelectCategoryConfig(
-    selectCategory.key,
-    categoryConfigs,
-  );
-  const mapSelectCategoryValue =
-    selectCategoryConfig?.mapSelectCategoryValue || getSelectCategoryValue;
-  return {
-    annotation: selectCategoryConfig?.annotation,
-    chart: selectCategoryConfig?.chart,
-    isDisabled: false,
-    key: selectCategory.key,
-    label: getCategoryLabel(selectCategory.key, selectCategoryConfig),
-    values: selectCategoryValueViews.map(mapSelectCategoryValue),
-  };
-}
-
-/**
- * Build view-specific models from filter state, to facilitate easy rendering.
- * @param categories - Categories, category value and their counts with the current filter applied.
- * @param categoryConfigs - Category configs indicating accept list as well as label configuration.
- * @param filterState - Current set of selected category and category values.
- * @param filterSort - Sort configuration (ALPHA or COUNT).
- * @returns Array of category view objects.
- */
-export function buildCategoryViews(
-  categories: Category[],
-  categoryConfigs: CategoryConfig[] | undefined,
-  filterState: FilterState,
-  filterSort: FILTER_SORT,
-): CategoryView[] {
-  if (!categories || !categoryConfigs) {
-    return [];
-  }
-
-  // Determine the set of categories to display.
-  const acceptListCategories = categories.filter((category) =>
-    isCategoryAcceptListed(category, categoryConfigs),
-  );
-
-  // Build view models for each category.
-  const views = acceptListCategories.map((category) => {
-    // Get the set of selected values for this category, if any.
-    const categorySelectedFilter = getCategorySelectedFilter(
-      category.key,
-      filterState,
-    );
-
-    // Build view model for range categories.
-    if (isRangeCategory(category)) {
-      return buildRangeCategoryView(
-        category,
-        categoryConfigs,
-        categorySelectedFilter,
-      );
-    }
-
-    // Build view model for single or multiselect categories.
-    const categoryValueViews = category.values.map((categoryValue) =>
-      buildCategoryValueView(categoryValue, categorySelectedFilter),
-    );
-
-    // Sort category value views based on filter sort configuration.
-    sortCategoryValueViews(categoryValueViews, filterSort);
-
-    // Build category view model.
-    return buildCategoryView(category, categoryValueViews, categoryConfigs);
-  });
-
-  // Sort and return category views.
-  views.sort(sortCategoryViews);
-  return views;
-}
-
-/**
- * Build new set of selected filters on de/select of filter.
- * @param filterState - Current set of selected category and category values.
- * @param categoryKey - Key of category that has been de/selected.
- * @param selectedValue - Key of category value that has been de/selected
- * @param selected - True if value is selected, false if de-selected.
- * @param viewKind - View kind.
- * @returns New filter state generated from the current set of selected values and the newly selected value.
- */
-export function buildNextFilterState(
-  filterState: FilterState,
-  categoryKey: CategoryKey,
-  selectedValue: CategoryValueKey,
-  selected: boolean,
-  viewKind?: VIEW_KIND,
-): FilterState {
-  // Check if the selected category already has selected values.
-  const categorySelectedFilter = getCategorySelectedFilter(
-    categoryKey,
-    filterState,
-  );
-
-  // Create a copy of the current filter state. Remove the selected filter for the selected category, if any.
-  const nextFilterState = filterState.filter(
-    (selectedFilter: SelectedFilter) =>
-      selectedFilter !== categorySelectedFilter,
-  );
-
-  // Create new selected filter for this category. Copy values currently selected for this category, if any.
-  const nextCategorySelectedFilter = {
-    categoryKey,
-    value: categorySelectedFilter ? [...categorySelectedFilter.value] : [],
-  };
-
-  // Build next filter state for category.
-  if (viewKind === VIEW_KIND.RANGE) {
-    // Handle range category.
-    buildNextRangeFilterState(
-      nextCategorySelectedFilter,
-      selectedValue,
-      selected,
-    );
-  } else {
-    // Handle select category.
-    buildNextSelectFilterState(
-      nextCategorySelectedFilter,
-      selectedValue,
-      selected,
-    );
-  }
-
-  // Add the new selected filter for this category to the set of selected filters, if there are selected values for it.
-  if (nextCategorySelectedFilter.value.length) {
-    nextFilterState.push(nextCategorySelectedFilter);
-  }
-
-  return nextFilterState;
-}
-
-/**
- * Get the selected values for the given category, if any.
- * @param categoryKey - Key of category to check if it has any selected category values.
- * @param filterState - Current set of selected category and category values.
- * @returns The selected filter (i.e. the set of selected values) for the given category.
- */
-function getCategorySelectedFilter(
-  categoryKey: CategoryKey,
-  filterState: FilterState,
-): SelectedFilter | undefined {
-  return filterState.find((filter) => filter.categoryKey === categoryKey);
-}
-
-/**
- * Get the label for the given category key as per the config.
- * @param key - Key of category to find label of.
- * @param categoryConfig - Category.
- * @returns the display value for the given category.
- */
-function getCategoryLabel(
-  key: string,
-  categoryConfig?: CategoryConfig,
-): string {
-  if (!categoryConfig) {
-    return key;
-  }
-  return categoryConfig.label;
-}
-
-/**
- * Default function returning select category value, unmodified.
- * @param selectCategoryValue - Select category value.
- * @returns original select category value.
- */
-export function getSelectCategoryValue(
-  selectCategoryValue: SelectCategoryValue,
-): SelectCategoryValue {
-  return selectCategoryValue;
-}
-
-/**
- * Determine if given category value is selected.
- * @param categoryValueKey - The key of the category value to check if selected in the filter state.
- * @param categorySelectedFilter - Current filter state for a category.
- * @returns True if category value is in the set of currently selected values.
- */
-function isCategoryValueSelected(
-  categoryValueKey: CategoryValueKey,
-  categorySelectedFilter?: SelectedFilter,
-): boolean {
-  if (!categorySelectedFilter) {
-    return false;
-  }
-  return categorySelectedFilter.value.includes(categoryValueKey);
-}
-
-/**
- * Determine if category is to be included in filter.
- * @param category - Category to check if included in accept list.
- * @param categoryConfigs - Category accept list.
- * @returns true if category is to be included in filter.
- */
-function isCategoryAcceptListed(
-  category: Category,
-  categoryConfigs: CategoryConfig[],
-): boolean {
-  return categoryConfigs.some(
-    (categoryConfig) => categoryConfig.key === category.key,
-  );
-}
-
-/**
- * Sort category views by display label, ascending.
- * @param c0 - First category view to compare.
- * @param c1 - Second category view to compare.
- * @returns Number indicating sort precedence of c0 vs c1.
- */
-function sortCategoryViews(c0: CategoryView, c1: CategoryView): number {
-  return COLLATOR_CASE_INSENSITIVE.compare(c0.label, c1.label);
-}

package/src/hooks/useConfig.tsx

@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { ConfigContext, ConfigContextProps } from "../providers/config";
-
-/**
- * Returns configuration context.
- * @returns configuration context.
- */
-export const useConfig = (): ConfigContextProps => {
-  return useContext(ConfigContext);
-};

package/src/hooks/useCurrentBreakpoint.ts

@@ -1,23 +0,0 @@
-import { Breakpoint } from "@mui/material";
-import { useMemo } from "react";
-import {
-  BREAKPOINT_FN_NAME,
-  BreakpointKey,
-  useBreakpointHelper,
-} from "./useBreakpointHelper";
-
-export type UseCurrentBreakpoint = BreakpointKey | undefined;
-
-const breakpointKeys: BreakpointKey[] = ["xs", "sm", "md", "lg"];
-
-export const useCurrentBreakpoint = (): UseCurrentBreakpoint => {
-  const xs = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "xs");
-  const sm = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "sm");
-  const md = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "md");
-  const lg = useBreakpointHelper(BREAKPOINT_FN_NAME.ONLY, "lg");
-  const breakpoints: Record<Breakpoint, boolean> = useMemo(
-    () => ({ lg, md, sm, xs }),
-    [lg, md, sm, xs],
-  );
-  return breakpointKeys.find((key) => breakpoints[key]);
-};

package/src/hooks/useCurrentDetailTab.ts

@@ -1,29 +0,0 @@
-import { useRouter } from "next/router";
-import { PARAMS_INDEX_TAB } from "../common/constants";
-import { BackPageTabConfig } from "../config/entities";
-import { useConfig } from "./useConfig";
-
-/**
- * Model of current selected tab and the tab's corresponding route in the set of tabs.
- */
-export interface CurrentDetailTab {
-  currentTab: BackPageTabConfig;
-  route: string;
-}
-
-/**
- * Hook to get the current tab and its route that will be used to create the detail page.
- * @returns Current tab and current tab route.
- */
-export const useCurrentDetailTab = (): CurrentDetailTab => {
-  const router = useRouter();
-  const { entityConfig } = useConfig();
-  const { detail } = entityConfig;
-  const { tabs } = detail;
-  const tabRoute = router.query.params?.[PARAMS_INDEX_TAB] ?? "";
-  const currentTab = tabs.find(({ route }) => route === tabRoute) || tabs[0];
-  return {
-    currentTab,
-    route: tabRoute,
-  };
-};

package/src/hooks/useDownloadStatus.ts

@@ -1,31 +0,0 @@
-import { useSystemStatus } from "./useSystemStatus";
-
-enum DOWNLOAD_STATUS {
-  DEFAULT = "DEFAULT",
-  INDEXING = "INDEXING",
-}
-
-const DOWNLOAD_STATUS_MESSAGE = {
-  DEFAULT: null,
-  INDEXING: "Downloads and exports are disabled while indexing is in progress.",
-};
-
-export interface DownloadStatus {
-  disabled: boolean;
-  isLoading: boolean;
-  message: string | null;
-}
-
-/**
- * Returns download status.
- * @returns download status.
- */
-export const useDownloadStatus = (): DownloadStatus => {
-  const { indexing, loading: isLoading } = useSystemStatus();
-  const status = indexing ? DOWNLOAD_STATUS.INDEXING : DOWNLOAD_STATUS.DEFAULT;
-  return {
-    disabled: indexing,
-    isLoading,
-    message: DOWNLOAD_STATUS_MESSAGE[status],
-  };
-};

package/src/hooks/useEntityExportConfig.ts

@@ -1,16 +0,0 @@
-import { ExportConfig } from "../config/entities";
-import { useConfig } from "./useConfig";
-
-/**
- * Returns the export configuration for the given entity.
- * @returns export configuration.
- */
-export const useEntityExportConfig = (): ExportConfig => {
-  const { entityConfig } = useConfig();
-
-  if (!entityConfig.export) {
-    throw new Error("This entity config does not have an export field set");
-  }
-
-  return entityConfig.export;
-};

package/src/hooks/useEntityHeadTitle.ts

@@ -1,62 +0,0 @@
-import { useMemo } from "react";
-import { TabConfig } from "../config/entities";
-import { useConfig } from "./useConfig";
-import { useCurrentDetailTab } from "./useCurrentDetailTab";
-
-/**
- * Returns dynamically generated title for use in the <Head> component.
- * The title combines the entity title, current tab name, and application title, if available.
- * @param response - Entity response.
- * @returns dynamically generated title for use in the <Head> component.
- */
-export const useEntityHeadTitle = <T>(response: T): string | undefined => {
-  const { config, entityConfig } = useConfig();
-  const { currentTab } = useCurrentDetailTab();
-  const { appTitle } = config;
-  const { getTitle: getEntityTitle } = entityConfig;
-  // Get the tab name from the current tab.
-  const tabName = getTabName(currentTab);
-  // Get the entity title from the response.
-  const entityTitle = getEntityTitle?.(response);
-
-  return useMemo(
-    () => getTitle(appTitle, tabName, entityTitle),
-    [appTitle, tabName, entityTitle],
-  );
-};
-
-/**
- * Returns the tab name as a string for the current tab, from the given tab configuration.
- * For the case where tab label is not a string, default to tab name.
- * @param tab - Tab configuration.
- * @returns tab name.
- */
-function getTabName(tab: TabConfig): string | undefined {
-  const { label, tabName } = tab;
-  return typeof label === "string" ? label : tabName;
-}
-
-/**
- * Returns the full title string for the <Head> element by combining the app title, tab name, and entity title.
- * @param appTitle - App title.
- * @param tabName - Tab name.
- * @param entityTitle - Entity title.
- * @returns full title string for the <Head> element.
- */
-function getTitle(
-  appTitle: string,
-  tabName?: string,
-  entityTitle?: string,
-): string | undefined {
-  const titles = [];
-  if (entityTitle) {
-    titles.push(entityTitle);
-  }
-  if (tabName) {
-    titles.push(tabName);
-  }
-  if (titles.length > 0) {
-    titles.push(appTitle);
-    return titles.join(" - ");
-  }
-}