diff --git a/src/components/timetable/TimetableGrid.tsx b/src/components/timetable/TimetableGrid.tsx index 4bc9461..f9c22c1 100644 --- a/src/components/timetable/TimetableGrid.tsx +++ b/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 = ({ ); 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 = ({ const MobileView = () => ( <> - - - - - + + ); @@ -83,7 +86,6 @@ const TimetableGrid: React.FC = ({ { + const [tabIndex, setTabIndex] = useRecoilState(tabWeekDay); + const { t } = useTranslation(); + + const handleTabChange = (value: number) => setTabIndex(value); + + return ( + + handleTabChange(value)} + variant="scrollable" + scrollButtons + allowScrollButtonsMobile + aria-label="timetable week day select" + indicatorColor="secondary" + centered + > + + + + + + + + ); +}; + +export default TimetableMobileBottomTabs; diff --git a/src/components/timetable/TimetableMobileView.tsx b/src/components/timetable/TimetableMobileView.tsx index 8e0228c..795a29f 100644 --- a/src/components/timetable/TimetableMobileView.tsx +++ b/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 = ({ 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 ( - <> - - - {day} - - - - ); - }; - return ( - {RenderCardWithDay()} {timetable.map((item, index) => { if (item.dayOfWeek !== week) return null; diff --git a/src/states.ts b/src/states.ts index 5fa4f95..6aae8ad 100644 --- a/src/states.ts +++ b/src/states.ts @@ -35,6 +35,11 @@ export const actualSchoolId = atom({ default: undefined, }); +export const tabWeekDay = atom({ + key: "tabWeekDay", + default: 0, +}); + export const menuOpen = atom({ key: "menuOpen", default: false,