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

…-in-side-bar

67 add italian translation to items in side bar

android/app/src/main/java/org/fuzue/seasonfood/MainActivity.java

@@ -0,0 +1,5 @@
+package org.fuzue.seasonfood;
+
+import com.getcapacitor.BridgeActivity;
+
+public class MainActivity extends BridgeActivity {}

public/locales/en/translation.json

@@ -12,6 +12,9 @@
   "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",
   "backButton": "back",
   "month_0": "January",
   "month_1": "February",

public/locales/it/translation.json

@@ -12,6 +12,9 @@
   "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",
   "backButton": "indietro",
   "month_0":  "Gennaio",
   "month_1": "Febbraio",

src/components/HeaderBar.tsx

@@ -1,16 +1,16 @@
 import type { FoodList, FoodObject } from "../types/food";
-import Fuse from 'fuse.js'
-import { useRef, useEffect } from "react"
+import Fuse from "fuse.js";
+import { useRef, useEffect } from "react";
 import i18next from "i18next";
 import { useTranslation } from "react-i18next";
 import { Menu, Search } from "@mui/icons-material";
 import {
   AppBar,
   styled,
-  alpha,
   Toolbar,
   IconButton,
-  InputBase
+  InputBase,
+  Box,
 } from "@mui/material";
 
 type Props = {
@@ -45,17 +45,23 @@ export default function HeaderBar(props: Props) {
     const options = {
       threshold: 0.3,
       keys: [
-        { name: 'name-en', getFn: (food: FoodObject) => food.description[0].name },
-        { name: 'name-it', getFn: (food: FoodObject) => food.description[1].name }
-      ]
-    }
+        {
+          name: "name-en",
+          getFn: (food: FoodObject) => food.description[0].name,
+        },
+        {
+          name: "name-it",
+          getFn: (food: FoodObject) => food.description[1].name,
+        },
+      ],
+    };
 
-    const fuse = new Fuse(food, options)
-    const searchText = query.current.value.trim().toLowerCase()
-    const searchLanguage: { [lang: string]: string } = {}
-    searchLanguage["name-" + i18next.language] = searchText
+    const fuse = new Fuse(food, options);
+    const searchText = query.current.value.trim().toLowerCase();
+    const searchLanguage: { [lang: string]: string } = {};
+    searchLanguage["name-" + i18next.language] = searchText;
 
-    return fuse.search(searchLanguage).map((i) => i.item)
+    return fuse.search(searchLanguage).map((i) => i.item);
   };
 
   function leftButton() {
@@ -72,20 +78,6 @@ export default function HeaderBar(props: Props) {
     );
   }
 
-  const SearchBar = styled("div")(({ theme }) => ({
-    position: "relative",
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: alpha(theme.palette.common.white, 0.15),
-    "&:hover": {
-      backgroundColor: alpha(theme.palette.common.white, 0.25),
-    },
-    "&:focus": {
-      backgroundColor: alpha(theme.palette.common.white, 0.25),
-    },
-    marginLeft: "auto",
-    width: "auto",
-  }));
-
   const SearchIconWrapper = styled("div")(() => ({
     height: "100%",
     aspectRatio: 1,
@@ -114,7 +106,12 @@ export default function HeaderBar(props: Props) {
     <AppBar position="static" sx={{ mb: 1, backgroundColor: "primary.dark" }}>
       <Toolbar>
         {leftButton()}
-        <SearchBar>
+        <Box
+          position="relative"
+          marginLeft="auto"
+          borderRadius=".5rem"
+          bgcolor="rgba(255,255,255,.1)"
+        >
           <SearchIconWrapper>
             <IconButton
               sx={{ m: 0 }}
@@ -128,15 +125,15 @@ export default function HeaderBar(props: Props) {
           </SearchIconWrapper>
           <form onSubmit={(e) => handleSubmit(e)}>
             <StyledInputBase
+              key="searchInput"
               placeholder={t("Header_searchBar")}
               inputProps={{ "aria-label": "search" }}
               inputRef={query}
               id="search-bar"
             />
           </form>
-        </SearchBar>
+        </Box>
       </Toolbar>
     </AppBar>
   );
 }
-

src/components/Item.tsx

@@ -35,7 +35,7 @@ function Item(props: FoodObject) {
               top={0}
               fontSize="max(1rem, min(4.5vw, 3rem))"
               fontWeight={400}
-              sx={{ p: "0.25em", transform: "translateY(-20%)" }}
+              sx={{ p: "0.25em", transform: "translateY(-20%)", overflow: "hidden", textOverflow: "ellipsis" }}
             >
               {t(props.description[0].name)}
             </Typography>

src/components/RenderFoods.tsx

@@ -14,9 +14,9 @@ interface RenderFoodProps {
 //render the grid of foods
 const RenderFoods:FunctionComponent<RenderFoodProps> = (props:RenderFoodProps) => {
   const foodList = props.foodList
-  const foodItems = foodList.map((item ) => {
+  const foodItems = foodList.map((item, key) => {
     return (
-      <Item {...item} />
+      <Item key={key} {...item} />
     );
   });
   return (

src/components/SearchResult.tsx

@@ -41,6 +41,7 @@ function SearchResult(props: Props) {
       maxWidth="md"
       open={ifSearched}
       onClose={closeModal}
+      onClick={closeModal}
       aria-labelledby="search results"
       aria-describedby="the results of your search are shown here"
       TransitionComponent={Transition}
@@ -51,7 +52,6 @@ function SearchResult(props: Props) {
           sx={{ml: "auto" }}
           edge="start"
           color="inherit"
-          onClick={closeModal}
           aria-label="close"
         >
           <Close />

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>

src/routes/FoodPage.tsx

@@ -31,7 +31,7 @@ export default function FoodPage() {
     if (selectedFood && selectedFood.season[i] === true) {
       seasonMonths.push(months[i]);
       seasonStatus = "FoodPage_notInSeasonText";
-      if (seasonMonths.includes(months[currentMonth])) {
+      if (seasonMonths.includes(months[currentMonth - 1])) {
         seasonStatus = "FoodPage_inSeasonText";
       }
     }