Merge pull request #62 from edenia/fix/default-languages

fix(webapp): refactor internacionalization logic

webapp/next.config.js

@@ -2,13 +2,6 @@
 
 const nextConfig = {
   reactStrictMode: false,
-  experimental: {
-    appDir: true
-  },
-  i18n: {
-    defaultLocale: 'en',
-    locales: ['en', 'es']
-  },
   webpack: config => {
     config.resolve.fallback = { fs: false }
 

webapp/package.json

@@ -37,17 +37,14 @@
     "date-fns": "^2.25.0",
     "formik": "^2.2.9",
     "graphql": "^16.7.1",
-    "i18next": "^22.4.14",
-    "i18next-resources-to-backend": "^1.1.3",
     "jwt-decode": "^3.1.2",
-    "next": "^13.2.4",
-    "next-i18next": "^9.1.0",
+    "next": "^13.4.7",
+    "next-intl": "^2.19.1",
     "next-seo": "^4.28.1",
     "node-fetch": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-recaptcha-v3": "^1.9.7",
-    "react-i18next": "^12.2.0",
     "react-swipeable-views": "^0.14.0",
     "react-swipeable-views-utils": "^0.14.0",
     "sharp": "^0.29.3",

webapp/src/app/[locale]/components/Content/Footer/index.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@mui/material'
+import { useTranslations } from 'next-intl'
+
+import useStyles from './styles'
+
+type FooterProps = {
+  isDarkTheme: boolean
+  toggleThemeType(): void
+}
+
+const Footer: React.FC<FooterProps> = () => {
+  const classes = useStyles()
+  const t = useTranslations('Footer')
+
+  return (
+    <footer>
+      <Typography className={classes.copyright}>
+        Copyright © {new Date().getFullYear()} {t('copyright')}
+      </Typography>
+    </footer>
+  )
+}
+
+export default Footer

webapp/src/app/[lng]/components/Content/Header/DesktopView.tsx → webapp/src/app/[locale]/components/Content/Header/DesktopView.tsx

@@ -1,8 +1,8 @@
 import React, { memo } from 'react'
 import clsx from 'clsx'
-import { Link, Typography } from '@mui/material'
+import { Typography } from '@mui/material'
+import Link from 'next-intl/link'
 
-import useTranslation from 'app/i18n'
 import LanguageSelector from '../LanguageSelector'
 import Logo from '../../Logo'
 
@@ -11,43 +11,34 @@ import useMenuStyles from './MenuStyles'
 type HeaderDesktopProps = {
   asPath: string
   getRouteRef?: (r: { id: number; path: string; name: string }) => string
-  lng: string
 }
 
-const HeaderDesktopView: React.FC<HeaderDesktopProps> = ({ asPath, lng }) => {
+const HeaderDesktopView: React.FC<HeaderDesktopProps> = ({ asPath }) => {
   const classes = useMenuStyles()
-  const { t } = useTranslation(lng, 'common')
-
-  if (!t) return <h1>Loading..</h1>
+  const t = (val: string) => val
 
   return (
     <div className={(classes.drawerContainer, classes.drawerShowDesktop)}>
       <div className={classes.logoAndMenu}>
-        <Link
-          href='/'
-          aria-label='logo-header'
-          width={200}
-          height={42}
-          display='flex'
-        >
+        <Link href='/' aria-label='logo-header'>
           <Logo width={200} height={42} />
         </Link>
         <div className={classes.topBarMenu}>{/* here map for routers */}</div>
       </div>
       <div className={classes.languageBox}>
         <div className={classes.contactUs}>
-          <Link href='/contact' underline='none'>
+          <Link href='/second-page'>
             <Typography
               variant='body1'
               className={clsx('text', {
                 ['linkActive']: asPath === '/contact'
               })}
             >
-              {t('contactUs')}
+              {t('secondPage')}
             </Typography>
           </Link>
         </div>
-        <LanguageSelector lng={lng} />
+        <LanguageSelector />
       </div>
     </div>
   )

webapp/src/app/[lng]/components/Content/Header/DrawerView.tsx → webapp/src/app/[locale]/components/Content/Header/DrawerView.tsx

@@ -1,27 +1,20 @@
 import React, { memo } from 'react'
 import { List, Drawer } from '@mui/material'
 
-import useTranslation from 'app/i18n'
-
 import useDrawerStyles from './DrawerStyles'
 
 type DrawerContentProps = {
   isOpen: boolean
   handlerDrawer: () => void
   asPath: string
-  lng: string
 }
 
 const DrawerContent: React.FC<DrawerContentProps> = ({
   isOpen,
-  handlerDrawer,
-  lng
+  handlerDrawer
 }) => {
-  const { t } = useTranslation(lng, 'common')
   const classes = useDrawerStyles()
 
-  if (!t) return <h1>Loading..</h1>
-
   return (
     <Drawer
       className={classes.drawer}