I18next (#138)

* 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 Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 28, 2022 · 517588d · 517588d
1 parent 83c6e38
commit 517588d
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 211 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -16,6 +16,7 @@ import RoadMaps from "./pages/roadmaps";
 import ProfileEdit from "./pages/profile-edit";
 import ContactPage from "./pages/contact";
 
+
 function App() {
 
   const dispatch = useDispatch();

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

diff --git a/src/components/EducationAndExperience/__tests__/Experience.test.js b/src/components/EducationAndExperience/__tests__/Experience.test.js
@@ -1,6 +1,6 @@
 import renderer from "react-test-renderer";
-import Experience from "../Experience";
 import React from "react";
+import Experience from "../Experience";
 
 jest.mock("react-i18next", () => ({
   useTranslation: () => ({ t: (key) => key }),

diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -1,6 +1,8 @@
+import { useTranslation } from "react-i18next";
 import FooterCol from "./FooterCol";
 
 function Footer() {
+  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">
@@ -11,9 +13,7 @@ function Footer() {
             className="h-[3.7rem] small:mx-auto medium:mx-auto"
           />
           <p className="mt-4 max-w-[25rem] text-sm small:text-base text-white text-justify small:text-center py-7 small:max-w-[33rem]">
-            Jobie is a platform that can help you set up your career we give
-            services from finding out the right path to advance your career
-            through a roadmap or a right position from the top companies
+            {t("jobie-description")}
           </p>
         </div>
 
@@ -60,8 +60,7 @@ function Footer() {
               target="_blank"
               rel="noreferrer"
             >
-              <span className="sr-only"> Facebook </span>
-
+              <span className="sr-only">{t("facebook")}</span>
               <svg
                 className="h-9 w-9 small:w-8"
                 fill="currentColor"
@@ -82,8 +81,7 @@ function Footer() {
               target="_blank"
               rel="noreferrer"
             >
-              <span className="sr-only"> Instagram </span>
-
+              <span className="sr-only">{t("instagram")}</span>
               <svg
                 className="h-9 w-9 small:w-8"
                 fill="currentColor"
@@ -104,8 +102,7 @@ function Footer() {
               target="_blank"
               rel="noreferrer"
             >
-              <span className="sr-only"> Twitter </span>
-
+              <span className="sr-only">{t("twitter")}</span>
               <svg
                 className="h-9 w-9 small:w-8"
                 fill="currentColor"
@@ -122,8 +119,7 @@ function Footer() {
               target="_blank"
               rel="noreferrer"
             >
-              <span className="sr-only"> GitHub </span>
-
+              <span className="sr-only"> {t("github")} </span>
               <svg
                 className="h-9 w-9 small:w-8"
                 fill="currentColor"

diff --git a/src/components/Footer/__snapshots__/Footer.test.jsx.snap b/src/components/Footer/__snapshots__/Footer.test.jsx.snap
@@ -19,7 +19,7 @@ exports[`Footer Component Render Footer Correctly 1`] = `
       <p
         className="mt-4 max-w-[25rem] text-sm small:text-base text-white text-justify small:text-center py-7 small:max-w-[33rem]"
       >
-        Jobie is a platform that can help you set up your career we give services from finding out the right path to advance your career through a roadmap or a right position from the top companies
+        jobie-description
       </p>
     </div>
     <div
@@ -186,7 +186,7 @@ exports[`Footer Component Render Footer Correctly 1`] = `
           <span
             className="sr-only"
           >
-             Facebook 
+            facebook
           </span>
           <svg
             aria-hidden="true"
@@ -210,7 +210,7 @@ exports[`Footer Component Render Footer Correctly 1`] = `
           <span
             className="sr-only"
           >
-             Instagram 
+            instagram
           </span>
           <svg
             aria-hidden="true"
@@ -234,7 +234,7 @@ exports[`Footer Component Render Footer Correctly 1`] = `
           <span
             className="sr-only"
           >
-             Twitter 
+            twitter
           </span>
           <svg
             aria-hidden="true"
@@ -256,7 +256,9 @@ exports[`Footer Component Render Footer Correctly 1`] = `
           <span
             className="sr-only"
           >
-             GitHub 
+             
+            github
+             
           </span>
           <svg
             aria-hidden="true"

diff --git a/src/components/Hero/JobsFinder.jsx b/src/components/Hero/JobsFinder.jsx
@@ -1,7 +1,9 @@
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 // import { filterData } from "../../data/filterData";
 
 function JobsFinder({ setData, data }) {
+  const [t] = useTranslation();
   const [text, setText] = useState("");
   const handleChange = (e) => setText(e.target.value);
 
@@ -27,12 +29,10 @@ function JobsFinder({ setData, data }) {
       <div className="flex  flex-col">
         <div>
           <h1 className="text-3xl font-medium text-dark-gray leading-loose ">
-            {" "}
-            Jobs Finder
+            {t("jobs-finder")}
           </h1>
           <p className="decoration-solid pt-0 text-dark-gray leading-loose">
-            {" "}
-            Find the best job for you here
+            {t("find-your-best-job")}
           </p>
         </div>
         <div className=" flex-col mt-2">
@@ -48,8 +48,7 @@ function JobsFinder({ setData, data }) {
               type="submit"
               className="py-2 bg-accent px-5 rounded-3xl text-white relative   hover:bg-red-500 "
             >
-              {" "}
-              Search
+              {t("search-finder")}
             </button>
           </form>
         </div>

diff --git a/src/components/Hero/__snapshots__/JobsFinder.test.js.snap b/src/components/Hero/__snapshots__/JobsFinder.test.js.snap
@@ -11,14 +11,12 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
       <h1
         className="text-3xl font-medium text-dark-gray leading-loose "
       >
-         
-        Jobs Finder
+        jobs-finder
       </h1>
       <p
         className="decoration-solid pt-0 text-dark-gray leading-loose"
       >
-         
-        Find the best job for you here
+        find-your-best-job
       </p>
     </div>
     <div
@@ -38,8 +36,7 @@ exports[`renders correctly when the component matches the snapshot 1`] = `
           className="py-2 bg-accent px-5 rounded-3xl text-white relative   hover:bg-red-500 "
           type="submit"
         >
-           
-          Search
+          search-finder
         </button>
       </form>
     </div>

diff --git a/src/components/Login/__test__/Login.test.js b/src/components/Login/__test__/Login.test.js
@@ -4,9 +4,12 @@ import { MemoryRouter } from "react-router-dom";
 import Login from "../Login";
 
 it("renders correctly when the component matches the snapshot", () => {
-  const tree = renderer.create(
-  <MemoryRouter>
-    <Login />
-  </MemoryRouter>).toJSON();
+  const tree = renderer
+    .create(
+      <MemoryRouter>
+        <Login />
+      </MemoryRouter>
+    )
+    .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 */}

diff --git a/src/components/signup/SignUp.jsx b/src/components/signup/SignUp.jsx
@@ -34,7 +34,7 @@ function SignUp() {
               })
             )
           )
-           .then(navigate("/"))
+          .then(navigate("/"))
           .catch((error) => {
             console.log("user not updated", error);
           });

diff --git a/src/components/signup/__test__/SignUp.test.js b/src/components/signup/__test__/SignUp.test.js
@@ -7,15 +7,13 @@ jest.mock("react-redux", () => ({
   useDispatch: () => ({ t: (key) => key }),
 }));
 
-
 it("renders correctly when the component matches the snapshot", () => {
-  const tree = renderer.create(
-    <MemoryRouter>
-      <SignUp />
-    </MemoryRouter>
-
-
-
-   ).toJSON();
+  const tree = renderer
+    .create(
+      <MemoryRouter>
+        <SignUp />
+      </MemoryRouter>
+    )
+    .toJSON();
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/userContact/UserContact.jsx b/src/components/userContact/UserContact.jsx
@@ -1,66 +1,48 @@
+import { t } from "i18next";
+
 function UserContact() {
   return (
-    <div className="ml-9 flex flex-col md:flex-row justify-start pt-20 pb-10 px-32 small:px-14 small:py-5 medium:py-6 medium:px-16 large:py-8 large:px-18">
-      <div className="flex justify-start m-5 pr-10 flex-col">
-        <h1 className="text-3xl text-dark-gray font-semibold small:text-xl">
-          Contact
-        </h1>
-        <div className="flex  justify-center  flex-col pt-4 ">
-          <div className="pb-3 flex">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              className="w-6 h-6 text-dark-gray small:w-4"
-            >
-              <path
-                fillRule="evenodd"
-                d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
-                clipRule="evenodd"
-              />
-            </svg>
-            <span className="pl-3">Erbil</span>
-          </div>
-          <div className="pb-3 flex ">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              className="w-6 h-6 text-dark-gray small:w-4  "
-            >
-              <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
-              <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
-            </svg>
-            <span className="pl-3">[email protected]</span>
-          </div>
-          <div className=" flex">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              className="w-6 h-6 text-dark-gray small:w-4"
-            >
-              <path
-                fillRule="evenodd"
-                d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
-                clipRule="evenodd"
-              />
-            </svg>
-            <span className="pl-3">+964-750-444-4444</span>
-          </div>
+    <div>
+      <div className="flex justify-start flex-col">
+        <h1>{t("contact")}</h1>
+        <div className="flex  justify-center content-center">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-6 h-6 text-dark-gray"
+          >
+            <path
+              fillRule="evenodd"
+              d="M11.54 22.351l.07.04.028.016a.76.76 0 00.723 0l.028-.015.071-.041a16.975 16.975 0 001.144-.742 19.58 19.58 0 002.683-2.282c1.944-1.99 3.963-4.98 3.963-8.827a8.25 8.25 0 00-16.5 0c0 3.846 2.02 6.837 3.963 8.827a19.58 19.58 0 002.682 2.282 16.975 16.975 0 001.145.742zM12 13.5a3 3 0 100-6 3 3 0 000 6z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-6 h-6 text-dark-gray align-start"
+          >
+            <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
+            <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+          </svg>
         </div>
-      </div>
-      <div className="m-5 ml-9">
-        <h1 className="text-3xl font-semibold text-dark-gray lg:pb-3 small:text-xl">
-          Skills
-        </h1>
         <div>
-          <ul>
-            <li>HTML</li>
-            <li>CSS</li>
-            <li>JS</li>
-            <li>React</li>
-          </ul>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-6 h-6 text-dark-gray"
+          >
+            <path
+              fillRule="evenodd"
+              d="M1.5 4.5a3 3 0 013-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 01-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 006.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 011.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 01-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5z"
+              clipRule="evenodd"
+            />
+          </svg>
         </div>
       </div>
     </div>