Merge pull request #89 from fuzue/67-add-italian-translation-to-items…

…-in-side-bar 67 add italian translation to items in side bar
fuzue · Sep 4, 2023 · 0dec582 · 0dec582
2 parents 445a910 + ed26095
commit 0dec582
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 45 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -12,6 +12,26 @@
   "FoodPage_inSeasonText": "Currently in season",
   "FoodPage_checkMonths": "Check below when it's best to buy it.",
   "FoodPage_monthsInSeason": "Months in season",
+  "SideBarList_aboutApp": "About the app",
+  "SideBarList_contribute": "Contribute",
+  "SideBarList_contact": "Contact us",
+  "SideBarDialog_close": "Close",
+  "AboutDialog_title": "About the app",
+  "AboutDialog_desc1": "This project was developed to address a genuine challenge: determining the availability of fruits and vegetables in a new country or region. Despite searching for solutions and information, I couldn't find anything intuitive or capable of meeting my needs.",
+  "AboutDialog_desc2": "The concept behind this project was to create a simple and scalable solution, making it easy to modify and expand the database for different countries or regions. The primary objective of this app is to promote the consumption of locally grown produce, empower small-scale farmers, and ultimately reduce our contribution to globalwarming.",
+  "AboutDialog_ItalyDisclaimer": "At the moment it is only available for Italian products.",
+  "ContributeDialog_title": "Contribute",
+  "ContributeDialog_desc": "This is an open source project, that means you can clone this repository, write issues, make your own changes and submit your own pull requests.",
+  "AboutDialog_aboutus":"More about us in",
+  "AboutDialog_aboutapp": "More about the app",
+  "ContributeDialog_forthis": "For this, use our",
+  "ContributeDialog_githubPage": "github page.",
+  "ContactDialog_title": "Contact us",
+  "ContactDialog_text1": "Contact us via email, visit",
+  "ContactDialog_text2": "our website,",
+  "ContactDialog_text3": "or check out",
+  "ContactDialog_text4": "our repository in github.",
+  "SelectLang_Text": "Language",
   "backButton": "back",
   "month_0": "January",
   "month_1": "February",

diff --git a/public/locales/it/translation.json b/public/locales/it/translation.json
@@ -12,6 +12,26 @@
   "FoodPage_inSeasonText": "Attualmente è in stagione",
   "FoodPage_checkMonths": "controllate qui sotto quando è meglio acquistarlo.",
   "FoodPage_monthsInSeason": "Mesi di stagione",
+  "SideBarList_aboutApp": "Informazione sull'app",
+  "SideBarList_contribute": "Contribuisci",
+  "SideBarList_contact": "Contattaci",
+  "SideBarDialog_close": "Chiudi",
+  "AboutDialog_title": "Informazione sull'app",
+  "AboutDialog_desc1": "Questo progetto è stato sviluppato per affrontare una sfida reale: determinare la disponibilità di frutta e verdura in un paese o in una regione. Nonostante la ricerca di soluzioni e informazioni, non sono riuscita a trovare nulla di intuitivo o in grado di soddisfare le mie esigenze.", 
+  "AboutDialog_desc2": "L'idea alla base di questo progetto era quella di creare una soluzione semplice e scalabile, che permettesse di modificare ed espandere facilmente il database per diversi Paesi o regioni. L'obiettivo principale di questa applicazione è promuovere il consumo di prodotti coltivati localmente, dare potere ai piccoli agricoltori e, in ultima analisi, ridurre il nostro contributo al riscaldamento globale.",
+  "AboutDialog_ItalyDisclaimer": "Al momento è disponibile solo per i prodotti italiani.",
+  "AboutDialog_aboutus":"Maggiori informazioni su di noi in",
+  "AboutDialog_aboutapp": "Più informazioni sull'applicazione",
+  "ContributeDialog_title": "Contribuisci",
+  "ContributeDialog_desc": "Si tratta di un progetto open source, il che significa che è possibile clonare questo repository, scrivere problemi, apportare le proprie modifiche e inviare le proprie pull request.",
+  "ContributeDialog_forthis": "Per farlo, utilizzare la nostra",
+  "ContributeDialog_githubPage": "pagina github.",
+  "ContactDialog_title": "Contattateci",
+  "ContactDialog_text1": "Contattateci via e-mail, visitate",
+  "ContactDialog_text2": "in nostro sito,",
+  "ContactDialog_text3": "oppure controllate",
+  "ContactDialog_text4": "il nostro archivio in github.",
+  "SelectLang_Text": "Lingua",
   "backButton": "indietro",
   "month_0":  "Gennaio",
   "month_1": "Febbraio",

diff --git a/src/components/AboutDialog.tsx b/src/components/AboutDialog.tsx
@@ -1,33 +1,29 @@
 
-import { DialogTitle, DialogContent, DialogContentText, Typography }
+import { DialogTitle, DialogContent, DialogContentText, Typography, Link }
   from "@mui/material"
+import { useTranslation } from "react-i18next"
 
 //dialog box that opens with each element clicked
 export default function AboutDialog() {
+  const { t } = useTranslation();
   return (
     <>
       <DialogTitle id="about-dialog-title">
-        {"About the app"}
+        {t("AboutDialog_title")}
       </DialogTitle>
       <DialogContent>
-        <DialogContentText id="about-dialog-description">
-          <p>
-          This project was developed to address a genuine challenge:
-          determining the availability of fruits and vegetables in a new
-          country or region. Despite searching for solutions and information, I
-          couldn't find anything intuitive or capable of meeting my needs.
-          </p>
+        <DialogContentText id="about-dialog-description" color="dark-gray">
+          <p>{t("AboutDialog_desc1")}</p>
+          <p>{t("AboutDialog_desc2")}</p>
 
-          <p>
-          The concept behind this project was to create a simple and scalable
-          solution, making it easy to modify and expand the database for
-          different countries or regions. The primary objective of this app is
-          to promote the consumption of locally grown produce, empower
-          small-scale farmers, and ultimately reduce our contribution to global
-          warming.
-          </p>
-          <Typography sx={{fontWeight: 600}}>
-            At the moment it is only available for Italian products.
+
+          <Typography sx={{fontWeight: 600 }}>
+          {t("AboutDialog_ItalyDisclaimer")}
+          </Typography>
+          <Typography sx={{fontWeight: 800, mt: 3}}>
+            {t("AboutDialog_aboutus")} <Link underline="hover" sx={{ color: "inherit"}} href="https://fuzue.tech" target="_blank">fuzue.tech</Link> 
+            <br /> 
+            {t("AboutDialog_aboutapp")} <Link underline="hover" sx={{ color: "inherit"}} href="https://seasonalfood.fuzue.tech/" target="_blank" > here</Link> 
           </Typography>
         </DialogContentText>
       </DialogContent>

diff --git a/src/components/ContactDialog.tsx b/src/components/ContactDialog.tsx
@@ -1,21 +1,31 @@
 
-import { DialogTitle, DialogContent, DialogContentText, Link, Typography }
-  from "@mui/material"
+import { DialogTitle, DialogContent, DialogContentText, Link, Box }
+  from "@mui/material";
+import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import { useTranslation } from "react-i18next";
 
 //dialog box that opens with each element clicked
 export default function ContactDialog() {
+  const { t } = useTranslation();
   return (
     <>
       <DialogTitle id="contact-dialog-title">
-        {"Contact"}
+        {t("ContactDialog_title")}
       </DialogTitle>
       <DialogContent>
-        <DialogContentText id="contact-dialog-description">
-          You can talk to us via email and/or check our repository in github.
-          <p>
-          <Typography variant="subtitle2" gutterBottom><a href="mailto:[email protected]">[email protected]</a></Typography>
-          <Link underline="hover" href="https://github.com/fuzue/seasonalfood" target="_blank"> <Typography variant="subtitle2" gutterBottom>Github</Typography></Link>
-          </p>
+        <DialogContentText id="contact-dialog-description"  color="dark-gray" >
+          {t("ContactDialog_text1")}
+            <Link underline="hover" color="inherit" href="https://seasonalfood.fuzue.tech/" target="_blank"> {t("ContactDialog_text2")}</Link> 
+            &nbsp;{t( "ContactDialog_text3")} <Link underline="hover" color="inherit" href="https://github.com/fuzue/seasonalfood"> {t("ContactDialog_text4")}</Link>
+          <Box sx={{display: 'flex', justifyContent: 'start', mt:2, }}>
+            <AlternateEmailIcon sx={{mr:1}} />
+            <Link underline="hover" color="inherit" href="mailto:[email protected]">[email protected]</Link>
+          </Box>
+          <Box sx={{display: 'flex', justifyContent: 'start', mt:1}}>
+            <GitHubIcon sx={{mr:1}}/>
+            <Link underline="hover" color="inherit" href="https://github.com/fuzue/seasonalfood">GitHub Repo</Link>
+          </Box>
         </DialogContentText>
       </DialogContent>
     </>

diff --git a/src/components/ContributeDialog.tsx b/src/components/ContributeDialog.tsx
@@ -1,21 +1,23 @@
 import { DialogTitle, DialogContent, DialogContentText, Link }
   from "@mui/material";
+import { useTranslation } from "react-i18next";
 
 //dialog box that opens with each element clicked
 export default function ContributeDialog() {
+  const { t } = useTranslation();
   return (
     <>
-      <DialogTitle id="contribute-dialog-title">
-        {"Contribute"}
+      <DialogTitle id="contribute-dialog-title" >
+        {t("ContributeDialog_title")}
       </DialogTitle>
-      <DialogContent>
-        <DialogContentText id="contribute-dialog-description">
-          This is an open source project, that means you can clone this repository, write issues, make your own changes and submit your own pull requests.           
-          <p>For this, use our&nbsp; 
-          <Link underline="hover" href="https://github.com/fuzue/seasonfood" target="_blank">
-            github Page.
-
-          </Link></p>
+      <DialogContent >
+        <DialogContentText id="contribute-dialog-description" color="dark-gray">
+          {t("ContributeDialog_desc")}
+          <p>{t("ContributeDialog_forthis")}&nbsp;
+            <Link underline="hover" href="https://github.com/fuzue/seasonfood" target="_blank">
+              {t("ContributeDialog_githubPage")}
+            </Link>
+          </p>
         </DialogContentText>
       </DialogContent>
     </>

diff --git a/src/components/SelectLang.tsx b/src/components/SelectLang.tsx
@@ -9,7 +9,8 @@ import {
 import { useTranslation } from "react-i18next";
 
 export default function SelectLang() {
-  const { i18n } = useTranslation();
+  const { t, i18n } = useTranslation();
+
 
   const langs = {
     en: { nativeName: "English" },
@@ -18,7 +19,7 @@ export default function SelectLang() {
 
   return (
     <FormControl sx={{ minWidth: "100%" }} size="small">
-      <InputLabel id="demo-select-small-label">Language</InputLabel>
+      <InputLabel id="demo-select-small-label">{t("SelectLang_Text")}</InputLabel>
       <Select
         labelId="demo-select-small-label"
         id="demo-select-small"

diff --git a/src/components/SideBarDialog.tsx b/src/components/SideBarDialog.tsx
@@ -2,6 +2,7 @@ import { Dialog, DialogActions, Button } from "@mui/material";
 import AboutDialog from "./AboutDialog";
 import ContactDialog from "./ContactDialog";
 import ContributeDialog from "./ContributeDialog";
+import { useTranslation } from "react-i18next";
 
 //dialog box that opens with each element clicked
 
@@ -10,6 +11,7 @@ export default function SideBarDialog(props: {
   dialogType: string;
   handleClose: () => void;
 }) {
+  const { t } = useTranslation();
   const renderDialog = (anchor: string) => {
     if (anchor === "about") {
       return <AboutDialog />;
@@ -25,7 +27,7 @@ export default function SideBarDialog(props: {
       {renderDialog(props.dialogType)}
       <DialogActions>
         <Button variant="outlined" onClick={props.handleClose} autoFocus>
-          close
+          {t("SideBarDialog_close")}
         </Button>
       </DialogActions>
     </Dialog>

diff --git a/src/components/SideBarList.tsx b/src/components/SideBarList.tsx
@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import SelectLang from "./SelectLang";
 /* MUI IMPORTS */
 import {
@@ -9,6 +10,8 @@ import {
 } from "@mui/material";
 
 export default function SideBarList(props: any) {
+  const { t } = useTranslation();
+
   return (
     <Stack
       height="100%"
@@ -22,28 +25,28 @@ export default function SideBarList(props: any) {
     >
       <ListItem sx={{ my: 1.5 }}>
         <Typography variant="h6" display="block" gutterBottom sx={{ m: 0 }}>
-          SEASONAL FOOD 🇮🇹
+          SEASON FOOD 🇮🇹
         </Typography>
       </ListItem>
       <Divider />
       <ListItem disablePadding>
         <ListItemButton onClick={() => props.handleClickOpen("about")}>
           <Typography variant="button" display="block" gutterBottom>
-            about the app
+            {t("SideBarList_aboutApp")}
           </Typography>
         </ListItemButton>
       </ListItem>
       <ListItem disablePadding>
         <ListItemButton onClick={() => props.handleClickOpen("contribute")}>
           <Typography variant="button" display="block" gutterBottom>
-            contribute
+            {t("SideBarList_contribute")}
           </Typography>
         </ListItemButton>
       </ListItem>
       <ListItem disablePadding>
         <ListItemButton onClick={() => props.handleClickOpen("contact")}>
           <Typography variant="button" display="block" gutterBottom>
-            contact us
+            {t("SideBarList_contact")}
           </Typography>
         </ListItemButton>
       </ListItem>