feat(SLB-410): refactor LanguageSwitcher functionality

AmazeeLabs · May 30, 2024 · 3338867 · 3338867
1 parent 28b57ed
commit 3338867
Showing 1 changed file with 46 additions and 45 deletions.
diff --git a/packages/ui/src/components/Molecules/LanguageSwitcher.tsx b/packages/ui/src/components/Molecules/LanguageSwitcher.tsx
@@ -16,31 +16,25 @@ function getLanguageName(locale: string) {
 export function LanguageSwitcher() {
   const translations = useTranslations();
   const [location] = useLocation();
-  const currentLocale = Object.values(Locale).find((locale) => {
-    const translationPath = translations[locale];
-    return location.pathname.includes(translationPath || '');
-  });
-
-  if (!currentLocale) {
-    console.error(
-      'No matching locale found in current path:',
-      location.pathname,
-    );
-    return null;
-  }
-
-  const otherLocales = Object.values(Locale).filter(
-    (locale) => locale !== currentLocale,
-  );
 
   return (
     <div className="relative inline-block text-left">
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <Menu.Button className="inline-flex justify-center w-full rounded-md bg-white text-sm hover:text-blue-600">
-            {getLanguageName(currentLocale as string)}
-            <ChevronDownIcon className="ml-1 h-5 w-5" aria-hidden="true" />
-          </Menu.Button>
+          {Object.values(Locale).map((locale) => (
+            <React.Fragment key={locale}>
+              {translations[locale] &&
+              location.pathname !== translations[locale] ? null : (
+                <Menu.Button className="inline-flex justify-center w-full rounded-md bg-white text-sm hover:text-blue-600">
+                  {getLanguageName(locale)}
+                  <ChevronDownIcon
+                    className="ml-1 h-5 w-5"
+                    aria-hidden="true"
+                  />
+                </Menu.Button>
+              )}
+            </React.Fragment>
+          ))}
         </div>
 
         <Transition
@@ -54,31 +48,38 @@ export function LanguageSwitcher() {
         >
           <Menu.Items className="origin-top-right absolute z-50 right-0 mt-3 w-48 rounded bg-white shadow-md ring-1 ring-gray-100">
             <div className="py-1">
-              {otherLocales.map((locale) => (
-                <Menu.Item key={locale}>
-                  {({ focus }) =>
-                    translations[locale] ? (
-                      <Link
-                        href={translations[locale]!}
-                        className={clsx(
-                          focus ? 'text-blue-600' : 'text-gray-500',
-                          'block px-4 py-2 text-sm',
-                        )}
-                      >
-                        {getLanguageName(locale as string)}
-                      </Link>
-                    ) : (
-                      <span
-                        className={clsx(
-                          focus ? 'bg-gray-100 text-gray-900' : 'text-gray-500',
-                          'block px-3.5 py-2 text-sm',
-                        )}
-                      >
-                        {getLanguageName(locale as string)}
-                      </span>
-                    )
-                  }
-                </Menu.Item>
+              {Object.values(Locale).map((locale) => (
+                <React.Fragment key={locale}>
+                  {translations[locale] &&
+                  location.pathname !== translations[locale] ? (
+                    <Menu.Item>
+                      {({ focus }) =>
+                        translations[locale] ? (
+                          <Link
+                            href={translations[locale]!}
+                            className={clsx(
+                              focus ? 'text-blue-600' : 'text-gray-500',
+                              'block px-4 py-2 text-sm',
+                            )}
+                          >
+                            {getLanguageName(locale as string)}
+                          </Link>
+                        ) : (
+                          <span
+                            className={clsx(
+                              focus
+                                ? 'bg-gray-100 text-gray-900'
+                                : 'text-gray-500',
+                              'block px-3.5 py-2 text-sm',
+                            )}
+                          >
+                            {getLanguageName(locale as string)}
+                          </span>
+                        )
+                      }
+                    </Menu.Item>
+                  ) : null}
+                </React.Fragment>
               ))}
             </div>
           </Menu.Items>