url issue

deriv-com · May 28, 2024 · eae951a · eae951a
1 parent 61c982a
commit eae951a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 70 deletions.
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -38,55 +38,36 @@ export default function CustomMobileSidebar() {
     i18n: { currentLocale: currentLocaleCtx, locales, localeConfigs },
   } = useDocusaurusContext();
 
-  const constructHref = (locale) => {
-    if (pathname === '/') {
-      return locale === 'en' ? '/' : `/${locale}`;
-    } else {
-      const firstSlashIndex = pathname.indexOf('/');
-      const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1);
-      let newPathname = pathname;
-
-      if (secondSlashIndex === -1) {
-        newPathname =
-          locale === 'en' || pathname === '/en'
-            ? pathname.substring(firstSlashIndex)
-            : `/${locale}${pathname}`;
+  const replaceLocaleInPath = (path, newLocale) => {
+    const segments = path.split('/').filter(Boolean);
+    if (locales.includes(segments[0])) {
+      if (newLocale === 'en') {
+        segments.shift();
       } else {
-        const currentLocaleInPath = pathname.substring(1, secondSlashIndex);
-        const isValidLocale = locales.includes(currentLocaleInPath);
-
-        if (isValidLocale && locale === 'en') {
-          return pathname.substring(secondSlashIndex);
-        } else if (isValidLocale) {
-          return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`);
-        } else if (locale !== 'en') {
-          return `/${locale}${pathname}`;
-        } else {
-          return pathname;
-        }
+        segments[0] = newLocale;
       }
-
-      return newPathname;
+    } else if (newLocale !== 'en') {
+      segments.unshift(newLocale);
     }
-  };
-
-  const handleLocaleChange = (newLocale) => {
-    const newPathname = constructHref(newLocale);
-    window.history.pushState(null, '', newPathname);
+    return '/' + segments.join('/');
   };
 
   const localeItems = locales.map((locale) => {
-    const newPathname = constructHref(locale);
-
+    const newPathname = replaceLocaleInPath(pathname, locale);
     return {
       label: localeConfigs[locale].label,
       lang: locale,
-      to: newPathname,
+      to: `${newPathname}${search}${hash}`,
       className: classnames({ 'dropdown__link--active': locale === currentLocale }),
       onClick: () => handleLocaleChange(locale),
     };
   });
 
+  const handleLocaleChange = (newLocale) => {
+    const newPathname = replaceLocaleInPath(pathname, newLocale);
+    window.history.pushState(null, '', newPathname);
+  };
+
   const getShortNames = (locale) => {
     switch (locale) {
       case 'en':

diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx
@@ -1,58 +1,49 @@
 import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useAlternatePageUtils } from '@docusaurus/theme-common/internal';
 import { useLocation } from '@docusaurus/router';
 import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem';
+import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem';
 import classnames from 'classnames';
 import './locale-dropdown-navbar-item.scss';
 
 export default function LocaleDropdownNavbarItem({
   dropdownItemsBefore = [],
   dropdownItemsAfter = [],
   ...props
-}) {
+}: Props): JSX.Element {
   const {
     i18n: { currentLocale, locales, localeConfigs },
   } = useDocusaurusContext();
-  const { pathname } = useLocation();
+  const alternatePageUtils = useAlternatePageUtils();
+  const { pathname, search, hash } = useLocation();
 
-  const constructHref = (locale) => {
-    if (pathname === '/') {
-      return locale === 'en' ? '/' : `/${locale}`;
-    } else {
-      const firstSlashIndex = pathname.indexOf('/');
-      const secondSlashIndex = pathname.indexOf('/', firstSlashIndex + 1);
-
-      if (secondSlashIndex === -1) {
-        return locale === 'en' ? pathname.substring(firstSlashIndex) : `/${locale}${pathname}`; // Correct for single slash case
+  const replaceLocale = (path, newLocale) => {
+    const segments = path.split('/');
+    if (locales.includes(segments[1])) {
+      if (newLocale === 'en') {
+        segments.splice(1, 1);
       } else {
-        const currentLocaleInPath = pathname.substring(1, secondSlashIndex);
-        const isValidLocale = locales.includes(currentLocaleInPath);
-
-        if (isValidLocale && locale === 'en') {
-          return pathname.substring(secondSlashIndex);
-        } else if (isValidLocale) {
-          return pathname.replace(`/${currentLocaleInPath}`, `/${locale}`);
-        } else if (locale !== 'en') {
-          return `/${locale}${pathname}`;
-        } else {
-          return pathname;
-        }
+        segments[1] = newLocale;
       }
+    } else if (newLocale !== 'en') {
+      segments.splice(1, 0, newLocale);
     }
+    return segments.join('/');
   };
 
-  const handleLocaleChange = (newLocale) => {
-    const newPathname = constructHref(newLocale);
-    window.history.pushState({ path: newPathname }, '', newPathname);
-  };
-
-  const localeItems = locales.map((locale) => ({
-    label: localeConfigs[locale].label,
-    lang: localeConfigs[locale].htmlLang,
-    onClick: () => handleLocaleChange(locale),
-    className: classnames({ 'dropdown__link--active': locale === currentLocale }),
-    href: constructHref(locale),
-  }));
+  const localeItems = locales.map((locale): LinkLikeNavbarItemProps => {
+    const newPath = replaceLocale(pathname, locale);
+    return {
+      label: localeConfigs[locale].label,
+      lang: localeConfigs[locale].htmlLang,
+      to: `${newPath}${search}${hash}`,
+      target: '_self',
+      autoAddBaseUrl: false,
+      className: classnames({ 'dropdown__link--active': locale === currentLocale }),
+    };
+  });
 
   const getShortNames = (locale) => {
     switch (locale) {