feat(int18n): add internationalization for navbar, add provider for t…

…ests and detect users language preference
ReCoded-Org · Apr 30, 2022 · 2aef1e3 · 2aef1e3
1 parent 35e8f63
commit 2aef1e3
Show file tree

Hide file tree

Showing 9 changed files with 223 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,24 +4,27 @@
   "private": true,
   "dependencies": {
     "@emailjs/browser": "^3.5.0",
-    "mapbox-gl": "^1.13.2",
-    "react-mapbox-gl": "^5.1.1",
-    "tw-elements": "^1.0.0-alpha12",
     "@reduxjs/toolkit": "^1.8.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.26.1",
     "formik": "^2.2.9",
+    "i18next": "^21.6.16",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "mapbox-gl": "^1.13.2",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-i18next": "^11.16.7",
     "react-icons": "^4.3.1",
+    "react-mapbox-gl": "^5.1.1",
     "react-redux": "^7.2.3",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-toastify": "^8.2.0",
     "redux-persist": "^6.0.0",
+    "tw-elements": "^1.0.0-alpha12",
     "yup": "^0.32.11"
   },
   "scripts": {

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -1,17 +1,20 @@
 import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+
 import mainHero from '../../assets/images/main-hero.svg';
 import {
-  HOME_PAGE_TITLE,
   HOME_INFORMATION_TEXT,
   HOME_ACTION_BUTTON_TEXT,
 } from '../../pages/Home/constants';
 
 function Information() {
   const user = useSelector((state) => state.user.currentUser);
+  const { t } = useTranslation();
+
   return (
     <div className=" flex flex-col flex-auto w-full sm:w-32 gap-5 justify-center lg:px-20 md:px-10 sm:px-8">
       <h1 className="text-primary font-bold  text-base lg:text-4xl md:text-2xl sm:text-xl text-center sm:text-left">
-        {HOME_PAGE_TITLE}
+        {t('homepage.title')}
       </h1>
       <p className="leading-normal sm:leading-loose text-gray text-sm lg:text-lg  md:text-base sm:text-sm  ">
         {HOME_INFORMATION_TEXT}

diff --git a/src/components/Navbar/LanguageDropdown/LanguageDropdown.js b/src/components/Navbar/LanguageDropdown/LanguageDropdown.js
@@ -1,7 +1,14 @@
-import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 function LanguageDropdown() {
-  const [language, setLanguage] = useState('English');
+  const { t, i18n } = useTranslation();
+
+  const changeLanguage = (lng) => {
+    i18n.changeLanguage(lng);
+  };
+
+  const selectedLanguage =
+    i18n.resolvedLanguage === 'en' ? 'English' : 'Türkçe';
 
   return (
     <div className="dropdown relative ">
@@ -35,7 +42,7 @@ function LanguageDropdown() {
         aria-expanded="false"
         data-testid="dropdown-menu"
       >
-        {language}
+        {selectedLanguage}
         <svg
           aria-hidden="true"
           focusable="false"
@@ -90,10 +97,10 @@ function LanguageDropdown() {
                         active:bg-bgmain
                         "
           href="#turkish"
-          onClick={() => setLanguage('Turkish')}
+          onClick={() => changeLanguage('tr')}
           type="button"
         >
-          Turkish
+          {t('languages.tr')}
         </button>
         <button
           className="
@@ -111,10 +118,10 @@ function LanguageDropdown() {
                         active:bg-bgmain
                         "
           href="#english"
-          onClick={() => setLanguage('English')}
+          onClick={() => changeLanguage('en')}
           type="button"
         >
-          English
+          {t('languages.en')}
         </button>
       </ul>
     </div>

diff --git a/src/components/Navbar/LanguageDropdown/LanguageDropdown.test.jsx b/src/components/Navbar/LanguageDropdown/LanguageDropdown.test.jsx
@@ -1,4 +1,4 @@
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup } from '../../../testUtils';
 
 import LanguageDropdown from './LanguageDropdown';
 

diff --git a/src/components/Navbar/Navbar/Navbar.js b/src/components/Navbar/Navbar/Navbar.js
@@ -1,6 +1,8 @@
 import { AiOutlineGlobal } from 'react-icons/ai';
 import { useSelector, useDispatch } from 'react-redux';
 import { Link, useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
 import LanguageDropdown from '../LanguageDropdown/LanguageDropdown';
 import {
   HOME_ROUTE,
@@ -15,6 +17,7 @@ import {
 import { logout } from '../../../features/user/userAPI';
 
 function Navbar() {
+  const { t } = useTranslation();
   const dispatch = useDispatch();
   const user = useSelector((state) => state.user.currentUser);
 
@@ -76,7 +79,7 @@ function Navbar() {
                   data-mdb-ripple="true"
                   data-mdb-ripple-color="light"
                 >
-                  Home
+                  {t('navbar.home')}
                 </Link>
               </li>
               <li className="nav-item">
@@ -86,7 +89,7 @@ function Navbar() {
                   data-mdb-ripple="true"
                   data-mdb-ripple-color="light"
                 >
-                  Projects
+                  {t('navbar.projects')}
                 </Link>
               </li>
               <li className="nav-item">
@@ -96,7 +99,7 @@ function Navbar() {
                   data-mdb-ripple="true"
                   data-mdb-ripple-color="light"
                 >
-                  FAQ
+                  {t('navbar.faq')}
                 </Link>
               </li>
               <li className="nav-item ">
@@ -106,7 +109,7 @@ function Navbar() {
                   data-mdb-ripple="true"
                   data-mdb-ripple-color="light"
                 >
-                  About
+                  {t('navbar.about')}
                 </Link>
               </li>
               <li className="nav-item">
@@ -116,7 +119,7 @@ function Navbar() {
                   data-mdb-ripple="true"
                   data-mdb-ripple-color="light"
                 >
-                  Contact
+                  {t('navbar.contact')}
                 </Link>
               </li>
             </ul>
@@ -133,7 +136,7 @@ function Navbar() {
                       type="button"
                       onClick={() => signOut()}
                     >
-                      Sign Out
+                      {t('auth.signout')}
                     </button>
                   </div>
                 </li>
@@ -147,7 +150,7 @@ function Navbar() {
                         data-mdb-ripple-color="light"
                         type="button"
                       >
-                        Sign Up
+                        {t('auth.signup')}
                       </button>
                     </Link>
                   </li>
@@ -159,7 +162,7 @@ function Navbar() {
                         data-mdb-ripple-color="light"
                         type="button"
                       >
-                        Sign In
+                        {t('auth.signin')}
                       </button>
                     </Link>
                   </li>