@databiosphere/findable-ui 7.0.0 → 8.0.0

package/src/hooks/useBreakpointHelper.ts

@@ -12,7 +12,7 @@ export enum BREAKPOINT_FN_NAME {
 }
 
 type BreakpointFnName = BREAKPOINT_FN_NAME;
-type BreakpointKey = Breakpoint;
+export type BreakpointKey = Breakpoint;
 
 export const useBreakpointHelper = (
   fnName: BreakpointFnName,

package/src/hooks/useCurrentBreakpoint.ts

@@ -0,0 +1,23 @@
+import { Breakpoint } from "@mui/material";
+import { useMemo } from "react";
+import {
+  BreakpointKey,
+  BREAKPOINT_FN_NAME,
+  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/useMenu.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState } from "react";
+
+export interface UseMenu {
+  onClose: () => void;
+  onOpen: () => void;
+  open: boolean;
+}
+
+/**
+ * Menu functionality for menu dropdown.
+ * @returns menu functionality.
+ */
+export const useMenu = (): UseMenu => {
+  const [open, setOpen] = useState<boolean>(false);
+
+  // Closes header menu.
+  const onClose = useCallback((): void => {
+    setOpen(false);
+  }, []);
+
+  // Opens header menu.
+  const onOpen = useCallback((): void => {
+    setOpen(true);
+  }, []);
+
+  return { onClose, onOpen, open };
+};

package/src/views/ExploreView/exploreView.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import React, { useEffect, useMemo, useState } from "react";
 import {
   AzulEntitiesStaticResponse,
@@ -11,7 +10,6 @@ import {
   CategoryValueKey,
   SelectCategoryView,
 } from "../../common/entities";
-import { Tab, Tabs, TabValue } from "../../components/common/Tabs/tabs";
 import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import {
@@ -19,6 +17,7 @@ import {
   Filters,
 } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
@@ -47,33 +46,15 @@ export interface ExploreViewProps extends AzulEntitiesStaticResponse {
   className?: string;
 }
 
-/**
- * Returns tabs to be used as a prop for the Tabs component.
- * @param entities - Entities config.
- * @returns tabs list.
- */
-function getTabs(entities: EntityConfig[]): Tab[] {
-  return entities.map(
-    ({ label, route, tabIcon: icon, tabIconPosition: iconPosition }) => ({
-      icon,
-      iconPosition,
-      label,
-      value: route,
-    })
-  );
-}
-
 export const ExploreView = (props: ExploreViewProps): JSX.Element => {
   const [isDrawerOpen, setIsDrawerOpen] = useState<boolean>(false);
   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 { entities, explorerTitle, summaryConfig, trackingConfig } = config;
+  const { explorerTitle, summaryConfig, trackingConfig } = config;
   const { listView } = entityConfig;
   const { listHero, subTitleHero } = listView || {};
-  const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
-  const { push } = useRouter();
-  const tabs = getTabs(entities);
+  const { categoryGroups, categoryViews, filterCount } = exploreState;
   const { response: summaryResponse } = useSummary(); // Fetch summary.
   useEntityList(props); // Fetch entities.
   const { entityListType } = props;
@@ -145,16 +126,6 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
     setIsDrawerOpen(true);
   };
 
-  /**
-   * Callback fired when selected tab value changes.
-   * - Sets state tabsValue to selected tab value.
-   * - Executes a pushState and resets pagination.
-   * @param tabValue - Selected tab value.
-   */
-  const onTabChange = (tabValue: TabValue): void => {
-    push(`/${tabValue}`);
-  };
-
   /**
    * Dispatch a SelectedEntityType action when entityListType changes.
    */
@@ -206,8 +177,8 @@ export const ExploreView = (props: ExploreViewProps): JSX.Element => {
         }
         SubTitleHero={renderComponent(subTitleHero)}
         Summaries={renderSummary(summaryConfig, summaryResponse)}
-        Tabs={<Tabs onTabChange={onTabChange} tabs={tabs} value={tabValue} />}
-        title={explorerTitle}
+        Tabs={<Tabs />}
+        title={entityConfig.explorerTitle || explorerTitle}
       />
     </>
   );