Merge pull request #65 from fuzue/59-dont-remove-menu-button-when-cli…

…cking-in-a-fruitvegetable 59 dont remove menu button when clicking in a fruitvegetable
fuzue · Aug 18, 2023 · 920cd89 · 920cd89
2 parents bf01d06 + 38c0b1b
commit 920cd89
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 83 deletions.
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,
@@ -59,23 +58,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/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,6 +48,7 @@ const theme = createTheme({
 });
 
 function Layout({ food }: { food: FoodList }) {
+
   //search bar code
   const [currentSearch, setCurrentSearch] = useState('');
   const [ifSearched, setIfSearched] = useState(false);
@@ -87,6 +89,7 @@ function Layout({ food }: { food: FoodList }) {
           food={food}
           ifSearched={ifSearched}
         />
+        <MonthBar />
         {ifSearched ? (
           <SearchResult
             currentSearch={currentSearch}