Merge branch 'main' into 56-make-it-clear-that-it-is-italy-only-for-now

fuzue · Aug 22, 2023 · d6d327e · d6d327e
2 parents bbdae1a + 6bb683e
commit d6d327e
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 90 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,11 @@
 ## About the app
-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.
+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, we couldn't find anything intuitive or capable of meeting my needs.
 
 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.
 
-## First Release (August 2023)
+The project is written in React/Typescript, using [MUI](https://mui.com/) library for the UI. The Android app is built using [Capacitor](https://capacitorjs.com/).
 
+## First Release (August 2023)
 This first release has dat for **Italy only** 🇮🇹. Also in this initial release we have a web version and an Android app, available in English and Italian. 
 
 ## Roadmap
@@ -14,7 +15,7 @@ This first release has dat for **Italy only** 🇮🇹. Also in this initial rel
 * 📊 Create new ways of visualizing the food in season information, with full year diagrams.
 * 🍇 🍉 🍑 🥝 🍒 Make it possible to select a group of fruits and vegetables and see all of them in a calendar.
 * 🔍 Add synonyms or variant names. Some fruits and vegetables have more than one name, depending of the country's region.
-*🛢Create a public dataset with all the information that we are gathering.
+* 🛢Create a public dataset with all the information that we are gathering.
 * 🍎 Release IOS version.
 * Write it in [Svelte](https://svelte.dev/)!
 
@@ -25,7 +26,6 @@ Source of data for fruits and vegetables from [Slow Food Italy](https://www.slow
 
 ![season-fruit](assets/print-1.jpg)
 
-The project is written in React/Typescript using [MUI](https://mui.com/) library for the UI. The Android app is built using [Capacitor](https://capacitorjs.com/).
 
 # How to use
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -28,7 +28,7 @@ export default function App() {
                 element={<Navigate to={`/month/${currentMonth}`} replace />}
               />
               <Route
-                path="/foodpage/:id"
+                path="/:id"
                 element={<FoodPage key="foodpage"/>}
               />
               <Route

diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
@@ -1,10 +1,9 @@
 import type { FoodList, FoodObject } from "../types/food";
 import Fuse from 'fuse.js'
 import { useRef, useEffect } from "react"
-import { useNavigate, useLocation } from "react-router-dom";
 import i18next from "i18next";
 import { useTranslation } from "react-i18next";
-import { ArrowBackIosNew, Menu, Search } from "@mui/icons-material";
+import { Menu, Search } from "@mui/icons-material";
 import {
   AppBar,
   styled,
@@ -61,23 +60,7 @@ export default function HeaderBar(props: Props) {
     return fuse.search(searchLanguage).map((i) => i.item)
   };
 
-  const navigate = useNavigate();
-  const location = useLocation();
-
   function leftButton() {
-    if (location.pathname.split("/")[1] === "foodpage") {
-      return (
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="return"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowBackIosNew />
-        </IconButton>
-      );
-    }
     return (
       <IconButton
         size="large"

diff --git a/src/components/Item.tsx b/src/components/Item.tsx
@@ -11,8 +11,7 @@ const ImgBox = styled(Stack)(({ theme }) => ({
   boxShadow: "3px 4px 8px #888888",
   overflow: "clip",
   color: theme.palette.primary.light,
-  backgroundColor: theme.palette.primary.main, 
-
+  backgroundColor: theme.palette.primary.main,
 }));
 
 function Item(props: FoodObject) {
@@ -22,7 +21,7 @@ function Item(props: FoodObject) {
     <Box
       sx={{ flexGrow: 1, width: "100%", maxWidth: "30%", minWidth: 90 }}
     >
-      <Link to={`/foodpage/${props.description[0].slug}`}>
+      <Link to={`/${props.description[0].slug}`}>
         <ImgBox>
           <Box position="relative" flexGrow={1}>
             <img
@@ -33,7 +32,6 @@ function Item(props: FoodObject) {
           </Box>
           <Box position="relative" height="20%" sx={{ textAlign: 'center'}}>
             <Typography
-
               top={0}
               fontSize="max(1rem, min(4.5vw, 3rem))"
               fontWeight={400}

diff --git a/src/components/MonthBar.tsx b/src/components/MonthBar.tsx
@@ -0,0 +1,66 @@
+import { ArrowLeft, ArrowRight } from "@mui/icons-material";
+import { Stack, Typography, alpha, styled } from "@mui/material";
+import { t } from "i18next";
+import { Fragment } from "react";
+import { Link, useParams } from "react-router-dom";
+
+const MonthBar = () => {
+  const { selectedMonthNum } = useParams();
+  const monthNum = Number(selectedMonthNum) - 1;
+
+  //variables to change month when pressing the arrows
+  const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
+  const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
+
+  //styled MUI arrows
+  const ArrowButton = styled(Link)(({ theme }) => ({
+    color: alpha(theme.palette.primary.light, 0.75),
+    "&:hover": {
+      color: alpha(theme.palette.primary.light, 0.95),
+    },
+    display: "flex",
+    alignItems: "center",
+    margin: theme.spacing(1),
+    width: "auto",
+  }));
+
+  const ShadowBox = styled(Stack)(({ theme }) => ({
+    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
+  }));
+
+  return (
+    <ShadowBox
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      bgcolor="secondary.main"
+      color="primary.light"
+      boxShadow="0 2px 4px #332323"
+    >
+      {selectedMonthNum ? (
+        <Fragment>
+          <ArrowButton to={`/month/${prevMonth + 1}`}>
+            <ArrowLeft />
+          </ArrowButton>
+          <Link to={`/month/${selectedMonthNum}`}>
+            <Typography variant="h6" display="flex" alignItems="center">
+              {t(`month_${monthNum}`)}
+            </Typography>
+          </Link>
+          <ArrowButton to={`/month/${nextMonth + 1}`}>
+            <ArrowRight />
+          </ArrowButton>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <ArrowButton to={`/`}>
+            <ArrowLeft />
+            <Typography>Return to current month</Typography>
+          </ArrowButton>
+        </Fragment>
+      )}
+    </ShadowBox>
+  );
+};
+
+export default MonthBar;
diff --git a/src/components/SearchResult.tsx b/src/components/SearchResult.tsx
@@ -13,6 +13,7 @@ import { TransitionProps } from "@mui/material/transitions";
 import { Close } from "@mui/icons-material";
 
 type Props = {
+  currentSearch: string;
   searchResults: FoodList;
   ifSearched: boolean;
   closeModal: () => void;
@@ -28,7 +29,7 @@ const Transition = forwardRef(function Transition(
 });
 
 function SearchResult(props: Props) {
-  const { searchResults, ifSearched, closeModal } = props;
+  const { currentSearch, searchResults, ifSearched, closeModal } = props;
 
   const foodItems = searchResults.map((item, key) => {
     return <Item key={key} {...item} />;
@@ -44,9 +45,10 @@ function SearchResult(props: Props) {
       aria-describedby="the results of your search are shown here"
       TransitionComponent={Transition}
     >
-      <Stack direction="row">
+      <Stack direction="row" alignItems="center" p={2}>
+        <Typography variant="h5" component="div">Search: {currentSearch}</Typography>
         <IconButton
-          sx={{ m: 2, ml: "auto" }}
+          sx={{ml: "auto" }}
           edge="start"
           color="inherit"
           onClick={closeModal}

diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
@@ -1,21 +1,17 @@
 import type { FoodList, FoodCategory, FoodObject } from "../types/food";
 import React from "react";
 import { useState, useEffect } from "react";
-import { useParams, Link, useNavigate } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { FoodDBContext } from "../contexts/FoodDB";
 import RenderFoods from "../components/RenderFoods";
 import {
   Box,
   Tab,
   Tabs,
-  styled,
-  alpha,
   Chip,
-  Typography,
   Stack,
 } from "@mui/material";
-import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 
 export default function FoodOfTheMonth() {
   const [food, _] = React.useContext(FoodDBContext);
@@ -55,50 +51,13 @@ export default function FoodOfTheMonth() {
     setFoodType(newFoodCategory);
   };
 
-  //variables to change month when pressing the arrows
-  const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
-  const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
-
-  //styled MUI arrows
-  const ArrowButton = styled(Link)(({ theme }) => ({
-    color: alpha(theme.palette.primary.light, 0.75),
-    "&:hover": {
-      color: alpha(theme.palette.primary.light, 0.95),
-    },
-    display: "flex",
-    alignItems: "center",
-    margin: theme.spacing(1),
-    width: "auto",
-  }));
-
-  const ShadowBox = styled(Stack)(({ theme }) => ({
-    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
-  }));
-
   return (
     <Stack height="100%">
-      <ShadowBox
-        direction="row"
-        justifyContent="space-between"
-        bgcolor="secondary.main"
-        color="primary.light"
-        boxShadow="0 2px 4px #332323"
-      >
-        <ArrowButton to={`/month/${prevMonth + 1}`}>
-          <ArrowLeft />
-        </ArrowButton>
-        <Typography variant="h6" display="flex" alignItems="center">
-          {t(`month_${monthNum}`)}
-        </Typography>
-        <ArrowButton to={`/month/${nextMonth + 1}`}>
-          <ArrowRight />
-        </ArrowButton>
-      </ShadowBox>
       <Tabs
         value={foodType}
         onChange={(_, value) => handleChange(value)}
         variant="fullWidth"
-        sx={{ fontWeight: 700, mt: 1 }}
+        sx={{ fontWeight: 700 }}
         aria-label="tabs for the selection of fruits, vegetables or others"
       >
         <Tab

diff --git a/src/routes/FoodPage.tsx b/src/routes/FoodPage.tsx
@@ -55,16 +55,14 @@ export default function FoodPage() {
     }
   };
 
-  const GridBox = styled(Box)(({ theme }) => ({
-    width: 80,
-    padding: 10,
-    aspectRatio: 2,
+  const GridBox = styled(Link)(({ theme }) => ({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    fontFamily: "Sans",
+    flexGrow: 1,
+    padding: 2,
+    width: '25%',
     [theme.breakpoints.up('md')]: {
-      width: 200,
       fontSize: '1.125rem',
       fontWeight: '400'
     },
@@ -83,23 +81,22 @@ export default function FoodPage() {
     return months.map((month) => {
       let userNumber = Number(month) + 1;
       return (
-          <Link to={`/month/${userNumber}`}>
-            <GridBox sx={{ ...monthColor(month), m: 1 }}>
-              <div >{t(`month_${month}`)}</div>
-            </GridBox>
-          </Link>
+        <GridBox key={month} sx={{ ...monthColor(month), m: 1 }} to={`/month/${userNumber}`}>
+          <Typography>{t(`month_${month}`)}</Typography>
+        </GridBox>
       );
     });
   };
 
   return (
     <Stack
-      justifyContent="space-between"
       width="100%"
+      height="100%"
       overflow="auto"
+      my={1.5}
     >
       <Stack direction="row" width="100%">
-        <ImgBox>
+        <ImgBox borderRadius={1}>
           <img
             className="food-image"
             src={`../images/${image}.png`}
@@ -126,12 +123,10 @@ export default function FoodPage() {
             color={seasonStatus === "FoodPage_inSeasonText" ? "secondary.main" : "primary.main"}>
             {t(seasonStatus)}
           </Typography>
-
         </Stack>
       </Stack>
       <Typography
         variant="h5"
-        textAlign="center"
         mt={3}
         sx={{ fontWeight: 700 }}
         color="secondary.dark"

diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
@@ -11,9 +11,10 @@ import {
   Box,
   Drawer,
   ThemeProvider,
-  Stack,
-} from "@mui/material";
+  Stack
+  } from "@mui/material";
 import SideBarDialog from "../components/SideBarDialog";
+import MonthBar from "../components/MonthBar";
 
 //BASIC MUI COLORS AND BREAKPOINTS
 const theme = createTheme({
@@ -47,13 +48,16 @@ const theme = createTheme({
 });
 
 function Layout({ food }: { food: FoodList }) {
+
   //search bar code
+  const [currentSearch, setCurrentSearch] = useState('');
   const [ifSearched, setIfSearched] = useState(false);
   const [searchResults, setSearchResults] = useState([] as FoodList);
   const closeModal = () => setIfSearched(false);
 
   const onSearch = (query: string, food: FoodList) => {
     if (query != "") {
+      setCurrentSearch(query)
       setIfSearched(true);
       setSearchResults(food);
     }
@@ -85,8 +89,10 @@ function Layout({ food }: { food: FoodList }) {
           food={food}
           ifSearched={ifSearched}
         />
+        <MonthBar />
         {ifSearched ? (
           <SearchResult
+            currentSearch={currentSearch}
             searchResults={searchResults}
             ifSearched={ifSearched}
             closeModal={closeModal}