I18next (#139)

* working on localization * localization functionality completed * Testing contact * Completed localization * changed contact import problem * updated snapshot tests * added translation for footer and finder * merged branch develop * added translation to components Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 28, 2022 · 28c3b7c · 28c3b7c
1 parent bda35b0
commit 28c3b7c
Show file tree

Hide file tree

Showing 23 changed files with 314 additions and 258 deletions.
diff --git a/src/components/BookmarkedJobs/BookmarkedJobs.jsx b/src/components/BookmarkedJobs/BookmarkedJobs.jsx
@@ -1,7 +1,9 @@
+import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import { bookmark } from "../../features/bookmark/bookmark";
 
 function BookmarkedJobs() {
+  const { t } = useTranslation();
   const [markedJobs, setMarkedJobs] = useState([]);
 
   console.log("cough", markedJobs);
@@ -45,7 +47,7 @@ function BookmarkedJobs() {
   return (
     <div className="pl-44 py-4 medium:px-24 medium:py-2 small:px-4 small:py-2">
       <h1 className="mb-4 text-4xl text-dark-gray md:text-5xl lg:text-6x pb-7 text-left mt-8">
-        Bookmarked Jobs
+        {t("bookmarked-jobs")}
       </h1>
       {markedJobs.map((data) => {
         return (

diff --git a/src/components/BookmarkedJobs/__test__/BookmarkedJobs.test.js b/src/components/BookmarkedJobs/__test__/BookmarkedJobs.test.js
@@ -2,6 +2,10 @@ import renderer from "react-test-renderer";
 
 import BookmarkedJobs from "../BookmarkedJobs";
 
+jest.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key) => key }),
+  Trans: ({ children }) => children,
+}));
 it("renders correctly when the component matches the snapshot", () => {
   const tree = renderer.create(<BookmarkedJobs />).toJSON();
   expect(tree).toMatchSnapshot();

diff --git a/src/components/BookmarkedJobs/__test__/__snapshots__/BookmarkedJobs.test.js.snap b/src/components/BookmarkedJobs/__test__/__snapshots__/BookmarkedJobs.test.js.snap
@@ -7,7 +7,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
   <h1
     className="mb-4 text-4xl text-dark-gray md:text-5xl lg:text-6x pb-7 text-left mt-8"
   >
-    Bookmarked Jobs
+    bookmarked-jobs
   </h1>
 </div>
 `;
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
 import FooterCol from "./FooterCol";
 
 function Footer() {
-  const [t] = useTranslation();
+  const { t } = useTranslation();
   return (
     <footer aria-label="Site Footer" className="bg-dark-gray">
       <div className="flex flex-row justify-between mx-auto max-w-6xl pt-7 pb-[4.75rem] small:py-7 medium:py-7 small:px-6 large:px-8 small:flex-col small:items-center medium:flex-col medium:items-center">

diff --git a/src/components/Hero/JobsFinder.jsx b/src/components/Hero/JobsFinder.jsx
@@ -39,7 +39,7 @@ function JobsFinder({ setData, data }) {
           <form onSubmit={handleSubmit}>
             <input
               type="search"
-              placeholder="Type to search "
+              placeholder={t("type-to-search")}
               className="rounded-3xl px-6 py-2 outline-none relative md:left-8"
               value={text}
               onChange={handleChange}

diff --git a/src/components/Hero/__snapshots__/JobsFinder.test.js.snap b/src/components/Hero/__snapshots__/JobsFinder.test.js.snap
@@ -28,7 +28,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
         <input
           className="rounded-3xl px-6 py-2 outline-none relative md:left-8"
           onChange={[Function]}
-          placeholder="Type to search "
+          placeholder="type-to-search"
           type="search"
           value=""
         />

diff --git a/src/components/LatestJob/LatestJobs.js b/src/components/LatestJob/LatestJobs.js
@@ -1,7 +1,9 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import CustomButton from "../UI/Button/CustomButton";
 
 const LatestJobs = ({ headers, data }) => {
+  const { t } = useTranslation();
   const [fullTime, setFullTime] = useState(false);
   const [partTime, setPartTime] = useState(false);
   const [remote, setRemote] = useState(false);
@@ -28,7 +30,7 @@ const LatestJobs = ({ headers, data }) => {
     <div className="bg-gray-500/5">
       <div className="max-w-[70%] large:max-w-[70%] medium:max-w-[80%] small:max-w-[85%] h-full mx-auto py-10 small:py-5">
         <h1 className="text-3xl small:text-xl text-secondary mb-10 small:mb-5 font-semibold">
-          Latest Jobs
+          {t("latest-job")}
         </h1>
         <div className="flex justify-end">
           <label htmlFor="full-time" className="mr-4 small:mr-2 small:text-sm">
@@ -39,7 +41,7 @@ const LatestJobs = ({ headers, data }) => {
               onChange={handleFullTime}
               checked={fullTime}
             />
-            Full Time
+            {t("full-time")}
           </label>
           <label htmlFor="part-time" className="mr-4 small:mr-2 small:text-sm">
             <input
@@ -49,7 +51,7 @@ const LatestJobs = ({ headers, data }) => {
               onChange={handlePartTime}
               checked={partTime}
             />
-            Part Time
+            {t("part-time")}
           </label>
           <label htmlFor="remote" className="small:text-sm">
             <input
@@ -59,7 +61,7 @@ const LatestJobs = ({ headers, data }) => {
               onChange={handleRemote}
               checked={remote}
             />
-            Remote
+            {t("remote")}
           </label>
         </div>
         <div className="overflow-x-auto shadow-md">

diff --git a/src/components/LatestJob/__tests__/LatestJobs.test.js b/src/components/LatestJob/__tests__/LatestJobs.test.js
@@ -72,6 +72,11 @@ const header = [
   { title: "Date", id: 3 },
   { title: "", id: 4 },
 ];
+
+jest.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key) => key }),
+  Trans: ({ children }) => children,
+}));
 it("renders Latest Jobs correctly", () => {
   const tree = renderer
     .create(<LatestJobs headers={header} data={data} />)

diff --git a/src/components/LatestJob/__tests__/__snapshots__/LatestJobs.test.js.snap b/src/components/LatestJob/__tests__/__snapshots__/LatestJobs.test.js.snap
@@ -10,7 +10,7 @@ exports[`renders Latest Jobs correctly 1`] = `
     <h1
       className="text-3xl small:text-xl text-secondary mb-10 small:mb-5 font-semibold"
     >
-      Latest Jobs
+      latest-job
     </h1>
     <div
       className="flex justify-end"
@@ -26,7 +26,7 @@ exports[`renders Latest Jobs correctly 1`] = `
           onChange={[Function]}
           type="checkbox"
         />
-        Full Time
+        full-time
       </label>
       <label
         className="mr-4 small:mr-2 small:text-sm"
@@ -39,7 +39,7 @@ exports[`renders Latest Jobs correctly 1`] = `
           onChange={[Function]}
           type="checkbox"
         />
-        Part Time
+        part-time
       </label>
       <label
         className="small:text-sm"
@@ -52,7 +52,7 @@ exports[`renders Latest Jobs correctly 1`] = `
           onChange={[Function]}
           type="checkbox"
         />
-        Remote
+        remote
       </label>
     </div>
     <div

diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx
@@ -3,9 +3,11 @@ import { useNavigate, Link } from "react-router-dom";
 import { useForm } from "react-hook-form";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { Trans, useTranslation } from "react-i18next";
 import { auth, google, signInWithPopup } from "../../firebase";
 
 function Login() {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const login = async (provider) => {
     const result = await signInWithPopup(auth, provider);
@@ -21,7 +23,7 @@ function Login() {
   return (
     <div className=" my-52">
       <h1 className="font-inter text-center font-black text-2xl mb-6">
-        Log in
+        {t("login")}
       </h1>
       <div className="w-full max-w-sm mx-auto">
         <form onSubmit={handleSubmit(onSubmit)}>
@@ -47,7 +49,7 @@ function Login() {
               className="shadow border-2 border-black rounded-md w-full py-2 px-3 text-dark-gray leading-tight focus:outline-1 focus:shadow-outline"
               id="password"
               type="password"
-              placeholder="Password                                                                     &#xF023;"
+              placeholder="Password&#xF023;"
               {...register("password", {
                 required: true,
                 minLength: 8,
@@ -69,7 +71,7 @@ function Login() {
               type="submit"
               className="w-full bg-accent font-inter text-white rounded-md py-1 hover:bg-red-500"
             >
-              Log in
+              {t("login")}
             </button>
           </div>
           <div className="mb-4">
@@ -91,8 +93,7 @@ function Login() {
                 icon={faGoogle}
                 className="pr-3 text-2xl font-bold"
               />
-              Log in with
-              <span className="font-bold"> Google</span>
+              <Trans i18nKey="login-with">Log in with Google</Trans>
             </button>
           </div>
         </form>

diff --git a/src/components/Login/__test__/__snapshots__/Login.test.js.snap b/src/components/Login/__test__/__snapshots__/Login.test.js.snap
@@ -7,7 +7,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
   <h1
     className="font-inter text-center font-black text-2xl mb-6"
   >
-    Log in
+    login
   </h1>
   <div
     className="w-full max-w-sm mx-auto"
@@ -40,7 +40,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
           name="password"
           onBlur={[Function]}
           onChange={[Function]}
-          placeholder="Password                                                                     "
+          placeholder="Password"
           type="password"
         />
         <error
@@ -54,7 +54,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
           className="w-full bg-accent font-inter text-white rounded-md py-1 hover:bg-red-500"
           type="submit"
         >
-          Log in
+          login
         </button>
       </div>
       <div
@@ -102,12 +102,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
               style={Object {}}
             />
           </svg>
-          Log in with
-          <span
-            className="font-bold"
-          >
-             Google
-          </span>
+          Log in with Google
         </button>
       </div>
     </form>

diff --git a/src/components/Navbar/DropDown.jsx b/src/components/Navbar/DropDown.jsx
@@ -2,10 +2,12 @@ import { Fragment } from "react";
 import { Menu, Transition } from "@headlessui/react";
 import { Link } from "react-router-dom";
 import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
 import { signout } from "../../features/user/userSlice";
 import { auth } from "../../firebase";
 
 function DropDown({ setIsAuthenticated }) {
+  const [t] = useTranslation();
   const dispatch = useDispatch();
   const logoutOfApp = () => {
     dispatch(signout());
@@ -25,8 +27,7 @@ function DropDown({ setIsAuthenticated }) {
           data-testid="filter-botton-toggle"
           className="bg-red-400 hover:bg-blue-700 text-white font-bold py-2 px-5 mx-3 rounded-full"
         >
-          {" "}
-          Account
+          {t("account")}
         </Menu.Button>
       </div>
 
@@ -53,7 +54,7 @@ function DropDown({ setIsAuthenticated }) {
                   }`}
                 >
                   <Link to="/profile">
-                    <h3>View Profile</h3>
+                    <h3>{t("view-profile")}</h3>
                   </Link>
                 </div>
               )}
@@ -70,7 +71,7 @@ function DropDown({ setIsAuthenticated }) {
                   }`}
                 >
                   <Link to="/profile-edit">
-                    <h3>Edit Profile</h3>
+                    <h3>{t("edit-profile")}</h3>
                   </Link>
                 </div>
               )}
@@ -88,7 +89,7 @@ function DropDown({ setIsAuthenticated }) {
                   }`}
                   onClick={logoutOfApp}
                 >
-                  <h3>Log out</h3>
+                  <h3>{t("signout")}</h3>
                   {/* <SignOut /> */}
                 </div>
               )}

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -8,9 +8,11 @@ import { faMagnifyingGlass, faGlobe } from "@fortawesome/free-solid-svg-icons";
 import Button from "./Button";
 import Dropdown from "./DropDown";
 import { useTranslation } from "react-i18next";
+import { t } from "i18next";
 
 console.log("auth", auth);
 const Navbar = () => {
+  const { t } = useTranslation();
   const Links = [
     { name: "Home", link: "/" },
     { name: "About", link: "/about-us" },
@@ -81,7 +83,7 @@ const Navbar = () => {
           <input
             type="text"
             className="block px-4 md:my-0 my-5 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40 w-full"
-            placeholder="Search..."
+            placeholder={t("search")}
           />
           <button type="button" className="-ml-6">
             <FontAwesomeIcon icon={faMagnifyingGlass} />
@@ -91,7 +93,7 @@ const Navbar = () => {
           <Dropdown setIsAuthenticated={setIsAuth} isAuthenticated={isAuth} />
         ) : (
           <Link to="/login">
-            <Button>Login</Button>
+            <Button>{t("login")}</Button>
           </Link>
         )}
       </ul>

diff --git a/src/components/Navbar/__tests__/Navbar.test.jsx b/src/components/Navbar/__tests__/Navbar.test.jsx
@@ -1,8 +1,12 @@
 import renderer from "react-test-renderer";
 import { MemoryRouter } from "react-router-dom";
-import Navbar from "../Navbar.jsx";
 import React from "react";
+import Navbar from "../Navbar.jsx";
 
+jest.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key) => key }),
+  Trans: ({ children }) => children,
+}));
 it("renders Meet Our Team component correctly", () => {
   const tree = renderer
     .create(

diff --git a/src/components/Navbar/__tests__/__snapshots__/Navbar.test.jsx.snap b/src/components/Navbar/__tests__/__snapshots__/Navbar.test.jsx.snap
@@ -103,7 +103,7 @@ exports[`renders Meet Our Team component correctly 1`] = `
     >
       <input
         className="block px-4 md:my-0 my-5 text-purple-700 bg-white border rounded-md focus:border-purple-400 focus:ring-purple-300 focus:outline-none focus:ring focus:ring-opacity-40 w-full"
-        placeholder="Search..."
+        placeholder="search"
         type="text"
       />
       <button
@@ -137,7 +137,7 @@ exports[`renders Meet Our Team component correctly 1`] = `
         className="flex bg-red-400 hover:bg-blue-700 text-white font-bold py-2 px-9 mx-4 rounded-full"
         type="button"
       >
-        Login
+        login
       </button>
     </a>
   </ul>

diff --git a/src/components/aboutHero/AboutHero.test.js b/src/components/aboutHero/AboutHero.test.js
@@ -2,6 +2,10 @@ import renderer from "react-test-renderer";
 
 import AboutHero from "./AboutHero";
 
+jest.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key) => key }),
+  Trans: ({ children }) => children,
+}));
 it("renders correctly when the component matches the snapshot", () => {
   const tree = renderer.create(<AboutHero />).toJSON();
   expect(tree).toMatchSnapshot();

diff --git a/src/components/filter/Filter.jsx b/src/components/filter/Filter.jsx
@@ -118,7 +118,7 @@ const Filter = ({ setData, items }) => {
 
   return (
     <div className="flex ">
-      <div className="bg-gray-200 p-5 flex flex-col items-center">
+      <div className="bg-gray-200 h-screen p-5 flex flex-col items-center">
         <h2 className="text-secondary font-bold text-3xl">{t("filter")}</h2>
 
         {/* SALARY */}
@@ -190,7 +190,7 @@ const Filter = ({ setData, items }) => {
                   <option>{t("iraq")}</option>
                   <option>{t("jordan")}</option>
                   <option>{t("yemen")}</option>
-                  <option>{t("syr")}</option>
+                  <option>{t("syria")}</option>
                   <option>{t("lebanon")}</option>
                   <option>{t("turkey")}</option>
                 </select>