fix(core): update localeSwitcher to use link instead of form (#1342)

* fix(core): update localeSwitcher to use link instead of form * fix: remove useEffect, use useMemo * fix: no need to pass defualtLocale * fix: add missing dependency
bigcommerce · Sep 5, 2024 · f7bb1e2 · f7bb1e2
1 parent c14eb82
commit f7bb1e2
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 29 deletions.
diff --git a/.changeset/hot-buses-invent.md b/.changeset/hot-buses-invent.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Update localeSwitcher to use a link instead of a form.
diff --git a/core/components/ui/header/locale-switcher.tsx b/core/components/ui/header/locale-switcher.tsx
@@ -2,9 +2,10 @@
 
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { useTranslations } from 'next-intl';
-import { FormEvent, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 
-import { LocaleType, useRouter } from '~/i18n/routing';
+import { Link } from '~/components/link';
+import { LocaleType } from '~/i18n/routing';
 
 import { Button } from '../button';
 import { Select } from '../form';
@@ -18,7 +19,7 @@ type LanguagesByRegionMap = Record<
 >;
 
 interface Locale {
-  id: string;
+  id: LocaleType;
   region: string;
   language: string;
   flag: string;
@@ -30,8 +31,6 @@ interface Props {
 }
 
 const LocaleSwitcher = ({ activeLocale, locales }: Props) => {
-  const router = useRouter();
-
   const t = useTranslations('Components.Header.LocaleSwitcher');
 
   const selectedLocale = locales.find((locale) => locale.id === activeLocale);
@@ -44,9 +43,7 @@ const LocaleSwitcher = ({ activeLocale, locales }: Props) => {
       locales.reduce<LanguagesByRegionMap>((acc, { region, language, flag }) => {
         if (!acc[region]) {
           acc[region] = { languages: [language], flag };
-        }
-
-        if (!acc[region].languages.includes(language)) {
+        } else if (!acc[region].languages.includes(language)) {
           acc[region].languages.push(language);
         }
 
@@ -55,6 +52,14 @@ const LocaleSwitcher = ({ activeLocale, locales }: Props) => {
     [locales],
   );
 
+  const newLocale = useMemo(
+    () =>
+      locales.find(
+        (locale) => locale.language === languageSelected && locale.region === regionSelected,
+      ),
+    [languageSelected, locales, regionSelected],
+  );
+
   if (!selectedLocale) {
     return null;
   }
@@ -72,26 +77,11 @@ const LocaleSwitcher = ({ activeLocale, locales }: Props) => {
   };
 
   const handleLanguageChange = (language: string) => {
-    if (language) {
-      setLanguageSelected(language);
-    }
-  };
-
-  const handleOnSubmit = (event: FormEvent) => {
-    event.preventDefault();
-
-    const newLocale = locales.find(
-      (locale) => locale.language === languageSelected && locale.region === regionSelected,
-    );
-
-    if (newLocale) {
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      router.replace('/', { locale: newLocale.id as LocaleType });
-    }
+    setLanguageSelected(language);
   };
 
   return (
-    Object.keys(locales).length > 1 && (
+    locales.length > 1 && (
       <PopoverPrimitive.Root onOpenChange={handleOnOpenChange}>
         <PopoverPrimitive.Trigger asChild>
           <button className="flex h-12 items-center p-3 text-2xl">{selectedLocale.flag}</button>
@@ -102,7 +92,7 @@ const LocaleSwitcher = ({ activeLocale, locales }: Props) => {
             className="z-50 bg-white p-4 text-base shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
             sideOffset={4}
           >
-            <form className="flex flex-col gap-4" onSubmit={handleOnSubmit}>
+            <div className="flex flex-col gap-4">
               <p>{t('chooseCountryAndLanguage')}</p>
               <Select
                 onValueChange={handleRegionChange}
@@ -122,10 +112,12 @@ const LocaleSwitcher = ({ activeLocale, locales }: Props) => {
                 }
                 value={languageSelected}
               />
-              <Button className="w-auto" type="submit">
-                {t('goToSite')}
+              <Button asChild>
+                <Link className="hover:text-white" href="/" locale={newLocale?.id}>
+                  {t('goToSite')}
+                </Link>
               </Button>
-            </form>
+            </div>
           </PopoverPrimitive.Content>
         </PopoverPrimitive.Portal>
       </PopoverPrimitive.Root>