Localisation Support,Resolved #10, 5 Different Languages Supported(hi,fr,ru,en,es

Author: raghavyuva

ReadMe.md

@@ -41,6 +41,8 @@ Some features may be lacking as it is a beta version but the bundled features ar
 - A Better Card View and a Table View
 - Rich Text Editing Experience to send a mail
 - General Settings to configure app specs
+- Available in 5 Different Languages (Localisation)
+- Download or Export Mails as CSV file
 
 # Built With
 

package.json

@@ -33,6 +33,7 @@
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",
     "react-google-login": "^5.2.2",
+    "react-i18next": "^11.16.7",
     "react-icons": "^4.3.1",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.1.1",

src/renderer/components/ListMail/ListMail.jsx

@@ -112,13 +112,10 @@ function ListMail({
                     subject={data && data?.sender[0]?.name}
                     time={istoDay(data)}
                     isstarred={CheckFlag(data, "flagged")}
-                    setisAnyMailOpen={setisAnyMailOpen}
-                    setopenedmail={setopenedmail}
                     messageId={data.messageId}
                     mailObject={data}
                     read={CheckFlag(data, "seen")}
                     key={index.toString()}
-                    read={CheckFlag(data, "seen")}
                     CheckForSelectedDiv={(val, id) => {
                       try {
                         CheckForSelectedDiv(

src/renderer/components/ListMail/ListTopIcons.jsx

@@ -8,6 +8,7 @@ import {
 } from "react-icons/md";
 import { Link, useLocation } from "react-router-dom";
 import PaginationComp from "./PaginationComp";
+import { useTranslation } from 'react-i18next';
 
 function ListTopIcons({
   Refresh,
@@ -19,7 +20,10 @@ function ListTopIcons({
   setGridView,
   message,
 }) {
+
   const location = useLocation();
+  const { t } = useTranslation();
+
   return (
     <div className="flex flex-col text-text ">
       <div className="  flex  mt-4 items-center justify-evenly">
@@ -28,28 +32,28 @@ function ListTopIcons({
             size={30}
             className="ml-1 mr-2 cursor-pointer "
             onClick={Refresh}
-            title="Refresh"
+            title={t("Refresh")}
           />
           {GridView == 2 && (
             <MdViewList
               className="mr-2 cursor-pointer "
               size={30}
               onClick={() => setGridView(0)}
-              title="List View"
+              title={t("ListView")}
             />
           )}
           {GridView == 0 && (
             <MdGridView
               className="mr-2 cursor-pointer "
               size={30}
               onClick={() => setGridView(1)}
-              title="Grid View"
+              title={t("GridView")}
             />
           )}
           {GridView == 1 && (
             <MdViewCompact
               className="mr-2 cursor-pointer "
-              title="Default View"
+              title={t("DefaultView")}
               size={30}
               onClick={() => setGridView(2)}
             />
@@ -64,15 +68,15 @@ function ListTopIcons({
               }}
             >
               <MdTableView
-                title="table view"
+                title={t("TableView")}
                 className="mr-2 cursor-pointer "
                 size={30}
               />
             </Link>
           }
         </div>
         <span className="font-mono font-semibold  mr-2">
-          {Data?.length} Fetched Messages
+          {Data?.length} {t("FetchedMessages")}
         </span>
         <div className="hidden lg:flex">
           <PaginationComp

src/renderer/components/Loading/Loading.jsx

@@ -1,15 +1,17 @@
 import React from "react";
 import TitleBar from "~/components/TopBar/WindowBar";
+import { useTranslation } from 'react-i18next';
 
 function Loading({ icon }) {
+  const { t } = useTranslation()
   return (
     <div className="bg-LoadingBackground  text-LoadingText">
       <>
         <TitleBar icon={icon} />
         <div className="flex flex-col justify-center items-center      h-[calc(100vh_-_2rem)]">
           <div className="flex flex-col items-center ">
             <h1 className="text-3xl font-bold capitalize  leading-loose mr-4  ">
-              hang on while luca is setting up mail for you
+              {t("loadingtag")}
             </h1>
             <img
               src="https://camo.githubusercontent.com/09b4eefc1e15caef9a2e732fba9d4a5c4baf1a57c8a1ea21bcb3b639a3c5457d/68747470733a2f2f696d6775722e636f6d2f74637258454b4b2e706e67"

src/renderer/components/Promotional/Banner.jsx

@@ -1,24 +1,24 @@
 import React from "react";
-import { constant } from "./constant";
 import bannerimg from "../../../main/helpers/assets/promote.svg";
+import { useTranslation } from 'react-i18next';
+
 function Banner({ composeopen, setcomposeopen }) {
-  const { title, tagline, description, PromotebtnText } = constant.Banner[0];
+  const { t } = useTranslation();
   return (
     <aside className="relative overflow-hidden bg-BannerCardBackground text-BannerCardText rounded-xl lg:flex max-w-screen-xl px-4 shadow-2xl mx-auto ">
       <div className="w-full p-12 text-center lg:w-1/2 sm:p-16 lg:p-24 lg:text-left">
         <div className="max-w-xl mx-auto lg:ml-0">
-          <p className="text-sm text-BannerCardTitle font-medium">{title}</p>
-
-          <p className="mt-2 text-2xl font-bold  sm:text-3xl">{tagline}</p>
+          <p className="text-sm text-BannerCardTitle font-medium">{t("title")}</p>
 
-          <p className="hidden lg:mt-4 lg:block">{description}</p>
+          <p className="mt-2 text-2xl font-bold  sm:text-3xl">{t("tagline")}</p>
 
+          <p className="hidden lg:mt-4 lg:block">{t("description")}</p>
           <button
             href=""
             onClick={() => setcomposeopen(!composeopen)}
             className="inline-block px-5 py-3 mt-8 text-sm font-medium  bg-BannerCardButtonBackground rounded-tl-2xl rounded-br-2xl text-BannerCardButtonText shadow-lg "
           >
-            {PromotebtnText}
+            {t("PromotebtnText")}
           </button>
         </div>
       </div>

src/renderer/components/Promotional/Stats.jsx

@@ -1,38 +1,41 @@
 import React from "react";
-import { constant } from "./constant";
+import { useTranslation } from 'react-i18next';
+
 function Stats({ uname, Data, UnreadCount, StarredCount }) {
+  const { t } = useTranslation();
+
   return (
     <div>
       <section className="text-StatCardText ">
         <div className="max-w-screen-xl px-0 py-16 mx-auto  ">
           <div className="max-w-xl ">
             <h2 className="text-2xl font-bold text-white sm:text-3xl">
-              {constant?.stats[0].title},{uname?.split("@")[0]}
+              {t("stattitle")},{uname?.split("@")[0]}
             </h2>
-            <p className="mt-4 sm:text-xl">{constant?.stats[0].tagline}</p>
+            <p className="mt-4 sm:text-xl">{t("stattagline")}</p>
           </div>
           <ul className="grid grid-cols-1 gap-8 mt-8 sm:grid-cols-2 lg:grid-cols-3">
             <li className="p-8 shadow-xl rounded-xl bg-StatCardBackground">
               <p className="text-3xl font-extrabold">{Data?.length}</p>
               <p className="mt-1 text-xl font-medium">
                 {" "}
-                {constant?.stats[0].stat1}
+                {t("stat1")}
               </p>
             </li>
 
             <li className="p-8 shadow-xl rounded-xl bg-StatCardBackground">
               <p className="text-3xl font-extrabold">{UnreadCount}</p>
               <p className="mt-1 text-xl font-medium">
                 {" "}
-                {constant?.stats[0].stat2}
+                {t("stat2")}
               </p>
             </li>
 
             <li className="p-8 shadow-xl rounded-xl bg-StatCardBackground">
               <p className="text-3xl font-extrabold">{StarredCount}</p>
               <p className="mt-1 text-xl font-medium">
                 {" "}
-                {constant?.stats[0].stat3}
+                {t("stat3")}
               </p>
             </li>
           </ul>

src/renderer/components/Settings/LanguageSelect.jsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import { MdArrowDropDown, MdCheck } from "react-icons/md";
+
+const LanguageSelect = ({ toggle, settoggle, selected, onClickHandler, Data }) => {
+    const [changedval, setchangedval] = useState(selected);
+
+    useEffect(() => {
+        setchangedval(selected);
+    }, [selected]);
+
+    return (
+        <div className="relative inline-block text-left ">
+            <div>
+                <button
+                    onClick={() => settoggle(!toggle)}
+                    type="button"
+                    className="inline-flex justify-center w-full  text-BannerCardButtonText bg-BannerCardButtonBackground rounded-tl-2xl rounded-br-2xl  shadow-lg px-4 py-2  text-sm   font-bold "
+                    id="menu-button"
+                    aria-expanded="true"
+                    aria-haspopup="true"
+                >
+                    {selected}
+                    <MdArrowDropDown className="-mr-1 ml-2 h-5 w-5" />
+                </button>
+            </div>
+            {toggle && (
+                <div
+                    className="origin-top-right absolute right-0 mt-2  px-5   text-text rounded-md shadow-lg bg-MailCardBackground ring-opacity-5  "
+                    role="menu"
+                    aria-orientation="vertical"
+                    aria-labelledby="menu-button"
+                    tabindex="-1"
+                >
+                    {Data?.map((val) => {
+                        return (
+                            <div
+                                className="flex items-center cursor-pointer my-2 "
+                                role="none"
+                            >
+                                {changedval != val.code ? (
+                                    <div className=" p-1 h-2 w-2  rounded-full" />
+                                ) : (
+                                    <MdCheck size={18} />
+                                )}
+                                <div
+                                    onClick={() => onClickHandler(val.code)}
+                                    className="text-text block px-4 py-2 text-sm no-underline p-2"
+                                >
+                                    {val.label}
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default LanguageSelect;

src/renderer/components/Settings/Settings.jsx

@@ -9,6 +9,9 @@ import Button from "../Basic/Button";
 import InputField from "../Login/InputField";
 import GeneralSettings from "./GeneralSettings";
 import ThemeSettings from "./ThemeSettings";
+import { useTranslation } from 'react-i18next';
+import { LanguagesSupported } from "../../i18n/config";
+import LanguageSelect from "./LanguageSelect";
 const fs = require("fs");
 
 function Settings({ params }) {
@@ -21,6 +24,8 @@ function Settings({ params }) {
   const [activelabel, setactivelabel] = useState(
     SettingTypes["TabHeaders"][0].label
   );
+  const [selected, setselected] = useState("English");
+  const [toggle, settoggle] = useState(false);
   const [CustomThemeFile, setCustomThemeFile] = useState();
   function OnApplyChanges() {
     if (fetchlimit && fetchlimit > 0) {
@@ -35,7 +40,12 @@ function Settings({ params }) {
       StoreSettings();
     }
   }
-  
+
+  const { i18n } = useTranslation();
+
+  function changeLanguage(e) {
+    i18n.changeLanguage(e);
+  }
 
   function StoreSettings(flimit) {
     localStorage.setItem("Settings", JSON.stringify(Checked));
@@ -51,9 +61,8 @@ function Settings({ params }) {
         {SettingTypes?.TabHeaders?.map((e) => (
           <button
             onClick={() => setactivelabel(e.label)}
-            className={` p-4 text-SettingsCardTitle -mb-px border-b border-b-SideBarBackground ${
-              activelabel == e.label && "border-b-primary"
-            } `}
+            className={` p-4 text-SettingsCardTitle -mb-px border-b border-b-SideBarBackground ${activelabel == e.label && "border-b-primary"
+              } `}
             title={e.label}
           >
             <div class="flex items-center justify-center">{e.label}</div>
@@ -81,14 +90,25 @@ function Settings({ params }) {
                       }}
                       Data={e}
                     />
+
                   ))}
-                  <div className="mt-4">
+                  <div className="mt-4 mb-4">
                     <InputField
                       placeholder="Enter Number of Mails to fetch at once"
                       value={fetchlimit}
                       updatedValue={setfetchlimit}
                     />
                   </div>
+                  <div className="flex items-end justify-items-end  text-SettingsCardText justify-between">
+                    Select your preferred language
+                    <LanguageSelect
+                      Data={LanguagesSupported}
+                      selected={selected}
+                      settoggle={settoggle}
+                      toggle={toggle}
+                      onClickHandler={(val) => changeLanguage(val)}
+                    />
+                  </div>
                   <Button handler={OnApplyChanges} btntext="save changes" />
                 </>
               )}

src/renderer/components/Settings/ThemeSettings.jsx

@@ -6,6 +6,7 @@ import ThemeSelect from "./ThemeSelect";
 import useComponentVisible from "~/utils/TouchBehaviour";
 import { applyTheme } from "../../themes/themeutil";
 import Button from "../Basic/Button";
+import { useTranslation } from 'react-i18next';
 import { WriteFile, readFile, DeleteFile } from "../../lib/fileAction";
 const path = require("path");
 const fs = require("fs");
@@ -17,6 +18,7 @@ const ThemeSettings = ({ CustomThemeFile, setCustomThemeFile, user }) => {
   const [Data, setData] = useState();
   const [Themes, setThemes] = useState();
   let themepath = path.join(user?.auth?.user, "conf", "theme");
+  const { t } = useTranslation()
 
   async function CheckThemes() {
     let themeObject = await ParseContent(themepath);
@@ -102,10 +104,9 @@ const ThemeSettings = ({ CustomThemeFile, setCustomThemeFile, user }) => {
     <div ref={ref} className="">
       <div className="flex mt-4 justify-between  pb-2 border-b border-b-SideBarBackground">
         <div className="flex flex-col">
-          <span className="text-md ">Upload custom Theme</span>
+          <span className="text-md ">{t("customtheme")}</span>
           <span className="text-xs opacity-75">
-            you can upload your custom json theme file,you can find default
-            theme json file in github repo
+            {t("uploadtheme")}
           </span>
         </div>
         <div>
@@ -128,11 +129,12 @@ const ThemeSettings = ({ CustomThemeFile, setCustomThemeFile, user }) => {
       </div>
       <div className="flex mt-4 justify-between  pb-2 border-b border-b-SideBarBackground">
         <div className="flex flex-col">
-          <span className="text-md ">Select Preferred Theme</span>
+          <span className="text-md ">{t("preferredtheme")}</span>
           <span className="text-xs opacity-75">
             {Themes && Object.keys(Themes?.ListOfThemes)?.length > 0
-              ? "you have uploaded a custom theme file choose from one of them "
-              : "choose from default themes available,you can upload custom theme if you dont like these themes"}
+              ? `${t("customselect")}`
+              : `${t("defaultselect")}`
+            }
           </span>
         </div>
         <div>
@@ -148,10 +150,9 @@ const ThemeSettings = ({ CustomThemeFile, setCustomThemeFile, user }) => {
       {Themes && Object.keys(Themes?.ListOfThemes)?.length > 0 && (
         <div className="flex mt-4 justify-between  pb-2 border-b border-b-SideBarBackground">
           <div className="flex flex-col">
-            <span className="text-md ">Delete Custom Theme File</span>
+            <span className="text-md ">{t("deletetheme")}</span>
             <span className="text-xs opacity-75">
-              you can choose themes from default files by removing custom theme
-              file
+              {t("defaultchoose")}
             </span>
           </div>
           <div>
@@ -163,7 +164,7 @@ const ThemeSettings = ({ CustomThemeFile, setCustomThemeFile, user }) => {
           </div>
         </div>
       )}
-      <Button handler={ApplyThemeConf} btntext="apply theme settings" />
+      <Button handler={ApplyThemeConf} btntext={t("applytheme")} />
     </div>
   );
 };