Make bottom tab for mobile devices

src/components/timetable/TimetableGrid.tsx

@@ -1,15 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { CircularProgress, Grid, useMediaQuery } from "@mui/material";
 import { getTimetable } from "../../api/api";
-import { useRecoilState, useSetRecoilState } from "recoil";
-import { errorMessage, networkError, timetableData } from "../../states";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import {
+  errorMessage,
+  networkError,
+  tabWeekDay,
+  timetableData,
+} from "../../states";
 import NetworkFailMessage from "../../components/root/NetworkFailMessage";
 import TimetableDesktopView from "./TimetableDesktopView";
 import TimetableHeaders from "./TimetableHeaders";
 import { TimetableItem } from "../../api/models/timetable/timetableItem";
-import { Week } from "../../api/models/timetable/week";
 import TimetableMobileView from "./TimetableMobileView";
 import { MOBILE_QUERY_STRING } from "../../constants";
+import TimetableMobileBottomTabs from "./TimetableMobileBottomTabs";
 
 interface TimetableGridProps {
   schoolId: string;
@@ -28,6 +33,7 @@ const TimetableGrid: React.FC<TimetableGridProps> = ({
   );
   const [maxLesson, setMaxLessons] = useState(0);
   const [netError, setNetworkError] = useRecoilState(networkError);
+  const weekDay = useRecoilValue(tabWeekDay);
   const setErrorMessage = useSetRecoilState(errorMessage);
   const setTimetableData = useSetRecoilState(timetableData);
 
@@ -67,11 +73,8 @@ const TimetableGrid: React.FC<TimetableGridProps> = ({
 
   const MobileView = () => (
     <>
-      <TimetableMobileView timetable={timetableItems!} week={Week.Monday} />
-      <TimetableMobileView timetable={timetableItems!} week={Week.Tuesday} />
-      <TimetableMobileView timetable={timetableItems!} week={Week.Wednesday} />
-      <TimetableMobileView timetable={timetableItems!} week={Week.Thursday} />
-      <TimetableMobileView timetable={timetableItems!} week={Week.Friday} />
+      <TimetableMobileView timetable={timetableItems!} week={weekDay} />
+      <TimetableMobileBottomTabs />
     </>
   );
 
@@ -83,7 +86,6 @@ const TimetableGrid: React.FC<TimetableGridProps> = ({
     <Grid
       sx={{
         display: "flex",
-        minHeight: "80vh",
         minWidth: "auto",
         flexDirection: "row",
         alignContent: "center",

src/components/timetable/TimetableMobileBottomTabs.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Box, Tab, Tabs } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useRecoilState } from "recoil";
+import { tabWeekDay } from "../../states";
+
+const TimetableMobileBottomTabs = () => {
+  const [tabIndex, setTabIndex] = useRecoilState(tabWeekDay);
+  const { t } = useTranslation();
+
+  const handleTabChange = (value: number) => setTabIndex(value);
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: "100%",
+        backgroundColor: "background.paper",
+      }}
+    >
+      <Tabs
+        value={tabIndex}
+        onChange={(event, value) => handleTabChange(value)}
+        variant="scrollable"
+        scrollButtons
+        allowScrollButtonsMobile
+        aria-label="timetable week day select"
+        indicatorColor="secondary"
+        centered
+      >
+        <Tab label={t("monday")}></Tab>
+        <Tab label={t("tuesday")}></Tab>
+        <Tab label={t("wednesday")}></Tab>
+        <Tab label={t("thursday")}></Tab>
+        <Tab label={t("friday")}></Tab>
+      </Tabs>
+    </Box>
+  );
+};
+
+export default TimetableMobileBottomTabs;

src/components/timetable/TimetableMobileView.tsx

@@ -1,6 +1,5 @@
-import React, { ReactElement } from "react";
-import { Card, Grid, Typography } from "@mui/material";
-import { useTranslation } from "react-i18next";
+import React from "react";
+import { Grid } from "@mui/material";
 import { TimetableItem } from "../../api/models/timetable/timetableItem";
 import { Week } from "../../api/models/timetable/week";
 import TimetableCard from "./TimetableCard";
@@ -14,43 +13,8 @@ const TimetableMobileView: React.FC<TimetableMobileViewProps> = ({
   timetable,
   week,
 }) => {
-  const { t } = useTranslation();
-
-  const RenderCardWithDay = (): ReactElement => {
-    let day;
-
-    switch (week) {
-      case Week.Monday:
-        day = t("monday");
-        break;
-      case Week.Tuesday:
-        day = t("tuesday");
-        break;
-      case Week.Wednesday:
-        day = t("wednesday");
-        break;
-      case Week.Thursday:
-        day = t("thursday");
-        break;
-      case Week.Friday:
-        day = t("friday");
-        break;
-    }
-
-    return (
-      <>
-        <Card sx={{ textAlign: "center", padding: 2 }}>
-          <Typography variant="h6" component="div">
-            {day}
-          </Typography>
-        </Card>
-      </>
-    );
-  };
-
   return (
     <Grid item xs={10}>
-      {RenderCardWithDay()}
       {timetable.map((item, index) => {
         if (item.dayOfWeek !== week) return null;
 

src/states.ts

@@ -35,6 +35,11 @@ export const actualSchoolId = atom<string | undefined>({
   default: undefined,
 });
 
+export const tabWeekDay = atom({
+  key: "tabWeekDay",
+  default: 0,
+});
+
 export const menuOpen = atom({
   key: "menuOpen",
   default: false,