Merge branch 'main' into fix-multiple-languages-search

LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2023, SeasonalFood
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -16,4 +16,15 @@ Just go to https://fuzue.github.io/seasonfood/ ans this will redirect you to the
 1. npm i
 2. npm run build
 
+## Build Android app
+
+First you do need to have Android SDK and Anbdroid Studio installed. After that you can open the project in Android Studio with:
+
+1. npm run build-app
+2. ANDROID_SDK=the-path-top-android-sdk CAPACITOR_ANDROID_STUDIO_PATH=the-path-to-android-studio/bin/studio.sh npm run run-app-android
+
+# Data sources
+
+Source of data for fruits and vegetables from [Slow Food Italy Guide](https://www.slowfood.it/wp-content/uploads/blu_facebook_uploads/2014/09/ita_guida_consumo_b.pdf)
+
 

src/components/HeaderBar.tsx

@@ -6,24 +6,24 @@ import {
   alpha,
   Toolbar,
   IconButton,
-  Typography,
-  InputBase
-}  from "@mui/material";
-import MenuIcon from '@mui/icons-material/Menu';
-import SearchIcon from '@mui/icons-material/Search';
-import Fuse from 'fuse.js'
+  InputBase,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import SearchIcon from "@mui/icons-material/Search";
 import { useTranslation } from "react-i18next";
-import { useRef, useEffect } from "react";
+import { ArrowBackIosNew } from "@mui/icons-material";
+import Fuse from 'fuse.js'
+import { useNavigate, useLocation } from "react-router-dom";
 
 type Props = {
-  ifSearched: boolean
-  food: FoodList
-  onSearch: (query: string, food: FoodList) => void
-  toggleDrawer: () => void
-}
+  ifSearched: boolean;
+  food: FoodList;
+  onSearch: (query: string, food: FoodList) => void;
+  toggleDrawer: () => void;
+};
 
 export default function HeaderBar(props: Props) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
   const query = useRef() as React.MutableRefObject<HTMLFormElement>;
 
   useEffect(() => {
@@ -67,12 +67,8 @@ export default function HeaderBar(props: Props) {
     "&:hover": {
       backgroundColor: alpha(theme.palette.common.white, 0.25),
     },
-    marginLeft: 0,
-    width: "8em",
-    [theme.breakpoints.up("sm")]: {
-      marginLeft: theme.spacing(1),
-      width: "auto",
-    },
+    marginLeft: 'auto',
+    width: "auto"
   }));
 
   const SearchIconWrapper = styled("div")(({ theme }) => ({
@@ -91,6 +87,7 @@ export default function HeaderBar(props: Props) {
       padding: theme.spacing(1, 1, 1, 0),
       // vertical padding + font size from searchIcon
       paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+      transition: theme.transitions.create('width'),
       width: "100%",
       [theme.breakpoints.up("sm")]: {
         width: "12ch",
@@ -107,26 +104,40 @@ export default function HeaderBar(props: Props) {
     marginTop: "0",
   }));
 
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  function leftButton() {
+    if(location.pathname.split("/")[1] === "foodpage") {
+      return (
+        <IconButton
+        size="large"
+        edge="start"
+        color="inherit"
+        aria-label="open drawer"
+        onClick={() => navigate(-1)}
+      >
+        <ArrowBackIosNew />
+      </IconButton>
+      )
+    }
+    return (
+      <IconButton
+        size="large"
+        edge="start"
+        color="inherit"
+        aria-label="open drawer"
+        onClick={props.toggleDrawer}
+      >
+        <MenuIcon />
+      </IconButton>
+    )
+  }
+
   return (
     <StyledAppBar position="static">
-      <Toolbar sx={{ height: "62px" }}>
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="open drawer"
-          onClick={props.toggleDrawer}
-        >
-          <MenuIcon />
-        </IconButton>
-        <Typography
-          variant="h6"
-          noWrap
-          component="div"
-          sx={{ flexGrow: 1, textAlign: "left" }}
-        >
-          {t("Header_appTitle")}
-        </Typography>
+      <Toolbar>
+        {leftButton()}
         <Search>
           <SearchIconWrapper>
             <IconButton
@@ -139,17 +150,16 @@ export default function HeaderBar(props: Props) {
               <SearchIcon type="submit" />
             </IconButton>
           </SearchIconWrapper>
-          <form onSubmit={e => handleSubmit(e)}>
+          <form onSubmit={(e) => handleSubmit(e)}>
             <StyledInputBase
-              placeholder={t('Header_searchBar')}
+              placeholder={t("Header_searchBar")}
               inputProps={{ "aria-label": "search" }}
               inputRef={query}
               id="search-bar"
             />
           </form>
         </Search>
       </Toolbar>
-
     </StyledAppBar>
   );
 }

src/main.css

@@ -43,7 +43,6 @@ img {
 a {
   color: inherit;
   text-decoration: none;
-
 }
 
 .button-wrapper {

src/routes/FoodPage.tsx

@@ -1,7 +1,7 @@
 import { currentMonth } from "../utils/utils";
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { useEffect } from "react";
-import { Box, Typography, Button, Grid } from "@mui/material";
+import { Box, Typography, Grid } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { FoodDBContext } from "../contexts/FoodDB"
@@ -37,7 +37,6 @@ export default function FoodPage() {
     }
   }
 
-  const backBtn = useNavigate();
   const image = selectedFood ? selectedFood.image.toLowerCase() : '';
 
   const monthColor = (month: string) => {
@@ -55,13 +54,6 @@ export default function FoodPage() {
       }
     }
   };
-  const BackButton = styled(Button)(() => ({
-    width: "5em",
-    margin: "0",
-    position: "absolute",
-    left: "80%",
-    top: "14%",
-  }));
 
   const GridBox = styled(Box)(() => ({
     width: '6em',
@@ -104,10 +96,6 @@ export default function FoodPage() {
       marginX={1}
       justifyContent="space-between"
       alignItems="center">
-      <BackButton
-        variant="outlined"
-        onClick={() => backBtn(-1)}>{t('backButton')}
-      </BackButton>
       <Box
         display='flex'
         justifyContent='center'