refactor: reduce coupling and magic strings

src/app/[lang]/provider.tsx

@@ -1,7 +1,8 @@
 'use client';
-import { createContext, useContext } from 'react';
+import { createContext, use } from 'react';
 
 import { getDictionary } from '@/dictionaries';
+import { i18n } from '@/i18n-config';
 
 type Props = {
   children: React.ReactNode;
@@ -11,6 +12,7 @@ type Props = {
 export function LanguageProvider({ children, intl }: Props) {
   const contextValue = {
     intl,
+    locales: i18n.locales,
   };
 
   return (
@@ -21,7 +23,7 @@ export function LanguageProvider({ children, intl }: Props) {
 }
 
 export function useLanguage() {
-  const context = useContext(LanguageContext);
+  const context = use(LanguageContext);
 
   if (!context) {
     throw new Error('useLanguage must be used within a LanguageProvider');
@@ -32,4 +34,7 @@ export function useLanguage() {
 
 export const LanguageContext = createContext({} as Context);
 
-export type Context = { intl: Props['intl'] };
+export type Context = {
+  intl: Props['intl'];
+  locales: (typeof i18n)['locales'];
+};

src/components/layout/languageSelector.tsx

@@ -1,40 +1,48 @@
+import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 
-import ESLanguage from '@public/assets/es-language.svg';
-import ENLanguage from '@public/assets/en-language.svg';
-import { useLanguage } from '@/app/[lang]/provider';
-import { ButtonApp } from '../elements/button';
+import esicon from '@public/assets/es-language.svg';
+import enicon from '@public/assets/en-language.svg';
+import esdata from '../../dictionaries/es.json';
+import endata from '../../dictionaries/en.json';
 
-export const LanguageSelector = () => {
-    const { intl } = useLanguage();
+import { ButtonApp } from '@/components/elements/button';
+import { Locale } from '@/i18n-config';
 
-    const handleLanguageChange = () => {
-        return window.location.href = `/${intl.language === 'en' ? 'es' : 'en'}/identification`;
-    };
+const locales = {
+  es: {
+    icon: esicon.src,
+    name: esdata.languageName,
+  },
+  en: {
+    icon: enicon.src,
+    name: endata.languageName,
+  },
+};
 
-    return (
-        <div
-            style={{ marginRight: '16px' }}
-        >
-            <ButtonApp
-                variant='outlined'
-                startIcon={
-                    <Image
-                        src={intl.language === 'en' ? ESLanguage.src : ENLanguage.src}
-                        alt="icon language"
-                        width="24"
-                        height="24"
-                    />
-                }
-                onClick={() => handleLanguageChange()}
-            >
-                {intl.language === 'en'
-                    ?
-                    'Español'
-                    :
-                    'English'
-                }
-            </ButtonApp>
-        </div>
-    );
-}
+export const LanguageSelector = ({ other }: { other: Locale }) => {
+  const router = useRouter();
+
+  const changeLanguage = () => {
+    router.push(`/${other}/identification`);
+  };
+
+  return (
+    <div style={{ marginRight: 16 }}>
+      <ButtonApp
+        variant="outlined"
+        startIcon={
+          <Image
+            src={locales[other].icon}
+            alt="language icon"
+            width="24"
+            height="24"
+          />
+        }
+        onClick={changeLanguage}
+      >
+        {locales[other].name}
+      </ButtonApp>
+    </div>
+  );
+};

src/components/layout/navBar.tsx

@@ -9,12 +9,12 @@ import Link from 'next/link';
 import Logo from '@public/assets/logo.svg';
 import styles from './styles.module.css';
 
+import { LanguageSelector } from './languageSelector';
 import { useLanguage } from '@/app/[lang]/provider';
 import { ButtonApp } from '../elements/button';
-import { LanguageSelector } from './languageSelector';
 
 export default function Index() {
-  const { intl } = useLanguage();
+  const { intl, locales } = useLanguage();
 
   return (
     <>
@@ -42,7 +42,9 @@ export default function Index() {
                 color="primary"
                 style={{ display: 'none' }}
               />
-              <LanguageSelector />
+              <LanguageSelector
+                other={locales.find((l) => l !== intl.language)!}
+              />
               <ButtonApp
                 notFullWidth
                 onClick={() =>

src/dictionaries/en.json

@@ -1,4 +1,5 @@
 {
+  "languageName": "English",
   "language": "en",
   "common": {
     "title": "Cuenta Única Ciudadana",

src/dictionaries/es.json

@@ -1,4 +1,5 @@
 {
+  "languageName": "Español",
   "language": "es",
   "common": {
     "title": "Cuenta Única Ciudadana",

src/middlewares/i18n.middleware.ts

@@ -33,5 +33,5 @@ function getLocale(request: NextRequest): string | undefined {
   let languages = new Negotiator({ headers }).languages(locales);
 
   // return matchLocale(languages, locales, i18n.defaultLocale);
-  return 'es';
+  return i18n.defaultLocale;
 }