EPMGCIP-163: Update logic with tracking selected link on pathname cha…

…nge in "Header"
epam · Dec 29, 2024 · 14ca0ac · 14ca0ac
1 parent ff55496
commit 14ca0ac
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 46 deletions.
diff --git a/src/components/organisms/Header/DesktopHeader.tsx b/src/components/organisms/Header/DesktopHeader.tsx
@@ -17,16 +17,11 @@ import styles from './Header.module.scss';
 interface Props {
   activeLinkIndex: number;
   links: ILink[];
-  onClickLink: (linkIndex: number) => void;
 }
 
 export const DesktopHeader: React.FC<Props> = (props) => {
   const t = useTranslations();
 
-  const onClickLink = (linkIndex: number) => () => {
-    props.onClickLink(linkIndex);
-  };
-
   return (
     <>
       <Link href={BASE_URL}>
@@ -46,22 +41,14 @@ export const DesktopHeader: React.FC<Props> = (props) => {
                 data-testid="link"
                 key={link.label}
                 href={linkUrl}
-                onClick={onClickLink(index)}
                 className={clsx(styles.desktopLink, { [styles.desktopActiveLink]: isSelectedLink })}
               >
                 {link.label}
               </Link>
             );
           }
 
-          return (
-            <DesktopSubLinks
-              key={link.label}
-              link={link}
-              onClickLink={onClickLink(index)}
-              isSelected={isSelectedLink}
-            />
-          );
+          return <DesktopSubLinks key={link.label} link={link} isSelected={isSelectedLink} />;
         })}
       </Group>
 

diff --git a/src/components/organisms/Header/DesktopSubLinks.tsx b/src/components/organisms/Header/DesktopSubLinks.tsx
@@ -11,14 +11,11 @@ import styles from './Header.module.scss';
 interface Props {
   link: ILink;
   isSelected: boolean;
-  onClickLink: () => void;
 }
 
 export const DesktopSubLinks: React.FC<Props> = (props) => {
   const onClickSubMenuLink = (e: React.MouseEvent<HTMLAnchorElement>): void => {
     e.preventDefault();
-
-    props.onClickLink();
   };
 
   return (
@@ -44,7 +41,6 @@ export const DesktopSubLinks: React.FC<Props> = (props) => {
               key={subLink.label}
               href={subLink.url}
               className={styles.desktopSubLink}
-              onClick={props.onClickLink}
             >
               {subLink.label}
             </Link>

diff --git a/src/components/organisms/Header/Header.tsx b/src/components/organisms/Header/Header.tsx
@@ -1,9 +1,10 @@
 'use client';
 
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { useMobileView } from '@/hooks';
 import { ILink } from '@/interfaces/ILink';
+import { usePathname } from '@/navigation';
 
 import { DesktopHeader } from './DesktopHeader';
 import styles from './Header.module.scss';
@@ -14,6 +15,12 @@ interface Props {
 }
 
 export default function Header(props: Props) {
+  const pathname = usePathname();
+
+  const isMobile = useMobileView();
+
+  const [activeLinkIndex, setActiveLinkIndex] = useState(0);
+
   const links = useMemo(
     () =>
       props.links.filter((link) => {
@@ -26,17 +33,27 @@ export default function Header(props: Props) {
     [props.links],
   );
 
-  const [activeLinkIndex, setActiveLinkIndex] = useState(0);
-  const isMobile = useMobileView();
+  useEffect(() => {
+    if (!pathname) {
+      return;
+    }
 
-  const onClickLink = (linkIndex: number): void => {
-    setActiveLinkIndex(linkIndex);
-  };
+    const foundActiveLinkIndex = links.findIndex((link) => {
+      if (!link.subLinks) {
+        return link.url === pathname;
+      }
+
+      return link.subLinks.some((subLink) => subLink.url === pathname);
+    });
+
+    const activeLinkIndex = foundActiveLinkIndex === -1 ? 0 : foundActiveLinkIndex;
+
+    setActiveLinkIndex(activeLinkIndex);
+  }, [pathname, links]);
 
   const headersBaseProps = {
     activeLinkIndex,
     links,
-    onClickLink,
   };
 
   return (

diff --git a/src/components/organisms/Header/MobileHeader.tsx b/src/components/organisms/Header/MobileHeader.tsx
@@ -18,24 +18,13 @@ import { MobileSubLinks } from './MobileSubLinks';
 interface Props {
   activeLinkIndex: number;
   links: ILink[];
-  onClickLink: (linkIndex: number) => void;
 }
 
 export const MobileHeader: React.FC<Props> = (props) => {
   const t = useTranslations();
 
   const [isDrawerOpened, { toggle: onToggleDrawer, close: onCloseDrawer }] = useDisclosure(false);
 
-  const onClickLink = (linkIndex: number) => () => {
-    onCloseDrawer();
-
-    props.onClickLink(linkIndex);
-  };
-
-  const onClickSubLinksLink = (linkIndex: number) => () => {
-    props.onClickLink(linkIndex);
-  };
-
   return (
     <>
       <Burger
@@ -72,7 +61,7 @@ export const MobileHeader: React.FC<Props> = (props) => {
                   data-testid="link"
                   key={link.label}
                   href={linkUrl}
-                  onClick={onClickLink(index)}
+                  onClick={onCloseDrawer}
                   className={clsx(styles.mobileLink, { [styles.mobileActiveLink]: isSelectedLink })}
                 >
                   {link.label}
@@ -84,8 +73,8 @@ export const MobileHeader: React.FC<Props> = (props) => {
               <MobileSubLinks
                 key={link.label}
                 link={link}
-                onClickLink={onClickSubLinksLink(index)}
                 isSelected={isSelectedLink}
+                onCloseDrawer={onCloseDrawer}
               />
             );
           })}

diff --git a/src/components/organisms/Header/MobileSubLinks.tsx b/src/components/organisms/Header/MobileSubLinks.tsx
@@ -13,7 +13,7 @@ import styles from './Header.module.scss';
 interface Props {
   link: ILink;
   isSelected: boolean;
-  onClickLink: () => void;
+  onCloseDrawer: () => void;
 }
 
 export const MobileSubLinks: React.FC<Props> = (props) => {
@@ -23,14 +23,12 @@ export const MobileSubLinks: React.FC<Props> = (props) => {
 
   const onClickLink = (): void => {
     toggleSubMenu();
-
-    props.onClickLink();
   };
 
   const onClickSubLink = (): void => {
     closeSubMenu();
 
-    props.onClickLink();
+    props.onCloseDrawer();
   };
 
   const iconChevronProps = {

diff --git a/src/constants/routes.ts b/src/constants/routes.ts
@@ -14,18 +14,18 @@ export const APP_ROUTES: ILink[] = [
     isEnabled: true,
     label: 'Museum',
     subLinks: [
-      { isEnabled: true, label: 'History', url: 'history' },
-      { isEnabled: true, label: 'Architecture', url: 'architecture' },
+      { isEnabled: true, label: 'History', url: '/history' },
+      { isEnabled: true, label: 'Architecture', url: '/architecture' },
     ],
   },
   {
     isEnabled: true,
     label: 'Exposition',
-    url: 'exposition',
+    url: '/exposition',
   },
   {
     isEnabled: true,
     label: 'News',
-    url: 'news',
+    url: '/news',
   },
 ];