refactor: remove unnecessary hook (#6120)

* refactor: remove unnecessary hook

* fix: promisify instead of ignoring

* Update util/getBitness.ts

Co-authored-by: canerakdas <[e-mail]>
Signed-off-by: Claudio W <[e-mail]>

---------

Signed-off-by: Claudio W <[e-mail]>
Co-authored-by: canerakdas <[e-mail]>

components/Common/ActiveLink/__tests__/index.test.mjs

···
+import { render, screen } from '@testing-library/react';
+
+import ActiveLink from '..';
+
+describe('ActiveLink', () => {
+  it('renders as localized link', () => {
+    render(
+      <ActiveLink className="link" activeClassName="active" href="/link">
+        Link
+      </ActiveLink>
+    );
+
+    expect(screen.findByText('Link')).resolves.toHaveAttribute(
+      'href',
+      '/en/link'
+    );
+  });
+
+  it('ignores active class when href not matches location.href', () => {
+    render(
+      <ActiveLink className="link" activeClassName="active" href="/not-link">
+        Link
+      </ActiveLink>
+    );
+
+    expect(screen.findByText('Link')).resolves.toHaveAttribute('class', 'link');
+  });
+
+  it('sets active class when href matches location.href', () => {
+    render(
+      <ActiveLink className="link" activeClassName="active" href="/link">
+        Link
+      </ActiveLink>
+    );
+
+    expect(screen.findByText('Link')).resolves.toHaveAttribute(
+      'class',
+      'link active'
+    );
+  });
+});

components/Common/ActiveLocalizedLink/__tests__/index.test.mjs

···
-import { render, screen } from '@testing-library/react';
-
-import ActiveLocalizedLink from '..';
-
-describe('ActiveLocalizedLink', () => {
-  it('renders as localized link', () => {
-    render(
-      <ActiveLocalizedLink
-        className="link"
-        activeClassName="active"
-        href="/link"
-      >
-        Link
-      </ActiveLocalizedLink>
-    );
-
-    expect(screen.findByText('Link')).resolves.toHaveAttribute(
-      'href',
-      '/en/link'
-    );
-  });
-
-  it('ignores active class when href not matches location.href', () => {
-    render(
-      <ActiveLocalizedLink
-        className="link"
-        activeClassName="active"
-        href="/not-link"
-      >
-        Link
-      </ActiveLocalizedLink>
-    );
-
-    expect(screen.findByText('Link')).resolves.toHaveAttribute('class', 'link');
-  });
-
-  it('sets active class when href matches location.href', () => {
-    render(
-      <ActiveLocalizedLink
-        className="link"
-        activeClassName="active"
-        href="/link"
-      >
-        Link
-      </ActiveLocalizedLink>
-    );
-
-    expect(screen.findByText('Link')).resolves.toHaveAttribute(
-      'class',
-      'link active'
-    );
-  });
-});

components/Common/ActiveLocalizedLink/index.tsx components/Common/ActiveLink/index.tsx

···
 import { usePathname } from '@/navigation.mjs';
 
 type ActiveLocalizedLinkProps = ComponentProps<typeof Link> & {
-  activeClassName: string;
+  activeClassName?: string;
+  allowSubPath?: boolean;
 };
 
-const ActiveLocalizedLink: FC<ActiveLocalizedLinkProps> = ({
+const ActiveLink: FC<ActiveLocalizedLinkProps> = ({
   children,
-  activeClassName,
+  activeClassName = 'active',
+  allowSubPath = false,
   className,
   href = '',
   ...props
 }) => {
   const pathname = usePathname();
 
-  const linkURL = new URL(href.toString(), location.href);
-
   const finalClassName = classNames(className, {
-    [activeClassName]: linkURL.pathname === pathname,
+    [activeClassName]: allowSubPath
+      ? pathname.startsWith(href.toString())
+      : href.toString() === pathname,
   });
 
   return (
···
   );
 };
 
-export default ActiveLocalizedLink;
+export default ActiveLink;

components/Containers/NavItem/index.tsx

···
 import type { FC, PropsWithChildren } from 'react';
 import { useMemo } from 'react';
 
-import ActiveLocalizedLink from '@/components/Common/ActiveLocalizedLink';
+import ActiveLink from '@/components/Common/ActiveLink';
 
 import styles from './index.module.css';
 
···
   className,
 }) => {
   const showIcon = useMemo(
-    () => type === 'nav' && !href.toString().startsWith('/'),
+    () => type === 'nav' && href.toString().startsWith('http'),
     [href, type]
   );
 
   return (
-    <ActiveLocalizedLink
+    <ActiveLink
       href={href}
       className={classNames(styles.navItem, styles[type], className)}
       activeClassName={styles.active}
     >
       <span className={styles.label}>{children}</span>
       {showIcon && <ArrowUpRightIcon className={styles.icon} />}
-    </ActiveLocalizedLink>
+    </ActiveLink>
   );
 };
 

components/Header.tsx

···
 'use client';
 
-import classNames from 'classnames';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useState } from 'react';
 
+import ActiveLink from '@/components/Common/ActiveLink';
 import Link from '@/components/Link';
-import { useIsCurrentPathname, useSiteNavigation } from '@/hooks';
+import { useSiteNavigation } from '@/hooks';
 import { usePathname } from '@/navigation.mjs';
 import { BASE_PATH } from '@/next.constants.mjs';
 import { availableLocales } from '@/next.locales.mjs';
 
 const Header = () => {
   const { navigationItems } = useSiteNavigation();
-  const { isCurrentLocaleRoute } = useIsCurrentPathname();
   const [showLangPicker, setShowLangPicker] = useState(false);
   const { theme, setTheme } = useTheme();
 
   const pathname = usePathname();
   const t = useTranslations();
 
-  const getLinkClassName = (href: string) =>
-    classNames({ active: isCurrentLocaleRoute(href, href !== '/') });
-
   const toggleLanguage = t('components.header.buttons.toggleLanguage');
   const toggleDarkMode = t('components.header.buttons.toggleDarkMode');
 
···
         <nav aria-label="primary">
           <ul className="list-divider-pipe">
             {navigationItems.map((item, key) => (
-              <li key={key} className={getLinkClassName(item.link)}>
-                <Link href={item.link}>{item.text}</Link>
+              <li key={key}>
+                <ActiveLink href={item.link} allowSubPath>
+                  {item.text}
+                </ActiveLink>
               </li>
             ))}
           </ul>

components/SideNavigation.tsx

···
-'use client';
-
-import classNames from 'classnames';
 import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
-import Link from '@/components/Link';
-import { useIsCurrentPathname, useSiteNavigation } from '@/hooks';
+import ActiveLink from '@/components/Common/ActiveLink';
+import { useSiteNavigation } from '@/hooks/server';
 import type { NavigationKeys } from '@/types';
 
 type SideNavigationProps = {
···
   context,
 }) => {
   const { getSideNavigation } = useSiteNavigation();
-  const { isCurrentLocaleRoute } = useIsCurrentPathname();
 
   const sideNavigationItems = getSideNavigation(navigationKey, context);
-
-  const getLinkClasses = (href: string, level: number) =>
-    classNames({ active: isCurrentLocaleRoute(href), level });
 
   return (
     <nav aria-label="secondary">
       <ul>
         {sideNavigationItems.map(item => (
-          <li key={item.key} className={getLinkClasses(item.link, item.level)}>
-            <Link href={item.link}>{item.text}</Link>
+          <li key={item.key}>
+            <ActiveLink href={item.link}>{item.text}</ActiveLink>
 
             {item.items.length > 0 && (
               <ul>
-                {item.items.map(({ link, level, text, key }) => (
-                  <li key={key} className={getLinkClasses(link, level)}>
-                    <Link href={link}>{text}</Link>
+                {item.items.map(({ link, text, key }) => (
+                  <li key={key}>
+                    <ActiveLink href={link}>{text}</ActiveLink>
                   </li>
                 ))}
               </ul>

hooks/react-client/index.ts

···
 export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useDetectOS } from './useDetectOS';
-export { default as useIsCurrentPathname } from './useIsCurrentPathname';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';

hooks/react-client/useIsCurrentPathname.ts

···
-'use client';
-
-import useClientContext from '@/hooks/react-client/useClientContext';
-
-const useIsCurrentPathname = () => {
-  const { pathname } = useClientContext();
-
-  return {
-    isCurrentLocaleRoute: (route: string, allowSubPath?: boolean) =>
-      allowSubPath ? pathname.startsWith(route) : route === pathname,
-  };
-};
-
-export default useIsCurrentPathname;

hooks/react-server/index.ts

···
 export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useDetectOS } from './useDetectOS';
-export { default as useIsCurrentPathname } from './useIsCurrentPathname';
 export { default as useMediaQuery } from './useMediaQuery';
 export { default as useNotification } from './useNotification';
 export { default as useClientContext } from './useClientContext';

hooks/react-server/useIsCurrentPathname.ts

···
-import useClientContext from '@/hooks/react-server/useClientContext';
-
-const useIsCurrentPathname = () => {
-  const { pathname } = useClientContext();
-
-  return {
-    isCurrentLocaleRoute: (route: string, allowSubPath?: boolean) => {
-      const asPathJustPath = pathname.replace(/[#|?].*$/, '');
-
-      return allowSubPath
-        ? asPathJustPath.startsWith(route)
-        : route === asPathJustPath;
-    },
-  };
-};
-
-export default useIsCurrentPathname;

layouts/DocsLayout.tsx

···
-'use client';
-
 import type { RichTranslationValues } from 'next-intl';
 import type { FC, PropsWithChildren } from 'react';
 

styles/old/index.css

···
         margin-left: -10px;
         margin-right: -10px;
         padding: 5px 10px;
-      }
 
-      .active {
-        > a,
-        > a:hover {
+        &.active,
+        &.active:hover {
           background-color: $active-green;
           color: $white;
         }

styles/old/layout/dark-theme.css

···
       &:hover {
         color: $white;
       }
-    }
 
-    .active > a {
-      background-color: $active-green;
-      color: $white;
+      &.active,
+      &.active:hover {
+        background-color: $active-green;
+        color: $white;
+      }
     }
   }
 

styles/old/page-modules/header.css

···
 
         $border-width: 14px;
 
-        &.active::after {
+        &:has(a.active)::after {
           border: solid transparent;
           border-top-color: $node-gray;
           border-width: $border-width;
···
           width: 0;
         }
 
-        &.active:first-child::after {
+        &:has(a.active):first-child::after {
           margin-left: -$border-width;
         }
       }

util/getBitness.ts

···
       'bitness',
     ]);
 
-    // Apparently in some cases this is not a Promise, then we should ignore
-    if (entropyValues instanceof Promise) {
-      return entropyValues.then(ua => ua.bitness);
-    }
+    // Apparently in some cases this is not a Promise, we can Promisify it.
+    return Promise.resolve(entropyValues)
+      .then(({ bitness }) => bitness)
+      .catch(() => undefined);
   }
 
   return undefined;