added donated and contactUs page translate

ReCoded-Org · May 3, 2022 · 973450c · 973450c
1 parent b240c06
commit 973450c
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^17.0.2",
     "react-i18next": "^11.16.7",
     "react-icons": "^4.3.1",
+    "react-modal": "^3.15.1",
     "react-redux": "^7.2.3",
     "react-responsive-modal": "^6.2.0",
     "react-router-dom": "^6.3.0",

diff --git a/public/assets/i18n/common/en.json b/public/assets/i18n/common/en.json
@@ -27,12 +27,12 @@
     "loading":"Loading...",
     "You are not authenticated":"You are not authenticated",
     "donate":"Donate",
-    "itemName": "Item Name",
-    "description": "Description",
-    "itemOwnerInformation": "Item Owner Information",
+    "itemName":"Item Name",
+    "description":"Description",
+    "itemOwnerInformation":"Item Owner Information",
     "items": "Items",
-    "donators": "Donators",
-    "pricing": "Pricing",
+    "donators":"Donators",
+    "pricing":"Pricing",
     "QA":"QA",
     "resources":"Resources",
     "privacyPolicy":"Privacy Policy",
@@ -42,5 +42,16 @@
     "subscribeform": "Subscribe to our Newsletter",
     "subscribe": "Subscribe",
     "subscribed":"Subscribed to our Service",
-    "enterYourEmailAddress": "Enter Your Email Address"
+    "enterYourEmailAddress": "Enter Your Email Address",
+    "makeRequest":"Make Request",
+    "categories" :"Categories",
+    "count": "Count",
+    "availableItems":"Available Items",
+    "CONTACTUS": "CONTACT US",
+    "expertTeam": "Please get in touch and our expert team will answer all your questions.",
+    "fullName":"Full Name",
+    "message": "Message",
+    "sendMessage": "Send Message",
+    "email":"Email"
+
 }
diff --git a/public/assets/i18n/common/tr.json b/public/assets/i18n/common/tr.json
@@ -42,5 +42,15 @@
     "subscribeform": "Haber bültenimize abone olun",
     "subscribe": "Abone ol",
     "subscribed":"Haber bültenimize abone oldunuz",
-    "enterYourEmailAddress":"Email adresinizi giriniz."
+    "enterYourEmailAddress":"Email adresinizi giriniz.",
+    "makeRequest": "Talepte Bulun",
+    "categories" :  "Kategoriler",
+    "count": "Adet",
+    "availableItems": "Mevcut Eşyalar",
+    "CONTACTUS": "İLETİŞİM",
+    "expertTeam": "Lütfen iletişime geçin, uzman ekibimiz tüm sorularınızı yanıtlayacaktır.",
+    "fullName": "İSİM SOYİSİM",
+    "message": "Mesaj",
+    "sendMessage":"Mesaji Gönder",
+    "email":"Email"
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -8,17 +8,18 @@ import Footer from './components/Footer/Footer';
 // import Login from './components/Login/Login';
 // import Signup from './components/Signup/Signup';
 // import Faq from './pages/FAQ/Faq';
-// import ContactUs from './pages/ContactUs/ContactUs';
+import ContactUs from './pages/ContactUs/ContactUs';
 // import Donated from './pages/Donated/Donated';
-import Request from './pages/Request/Request';
+// import Request from './pages/Request/Request';
+
 
 export default function App() {
   return (
     <div className="App">
       <Suspense fallback={null}>
         <BrowserRouter>
           <Navbar isLogin />
-          <Request />
+          <ContactUs />
           <Footer />
         </BrowserRouter>
       </Suspense>

diff --git a/src/pages/ContactUs/ContactUs.jsx b/src/pages/ContactUs/ContactUs.jsx
@@ -3,15 +3,19 @@ import { Formik, Form, Field, ErrorMessage } from 'formik';
 
 import contactus from '../../assets/images/contactus.svg';
 import sendEmail from '../../utils/sendEmail';
+import { useTranslation } from "react-i18next";
+import i18next from "i18next";
 
 function Contactus() {
   const modelRef = useRef();
+  const { i18n, t } = useTranslation(["common"]);
 
   return (
+
     <section className="text-gray-600 body-font relative">
-      <h1 className="text-gray-400 text-5xl p-5 font-medium">CONTACT US</h1>
+      <h1 className="text-gray-400 text-5xl p-5 font-medium">{t("CONTACTUS")}</h1>
       <h2 className="text-3xl font-medium drop-shadow-md px-10">
-        Please get in touch and our expert team will answer all your questions.
+      {t("expertTeam")}
       </h2>
       <div className="px-5 py-2 mx-auto flex sm:flex-nowrap flex-wrap flex-col md:flex-row items-center">
         <div className="lg:w-2/3 md:w-1/2 w-full">
@@ -48,7 +52,7 @@ function Contactus() {
                       htmlFor="name"
                       className="uppercase text-sm text-gray-500 font-bold"
                     >
-                      Full Name
+                      {t("fullName")}
                       <input
                         className="w-full bg-gray-200 text-gray-900 mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
                         name={field.name}
@@ -96,7 +100,7 @@ function Contactus() {
                       htmlFor="message"
                       className="uppercase text-sm text-gray-500 font-bold"
                     >
-                      Message
+                      {t("message")}
                       <textarea
                         rows="4"
                         className="w-full bg-gray-200 text-gray-900 mt-2 p-3 rounded-lg focus:outline-none focus:shadow-outline"
@@ -118,7 +122,7 @@ function Contactus() {
                 type="submit"
                 className="uppercase text-sm font-bold tracking-wide bg-primary text-gray-100 p-3 rounded-lg w-full focus:outline-none focus:shadow-outline"
               >
-                Send Message
+                {t("sendMessage")}
               </button>
             </Form>
           </Formik>

diff --git a/src/pages/Donated/Donated.jsx b/src/pages/Donated/Donated.jsx
@@ -1,5 +1,7 @@
 import { useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import { useTranslation } from "react-i18next";
+import i18next from "i18next";
 
 import DonatedList from './DonatedList';
 import Filter from './Filter';
@@ -10,6 +12,7 @@ function Donated() {
 
   const [msg, setMsg] = useState('');
   const modelRef = useRef();
+  const { i18n, t } = useTranslation(["common"]);
 
   const filterBy = (p) => {
     setSearchParams({ filter: p });
@@ -32,7 +35,7 @@ function Donated() {
     <>
       <img src={donateImg} alt="Donate Logo" className="mx-auto mt-8" />
       <h1 className="text-[#212121] font-bold text-4xl my-2">
-        Available Items
+        {t("availableItems")}
       </h1>
       <Filter filterBy={filterBy} searchParams={searchParams.get('filter')} />
       <DonatedList
@@ -62,7 +65,7 @@ function Donated() {
               </svg>
             </div>
             <h3 className="text-lg leading-6 font-medium text-gray-900">
-              Successful!
+            {t("successful")}
             </h3>
             <div className="mt-2 px-7 py-3">
               <p className="text-sm text-gray-500">{msg}</p>
@@ -75,7 +78,7 @@ function Donated() {
                 }}
                 className="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
               >
-                OK
+               {t("ok")}
               </button>
             </div>
           </div>
@@ -98,10 +101,10 @@ function Donated() {
               </svg>
             </div>
             <h3 className="text-lg leading-6 font-medium text-red-600">
-              Error!
+            {t("error")}
             </h3>
             <div className="mt-2 px-7 py-3">
-              <p className="text-sm text-gray-500">{msg}</p>
+              <p className="text-sm text-gray-500">{t(msg)}</p>
             </div>
             <div className="items-center px-4 py-3">
               <button
@@ -111,7 +114,7 @@ function Donated() {
                 }}
                 className="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300"
               >
-                OK
+                {t("ok")}
               </button>
             </div>
           </div>

diff --git a/src/pages/Donated/DonatedList.jsx b/src/pages/Donated/DonatedList.jsx
@@ -1,13 +1,16 @@
 import { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
+import { useTranslation } from "react-i18next";
+import i18next from "i18next";
 
 import ItemCard from './ItemCard';
 import { getAvailableItems, getItemsByFilter } from './donatedSlice';
 
 function DonatedList({ searchParams, handleResponse }) {
   const { status, items, error } = useSelector((state) => state.donated);
   const dispatch = useDispatch();
+  const { i18n, t } = useTranslation(["common"]);
 
   useEffect(() => {
     if (searchParams === null || searchParams === 'All')
@@ -16,7 +19,7 @@ function DonatedList({ searchParams, handleResponse }) {
   }, [searchParams, dispatch]);
 
   if (status === 'loading')
-    return <h1 className="text-2xl text-white">Loading...</h1>;
+    return <h1 className="text-2xl text-white">{t("loading")}</h1>;
   if (status === 'failed')
     return <h1 className="text-2xl font-bold my-8">{error}</h1>;
 

diff --git a/src/pages/Donated/Filter.jsx b/src/pages/Donated/Filter.jsx
@@ -1,10 +1,13 @@
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { sortByDate } from './donatedSlice';
+import { useTranslation } from "react-i18next";
+import i18next from "i18next";
 
 function Filter({ filterBy, searchParams }) {
   const { type, sortOrder } = useSelector((state) => state.donated);
   const dispatch = useDispatch();
+  const { i18n, t } = useTranslation(["common"]);
 
   const handleFilter = (filterTerm) => {
     filterBy(filterTerm);
@@ -23,7 +26,7 @@ function Filter({ filterBy, searchParams }) {
           onClick={() => handleFilter(itemType)}
           onKeyDown={() => handleFilter(itemType)}
         >
-          {itemType}
+          {t(itemType)}
         </button>
       </li>
     );
@@ -41,7 +44,7 @@ function Filter({ filterBy, searchParams }) {
           }}
           type="button"
         >
-          Date
+          {t("date")}
           <svg
             className={`fill-current h-4 w-4 ${
               sortOrder === 'ASC' ? '' : 'rotate-180'