All files / src/views/Package PrimaryDocNavigation.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { FunctionComponent, useCallback, useMemo } from "react";
import { useLocation } from "react-router-dom";
import {
  API_URL_RESOURCE,
  PACKAGE_ANALYTICS,
  README_ITEM_ID,
} from "./constants";
import { usePackageState } from "./PackageState";
import type { MenuItem } from "./util";
import { GetIsActiveItemFunction, NavTree } from "../../components/NavTree";
 
export const PrimaryDocNavigation: FunctionComponent = () => {
  const { menuItems } = usePackageState();
  const { pathname, hash } = useLocation();
 
  const primaryNavItems = useMemo(
    () =>
      menuItems.reduce((items, item, i) => {
        // Omit README children which will be displayed on secondary nav
        if (i === 0 && item?.id === README_ITEM_ID) {
          const { children, ...readme } = item;
 
          items.push({ ...readme, children: [] });
        } else {
          items.push(item);
        }
 
        return items;
      }, [] as MenuItem[]),
    [menuItems]
  );
 
  const getIsActiveItem: GetIsActiveItemFunction = useCallback(
    ({ path }) => {
      const pathUrl = new URL(path ?? "", window.origin);
 
      return Boolean(
        path?.includes(`/${API_URL_RESOURCE}/`)
          ? pathUrl.pathname === pathname
          : pathUrl.hash && hash && pathUrl.hash === hash
      );
    },
    [hash, pathname]
  );
 
  return (
    <NavTree
      data-event={PACKAGE_ANALYTICS.SCOPE}
      getIsActiveItem={getIsActiveItem}
      items={primaryNavItems}
    />
  );
};