Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | import React, { useEffect } from "react";
import TabsComponent from "@/utils/components/TabsComponent";
import AssignmentsTable from "@/app/student-page/page/assignments/AssignmentsPage";
import ClassDetails from "@/app/student-page/page/class-details/ClassDetails";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { useNavigate, useParams } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { _fetchSpecificClassByCode } from "@/store/slices/student/StudentSpecificClass";
import getCurrentSemesterYear from "@/utils/helpers/getCurrentSemesterYear";
import BasicBreadcrumbs from "@/utils/components/breadcrumbs/basic-breadcrumbs/BasicBreadcrumbs";
import ClassRoster from "@/app/student-page/page/class-roster/ClassRoster";
import MyGrade from "@/app/student-page/page/my-grade/MyGrade";
const tabContents = [
{
label: "Assignments",
component: (
<Box sx={{ mt: 5, mb: 10 }}>
<AssignmentsTable />
</Box>
),
},
{
label: "Class Details",
component: (
<Box sx={{ mt: 5, mb: 10 }}>
<ClassDetails />
</Box>
),
},
{
label: "Class Roster",
component: (
<Box sx={{ mt: 5, mb: 10 }}>
<ClassRoster />
</Box>
),
},
{
label: "My Grade",
component: (
<Box sx={{ mt: 5, mb: 10 }}>
<MyGrade />
</Box>
),
},
];
const Main = () => {
const { specificClassData } = useSelector((state) => state.StudentSpecificClass);
const { currentYear } = getCurrentSemesterYear();
const { classCode } = useParams(); //params
const dispatch = useDispatch();
const navigate = useNavigate();
const breadcrumb = [
{
name: "Classes",
isLink: true,
path: "/student/classes",
},
{
name: specificClassData?.title,
isLink: false,
},
];
useEffect(() => {
if (!specificClassData) {
dispatch(_fetchSpecificClassByCode(classCode)).then((response) => {
// Modified by Allan Ninal — on a rejected action `payload` is the error
// body, so `payload.data.Class` threw a TypeError inside this .then()
// and the student was left on a class page with no class rather than
// being sent back.
if (!_fetchSpecificClassByCode.fulfilled.match(response) || !response.payload?.data?.Class) {
navigate(-1);
}
});
}
}, []);
return (
<React.Fragment>
<AppBar position="relative" color="primary">
{specificClassData && (
<Toolbar sx={{ display: "flex", justifyContent: "space-between" }}>
{/* <Typography variant="h6">2023-Fall: MATH-2BUXIjMh-MathWorld Test</Typography> */}
<Typography variant="h6">
{`${currentYear}-${specificClassData.semester}: ${specificClassData.title} (${specificClassData.section})`}
</Typography>
<Typography variant="h6">Class code: {specificClassData.class_code}</Typography>
</Toolbar>
)}
</AppBar>
<BasicBreadcrumbs links={breadcrumb} />
<Box sx={{ padding: "2%" }}>
<TabsComponent tabContents={tabContents} />
</Box>
</React.Fragment>
);
};
export default Main;
|