Merge pull request #101 from IT-Academy-BCN/feature/translation-csv-t…

…o-json

Feature/translation-csv-to-json

package.json

@@ -13,10 +13,15 @@
     "@reduxjs/toolkit": "^1.9.5",
     "autoprefixer": "^10.4.14",
     "axios": "^1.4.0",
+    "csvtojson": "^2.0.10",
+    "i18next": "^23.6.0",
+    "i18next-browser-languagedetector": "^7.1.0",
     "jquery": "^3.7.0",
     "postcss": "^8.4.23",
     "react": "^18.2.0",
+    "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.3.1",
     "react-icons": "^4.8.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.10.0",
@@ -25,6 +30,7 @@
   "devDependencies": {
     "@types/jquery": "^3.5.16",
     "@types/react": "^18.0.28",
+    "@types/react-csv": "^1.1.7",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",

src/components/BackOfficeComponent.tsx

@@ -6,9 +6,11 @@ import ProjectsComponent from "./apps/ProjectsComponent";
 import menu from "../assets/img/menu.png";
 import { AdminButtons } from "./faqs/faqsAdminView/AdminButtons";
 import BackOfficeUserSendCode from "./BackOfficeUserSendCode";
+import { useTranslation } from "react-i18next";
 
 function ViewBackOffice({ setIsLogged, dispatch }: { readonly setIsLogged: any; readonly dispatch: any }) {
-
+  const [t] = useTranslation();
+
   const [state, setState] = useState({
     faqs: false,
     projectsComponent: false,
@@ -54,21 +56,21 @@ function ViewBackOffice({ setIsLogged, dispatch }: { readonly setIsLogged: any;
           <div className="grid grid-rows-3 my-10">
             <button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldFaqs ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('faqs')}>
               <div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldFaqs ? '' : 'hidden'}`}></div>
-              FAQs
+              {t("backofficePage.navbarComponent.faqs")}
             </button>
 
             <button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldProjectsComponent ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('apps')}>
               <div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldProjectsComponent ? '' : 'hidden'}`}></div>
-              Apps
+              {t("backofficePage.navbarComponent.apps")}
             </button>
 
             <button className={`flex justify-center items-center py-2 my-4 ml-2 ${boldFont.boldUsersComponent ? 'font-bold' : 'font-normal'}`} onClick={() => handleClickNav('users')}>
               <div className={`w-2 h-2 rounded-full mr-2 bg-[#BA007C] ${boldFont.boldUsersComponent ? '' : 'hidden'}`}></div>
-              Usuari@s
+              {t("backofficePage.navbarComponent.users")}
             </button>
           </div>
           <button onClick={() => dispatch(setIsLogged(false))} className="flex py-2 px-3 my-4 ml-2"> <img src={LogoOut} alt="" />
-            Logout
+            {t("backofficePage.navbarComponent.logoutButton")}
           </button>
         </nav>
 

src/components/BackOfficeUserSendCode.tsx

@@ -7,9 +7,10 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../store/store";
 import { createToken } from "../interfaces/interfaces";
 import { AdminButtons } from "./faqs/faqsAdminView/AdminButtons";
+import { useTranslation } from "react-i18next";
 
 const BackOfficeUserSendCode = () => {
-
+  const [t] = useTranslation();
   const dispatch = useDispatch()
 
   const { acces_token }: createToken = useSelector(
@@ -89,32 +90,32 @@ const BackOfficeUserSendCode = () => {
       </div>
 
       <div className="flex flex-col place-items-center bg-white rounded-md h-full mb-10">
-        <h1 className="md:col-span-2 lg:col-span-3 font-black py-12 text-3xl font-poppins sm:text-center lg:text-left">Invitar nuev@ admin</h1>
+        <h1 className="md:col-span-2 lg:col-span-3 font-black py-12 text-3xl font-poppins sm:text-center lg:text-left">{t("backofficePage.usersComponent.title")}</h1>
         <input
           type="email"
           ref={inputRef}
           disabled={desactivateInputElements}
           onFocus={() => handleResetEmail('no-reset-email')}
-          placeholder="Dirección de email"
+          placeholder={t("backofficePage.usersComponent.emailInput")}
           className={`flex my-8 input input-bordered ${colorInput} w-2/3 max-w-xs`}
           value={email}
           onChange={(e) => setEmail(e.target.value)}
         />
         <div className="flex w-1/3">
           <button   className={`btn w-full ${colorButton} text-white ${colorButton === 'btn-success' || colorButton === 'btn-error' ? 'pointer-events-none' : ''}`} onClick={handleSendEmail}>
           {error === '' ? (
-            <span>Invitar</span>
+            <span>{t("backofficePage.usersComponent.buttonTitle")}</span>
           ) : error === "ERROR" ? (
-            <span>Email inválido</span>
+            <span>{t("backofficePage.usersComponent.emailIncorrect")}</span>
           ) : showAlert === true && requestStatus==='200' ? (
             <div className="flex items-center justify-items-center">
               <img src={checkIcon} className="w-6" alt="OK" />
-              <p className="ml-2 font-bold normal-case"> Email enviado </p>
+              <p className="ml-2 font-bold normal-case"> {t("backofficePage.usersComponent.emailSendIt")} </p>
             </div>
           ) : showAlert === true && requestStatus!=='200' ? (
             <div className="flex items-center justify-items-center">
               <img src={errorIcon} className="w-6" alt="Error" />
-              <p className="ml-2 font-bold normal-case"> Email no enviado </p>
+              <p className="ml-2 font-bold normal-case"> {t("backofficePage.usersComponent.emailNotSendIt")} </p>
             </div>) :
           (
             <span className="loading loading-spinner"></span>

src/components/Collaborators.tsx

@@ -1,11 +1,13 @@
 import { useState } from "react";
 import Card from "./CollaboratorsCard";
 import CollaboratorsModal from "./CollaboratorsModal";
+import { useTranslation } from "react-i18next";
 
 function Collaborators() {
+  const [t] = useTranslation();
   const [active, setActive] = useState("AngularCard");
   // Aconsejo quitarlo, debajo está el resultado solo con el useState de arriba const [selectedItem, setSelectedItem] = useState(1);
-  const VT = "Ver Todos >";
+  const VT = t("landingPage.collaboratorsComponent.buttonViewAll");
   const btnActive =
     " px-6 lg:mb-0 mb-5 ml-2 btn btn-ghost text-sm normal-case rounded-3xl bg-pink-it text-white  ";
   const btnInactive =
@@ -15,7 +17,7 @@ function Collaborators() {
     <section className="mt-14 mb-10">
       <div className="flex justify-center">
         <p className="font-bold text-4xl my-5">
-          Colaboradores de proyectos
+          {t("landingPage.collaboratorsComponent.title")}
         </p>
       </div>
       <div className="flex  justify-center  my-5  w-11/12 m-auto  ">

src/components/FooterComponent.tsx

@@ -1,7 +1,11 @@
 //import NormativaModal from "../../pages/landingPage/Modals/NormativaModal";
 import ImgLogoFooter from '../assets/img/ITA_Logo.png'
-const Footer = () => (
-  <footer className="bg-pink-it w-screen absolute left-0 mt-5 ">
+import { useTranslation } from "react-i18next";
+
+const Footer = () => {
+  const [t] = useTranslation();
+  return (
+    <footer className="bg-pink-it w-screen absolute left-0 mt-5 ">
     <div className="mx-auto w-full py-6 text-white text-sm">
       <div>
         <div className="flex justify-center items-center">
@@ -16,25 +20,25 @@ const Footer = () => (
             className="link link-hover mx-5 text-white hover:text-white"
             href="https://www.barcelonactiva.cat/es/inicio"
           >
-            Barcelona Activa
+            {t("landingPage.footer.institution")}
           </a>
           <a
             className="link link-hover mx-5 text-white hover:text-white"
             href="https://www.barcelonactiva.cat/es/itacademy"
           >
-            IT Academy
+            {t("landingPage.footer.academy")}
           </a>
           <a
             className="link link-hover mx-5 text-white hover:text-white"
             href=""
           >
-            ¿Cómo colaborar?
+            {t("landingPage.footer.buttonCollaborate")}
           </a>
           <label
             htmlFor="NormativaModal"
             className="mx-5 text-white hover:text-purple-600 hover:cursor-pointer hover:underline"
           >
-            Normativa
+            {t("landingPage.footer.normative")}
           </label>
           {/*<NormativaModal />*/}
         </div>
@@ -43,24 +47,25 @@ const Footer = () => (
             className="link link-hover mx-5 text-white hover:text-white"
             href=""
           >
-            Términos
+            {t("landingPage.footer.terms")}
           </a>
           <a
             className="link link-hover mx-5 text-white hover:text-white"
             href=""
           >
-            Privacidad
+            {t("landingPage.footer.privacity")}
           </a>
           <a
             className="link link-hover mx-5 text-white hover:text-white"
             href=""
           >
-            Cookies
+            {t("landingPage.footer.cookies")}
           </a>
         </div>
       </div>
     </div>
   </footer>
-);
+  )
+}
 
-export default Footer;
+export default Footer

src/components/HeaderComponent.tsx

@@ -8,17 +8,28 @@ import menu from "../assets/img/menu.png";
 import LoginComponent from "./LoginComponent";
 import RegisterComponent from "./Registercomponent";
 import PasswordReminderComponent from "./PasswordReminderComponent";
+import { useTranslation } from "react-i18next";
 
 const Header = () => {
+  const [t, i18n] = useTranslation();
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false);
   const [IsDropdownEnterButton, setIsDropdownEnterButton] =
     useState<boolean>(false);
   const [isDropdownCuenta, setisDropdownCuenta] = useState<boolean>(false);
   const [isPasswordReminder, setIsPasswordReminder] = useState<boolean>(false);
+  const [languageSelected, setLanguageSelected] = useState('catala');
+
+  const handleChangeLanguageOfTheWebsite = (lang:string):void => {
+    setLanguageSelected(lang)
+    i18n.changeLanguage(lang)
+  }
 
   const toggleDropdown = (): void => {
     setIsDropdownOpen(!isDropdownOpen);
   };
+
+  console.log(i18n.language)
+
   return (
     <header className="w-full z-10 absolute flex  justify-between  ">
       {/* Logo */}
@@ -36,7 +47,7 @@ const Header = () => {
             onClick={toggleDropdown}
           >
             <div className="flex  items-center justify-between text-sm text-neutral font-bold text-gray-700 capitalize ">
-              <span>Castellano</span>
+              <span>{t(`landingPage.languagesSwitcher.${languageSelected}`)}</span>
               <div>
                 <svg
                   viewBox="0 0 20 20"
@@ -58,10 +69,10 @@ const Header = () => {
                 isDropdownOpen ? "" : "hidden"
               }`}
             >
-              <li className="flex items-center px-4 py-2 hover:bg-gray-100 hover:rounded-xl flex-row">
+              <li className="flex items-center px-4 py-2 hover:bg-gray-100 hover:rounded-xl flex-row" onClick={() => handleChangeLanguageOfTheWebsite('catala')}>
                 <div className="text-left flex-grow">
                   <div className="rounded-full h-53 w-53 flex items-left text-gray-700 font-bold text-sm capitalize whitespace-nowrap">
-                    Català
+                    {t('landingPage.languagesSwitcher.catala')}
                   </div>
                 </div>
                 <img
@@ -70,10 +81,10 @@ const Header = () => {
                   className="h-53 w-53 scale-90 ml-4 flex-none"
                 />
               </li>
-              <li className="flex items-center px-4 py-2 hover:bg-gray-200 border-t border-gray-400 flex-row">
+              <li className="flex items-center px-4 py-2 hover:bg-gray-200 border-t border-gray-400 flex-row" onClick={() => handleChangeLanguageOfTheWebsite('espanol')}>
                 <div className="text-left flex-grow">
                   <div className="rounded-full h-53 w-53 flex items-left text-gray-700 font-bold text-sm capitalize whitespace-nowrap">
-                    Castellano
+                   {t('landingPage.languagesSwitcher.espanol')}
                   </div>
                 </div>
                 <img
@@ -82,10 +93,10 @@ const Header = () => {
                   className="h-53 w-53 scale-90 ml-4 flex-none"
                 />
               </li>
-              <li className=" hover:rounded-b-xl flex items-center px-4 py-2 hover:bg-gray-200 border-t-2 border-gray-400 flex-row">
+              <li className=" hover:rounded-b-xl flex items-center px-4 py-2 hover:bg-gray-200 border-t-2 border-gray-400 flex-row" onClick={() => handleChangeLanguageOfTheWebsite('english')}>
                 <div className="text-left flex-grow">
                   <div className="rounded-full h-53 w-53 flex items-left text-gray-700 font-bold text-sm capitalize whitespace-nowrap">
-                    English
+                    {t('landingPage.languagesSwitcher.english')}
                   </div>
                 </div>
                 <img
@@ -109,7 +120,7 @@ const Header = () => {
             <div>
               <img src={selector} className="h-5 w-5 mr-2" />
             </div>
-            <span className="  font-bold capitalize  text-sm">Entrar</span>
+            <span className="  font-bold capitalize  text-sm">{t('landingPage.loginModal.login')}</span>
           </button>
         </div>
 
@@ -184,8 +195,7 @@ const Header = () => {
                   />
                   <div className="text-left flex-grow ml-2 text-gray-600 text-2xl text-[#7E7E7E]">
                     <h3 className=" hover:border-b-4 hover:border-blue-800">
-                      {" "}
-                      Castellano{" "}
+                      Castellano
                     </h3>
                   </div>
                 </li>
@@ -197,7 +207,6 @@ const Header = () => {
                   />
                   <div className="text-left flex-grow ml-2 text-gray-600 text-2xl text-[#7E7E7E]">
                     <h3 className=" hover:border-b-4 hover:border-blue-800">
-                      {" "}
                       English
                     </h3>
                   </div>

src/components/LoginComponent.tsx

@@ -12,12 +12,15 @@ import {
   ApiPostRegisterState,
   FormDataEvent,
 } from "../interfaces/interfaces";
+import { useTranslation } from "react-i18next";
+
 
 export default function LoginComponent({
   setIsDropdownEnterButton,
   setisDropdownCuenta,
   setIsPasswordReminder,
 }: ChildComponentProps) {
+  const [t] = useTranslation();
   const navegador = useNavigate();
   const dispatch = useDispatch();
 
@@ -43,20 +46,20 @@ export default function LoginComponent({
             />
           </div>
           <div className="flex flex-col  justify-evenly h-80 px-5 py-0  ">
-            <h1 className="text-start">Login</h1>
+            <h1 className="text-start">{t('landingPage.loginModal.login')}</h1>
             <form onSubmit={submitInformation}>
               <input
                 type="text"
                 name="dni"
                 className="input input-bordered w-full max-w-xs"
-                placeholder="DNI o NIE"
+                placeholder={t('landingPage.loginModal.dniInput')}
               />
 
               <input
                 type="password"
                 name="password"
                 className="input input-bordered w-full max-w-xs mt-4"
-                placeholder="Contraseña"
+                placeholder={t('landingPage.loginModal.passwordInput')}
               />
 
               <a className="text-xs text-end">
@@ -74,7 +77,7 @@ export default function LoginComponent({
                     setIsPasswordReminder(true);
                   }}
                 >
-                  Recordar/Cambiar contraseña
+                  {t('landingPage.loginModal.changePassword')}
                 </span>
               </a>
 
@@ -88,7 +91,7 @@ export default function LoginComponent({
                 ) : (
                   <span className="loading loading-spinner loading-md"></span>
                 )}
-                {!isLoadingMessageError && <p>Login</p>}
+                {!isLoadingMessageError && <p>{t('landingPage.loginModal.login')}</p>}
               </button>
             </form>
             <a className="text-xs mt-5 ">
@@ -99,7 +102,7 @@ export default function LoginComponent({
                 }}
                 className="border-b-2 border-black"
               >
-                ¿No tienes ninguna cuenta?, crear una
+                {t('landingPage.loginModal.registerMessage')}
               </span>
             </a>
           </div>