feat(MonthBar): add month and return bar

fuzue · Aug 17, 2023 · 4c5849b · 4c5849b
1 parent b7638a8
commit 4c5849b
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 49 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="/:id/:selectedMonthNum"
+                path="/:id"
                 element={<FoodPage key="foodpage"/>}
               />
               <Route

diff --git a/src/components/Item.tsx b/src/components/Item.tsx
@@ -1,6 +1,6 @@
 import type { FoodObject } from "../types/food";
 
-import { Link, useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Box, Stack, Typography, styled } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
@@ -17,12 +17,11 @@ const ImgBox = styled(Stack)(({ theme }) => ({
 function Item(props: FoodObject) {
   const { t } = useTranslation();
   const image = props.image.toLowerCase();
-  const { selectedMonthNum } = useParams();
   return (
     <Box
       sx={{ flexGrow: 1, width: "100%", maxWidth: "30%", minWidth: 90 }}
     >
-      <Link to={`/${props.description[0].slug}/${selectedMonthNum}`}>
+      <Link to={`/${props.description[0].slug}`}>
         <ImgBox>
           <Box position="relative" flexGrow={1}>
             <img

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/Layout.tsx b/src/routes/Layout.tsx
@@ -12,13 +12,11 @@ import {
   Drawer,
   ThemeProvider,
   Stack,
-  Typography,
   styled,
   alpha,
 } from "@mui/material";
 import SideBarDialog from "../components/SideBarDialog";
-import { ArrowLeft, ArrowRight } from "@mui/icons-material";
-import { t } from "i18next";
+import MonthBar from "../components/MonthBar";
 
 //BASIC MUI COLORS AND BREAKPOINTS
 const theme = createTheme({
@@ -52,8 +50,6 @@ const theme = createTheme({
 });
 
 function Layout({ food }: { food: FoodList }) {
-  const { selectedMonthNum } = useParams();
-  const monthNum = Number(selectedMonthNum) - 1;
 
   //search bar code
   const [ifSearched, setIfSearched] = useState(false);
@@ -81,26 +77,6 @@ function Layout({ food }: { food: FoodList }) {
     setDialogType(itemClickedName);
   };
 
-    //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 (
     <ThemeProvider theme={theme}>
       <Drawer open={state} onClick={toggleDrawer}>
@@ -113,26 +89,7 @@ function Layout({ food }: { food: FoodList }) {
           food={food}
           ifSearched={ifSearched}
         />
-        <ShadowBox
-          direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-          bgcolor="secondary.main"
-          color="primary.light"
-          boxShadow="0 2px 4px #332323"
-        >
-          <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>
-        </ShadowBox>
+        <MonthBar />
         {ifSearched ? (
           <SearchResult
             searchResults={searchResults}