diff --git a/src/components/RootApp/ScalprumRoot.tsx b/src/components/RootApp/ScalprumRoot.tsx index 7133d4715..3ded2a6e1 100644 --- a/src/components/RootApp/ScalprumRoot.tsx +++ b/src/components/RootApp/ScalprumRoot.tsx @@ -34,6 +34,7 @@ import { populateNotifications } from '../../redux/actions'; import useTrackPendoUsage from '../../hooks/useTrackPendoUsage'; import ChromeAuthContext from '../../auth/ChromeAuthContext'; import { onRegisterModuleWriteAtom } from '../../state/atoms/chromeModuleAtom'; +import useTabName from '../../hooks/useTabName'; const ProductSelection = lazy(() => import('../Stratosphere/ProductSelection')); @@ -64,6 +65,8 @@ const ScalprumRoot = memo( useChromeServiceEvents(); // track pendo usage useTrackPendoUsage(); + // setting default tab title + useTabName(); async function getNotifications() { try { diff --git a/src/hooks/useTabName.ts b/src/hooks/useTabName.ts new file mode 100644 index 000000000..1590b5959 --- /dev/null +++ b/src/hooks/useTabName.ts @@ -0,0 +1,31 @@ +import { useAtomValue } from 'jotai'; +import { useLocation } from 'react-router-dom'; + +import { activeModuleAtom } from '../state/atoms/activeModuleAtom'; +import useBreadcrumbsLinks from './useBreadcrumbsLinks'; +import useBundle from './useBundle'; +import { useEffect, useMemo } from 'react'; + +const useTabName = () => { + const { bundleTitle } = useBundle(); + const activeModule = useAtomValue(activeModuleAtom); + const { pathname } = useLocation(); + const fragments = useBreadcrumbsLinks(); + + const title = useMemo(() => { + const fragmentsWithoutBundle = fragments + .slice(1) // remove the bundle + .slice(-2) // limit to closest link parent + .map(({ title }) => title) + .toReversed(); // get the right order of fragments + return `${fragmentsWithoutBundle.join(' - ')} | ${bundleTitle}`; + }, [activeModule, pathname, fragments]); + useEffect(() => { + // sometimes the nav files are not loaded yet and the first section is empty + if (title.split(' | ')?.[0].length > 1) { + document.title = title; + } + }, [title]); +}; + +export default useTabName;