I18next (#83)

* working on localization * localization functionality completed * added missing dependency Co-authored-by: Allan <[email protected]> Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 4, 2022 · b52b830 · b52b830
1 parent 76ea8e9
commit b52b830
Show file tree

Hide file tree

Showing 9 changed files with 238 additions and 131 deletions.
diff --git a/package.json b/package.json
@@ -14,10 +14,13 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^14.1.1",
+    "eslint-import-resolver-node": "^0.3.6",
     "firebase": "^9.13.0",
+    "i18next": "^22.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.38.0",
+    "react-i18next": "^12.0.0",
     "react-redux": "^8.0.1",
     "react-router-dom": "6",
     "react-scripts": "5.0.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,15 +1,17 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import Hero from './components/Hero/Hero';
+import Localize from './Localize';
 import MeetOurTeam from './components/MeetOurTeam/MeetOurTeam';
-import {teamMembers} from "./data/teamData";
+import { teamMembers } from './data/teamData';
 import WyChooseUs from './components/whyChooseUs/WhyChooseUs';
 import CompanyShowcaseComponent from './components/companyShowcaseComponent/CompanyShowcaseComponent';
-import {showCaseData} from "./data/showCaseData"
+import { showCaseData } from './data/showCaseData';
 import './App.css';
 import Education from './components/EducationAndExperience/Education';
 import Experience from './components/EducationAndExperience/Experience';
-import LatestJobs from './components/LatestJob/LatestJobs'
-import HowItWorks from './components/About/HowItWorks/HowItWorks'
+import LatestJobs from './components/LatestJob/LatestJobs';
+import HowItWorks from './components/About/HowItWorks/HowItWorks';
 
 const data = [
   { position: 'Web Developer', salary: '2000$-3000$', date: '10/10/2022' },
@@ -20,18 +22,21 @@ const data = [
 ];
 const header = ['Position', 'Salary', 'Date', ''];
 function App() {
+  const { t } = useTranslation();
   return (
     <div>
       <Hero />
-      <HowItWorks/>
-      <CompanyShowcaseComponent showCaseData={showCaseData}/>
+      <h1>{t('hello')}</h1>
+      <Localize />
+      <HowItWorks />
+      <CompanyShowcaseComponent showCaseData={showCaseData} />
       <LatestJobs data={data} headers={header} />
-      <MeetOurTeam teamMembers={teamMembers}/>
+      <MeetOurTeam teamMembers={teamMembers} />
       <WyChooseUs />
-      <Experience/>
-      <Education/>
+      <Experience />
+      <Education />
     </div>
   );
 }
 
-export default App;
+export default App;
diff --git a/src/Localize.js b/src/Localize.js
@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next';
+
+const Localize = () => {
+  const { i18n } = useTranslation();
+  function changeLanguage(e) {
+    i18n.changeLanguage(e.target.value);
+
+
+  }
+
+  return(
+    <div className='footer'>
+      <button type="button" onClick={changeLanguage} value='en'>English</button>
+      <button type="button" onClick={changeLanguage} value='ar'>Kurdish</button>
+    </div>
+  )
+}
+
+export default Localize;
diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx
@@ -1,37 +1,43 @@
-function Hero() {
-  return (
-    <div className="bg-dark-gray flex justify-around items-center px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18">
-      <div className="text-left">
-        <h1 className="text-white text-5xl leading-snug font-semibold font-inter small:text-lg medium:text-3xl large:text-4xl">
-          10,254 Jobs <br /> Are Listed Here!
-        </h1>
-        <h3 className="text-xl text-white medium:text-yellow-30 font-inter small:text-xs medium:text-lg large:xl">
-          Find your dream job now
-        </h3>{' '}
-        <div className=" mt-5 w-48 small:w-36 medium:w-56 large:w-72">
-          <input
-            type="search"
-            className="rounded-3xl px-6 py-2 outline-none absolute w-72 small:w-32 small:py-1.5 small:px-3 small:text-xs medium:w-52"
-            placeholder="Type to search"
-          />
-          <button
-            type="submit"
-            className="py-2 bg-accent px-5 rounded-3xl text-white relative  left-52 hover:bg-red-500 small:py-1.5 small:px-3 small:text-xs small:left-24 medium:left-36 "
-          >
-            Search
-          </button>
-        </div>
-      </div>
-
-      <div>
-        <img
-          src="/assets/jobsearch.png"
-          alt="a girl searching for job"
-          className="w-500 small:w-300 ml-7"
-        />
-      </div>
-    </div>
-  );
-}
-
-export default Hero;
+import { Trans, useTranslation } from 'react-i18next';
+
+function Hero() {
+  const { t } = useTranslation();
+  return (
+    <div className="bg-dark-gray flex justify-around items-center px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18">
+      <div className="text-left">
+        <h1 className="text-white text-5xl leading-snug font-semibold font-inter small:text-lg medium:text-3xl large:text-4xl">
+          <Trans i18nKey="no-of-jobs">
+            10,254 Jobs <br />
+            Are Listed Here!
+          </Trans>
+        </h1>
+        <h3 className="text-xl text-white medium:text-yellow-30 font-inter small:text-xs medium:text-lg large:xl">
+          {t('find-your-job')}
+        </h3>{' '}
+        <div className=" mt-5 w-48 small:w-36 medium:w-56 large:w-72">
+          <input
+            type="search"
+            className="rounded-3xl px-6 py-2 outline-none absolute w-72 small:w-32 small:py-1.5 small:px-3 small:text-xs medium:w-52"
+            placeholder={t('Type-to-search')}
+          />
+          <button
+            type="submit"
+            className="py-2 bg-accent px-5 rounded-3xl text-white relative  left-52 hover:bg-red-500 small:py-1.5 small:px-3 small:text-xs small:left-24 medium:left-36 "
+          >
+            {t('search')}
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <img
+          src="/assets/jobsearch.png"
+          alt="a girl searching for job"
+          className="w-500 small:w-300 ml-7"
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Hero;
diff --git a/src/i18n/config.js b/src/i18n/config.js
@@ -0,0 +1,22 @@
+/* eslint-disable global-require */
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+i18n.use(initReactI18next).init ({
+  fallbackLng: 'en',
+  lng: 'en',
+  resources: {
+    en: {
+      translations: require('./locales/en/translations.json')
+    },
+    ar: {
+      translations: require('./locales/ar/translations.json')
+    }
+  },
+  ns: ['translations'],
+  defaultNS: 'translations'
+});
+
+i18n.languages = ['en', 'ar'];
+
+export default i18n;
diff --git a/src/i18n/locales/ar/translations.json b/src/i18n/locales/ar/translations.json
@@ -0,0 +1,7 @@
+{
+    "no-of-jobs" : "١٠،٢٥٤ کار <br>لێرە بەردەستە",
+    "find-your-job" : "لێرە دەتوانی پیشەی خەونەکانت بدۆزییەوە",
+    "search" : "گەڕان",
+    "hello" : "سڵاو",
+    "Type-to-search": "بگەڕێ"
+}
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
@@ -0,0 +1,7 @@
+{
+    "no-of-jobs" : " 10,254 Jobs <br />Are Listed Here!",
+    "find-your-job" : "Find your dream job now",
+    "search" : "Search",
+    "hello" : "Hello",
+    "Type-to-search": "Type to search"
+}
diff --git a/src/index.jsx b/src/index.jsx
@@ -1,17 +1,21 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { Provider } from 'react-redux';
-import { BrowserRouter } from "react-router-dom";
-import { store } from './app/store';
-import App from './App';
-import './index.css';
-
-const container = document.getElementById('root');
-const root = createRoot(container);
-
-root.render( <React.StrictMode >
-    <Provider store = { store } >
-    <BrowserRouter><App /></BrowserRouter>
-
-    </Provider> </React.StrictMode>
-);
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from './app/store';
+import App from './App';
+import './index.css';
+import './i18n/config';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+
+root.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </Provider>{' '}
+  </React.StrictMode>
+);