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 | 1x 7x 7x 7x 14x 7x 7x 7x 9x 5x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | import { Box } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import PinnedTable from "@/utils/components/tables/pinned-table/PinnedTable";
import { getHeroSoftToolbarSx, getHeroSoftSearchFieldSx } from "@/utils/components/tables/heroTableStyles";
import { MRT_GlobalFilterTextField } from "material-react-table";
import { useDispatch, useSelector } from "react-redux";
import { useEffect, useMemo } from "react";
import { _fetchSpecificClassByCode } from "@/store/slices/student/StudentSpecificClass";
import { useParams } from "react-router-dom";
const ClassRoster = () => {
const theme = useTheme();
const dispatch = useDispatch();
const { classCode } = useParams();
const { specificClassData, isLoading } = useSelector((state) => state.StudentSpecificClass);
const getAllEnrolledStudents = (students = []) => {
const arr = [];
students.forEach((student) => {
if (student.status === "Enrolled") {
arr.push({
_id: student._id,
lastName: student.last_name,
firstName: student.first_name,
middleName: student.middle_name,
email: student.email,
});
}
});
return arr;
};
const columns = [
{ accessorKey: "firstName", header: "First name" },
{ accessorKey: "middleName", header: "Middle name" },
{ accessorKey: "lastName", header: "Last name" },
{ accessorKey: "email", header: "Email" },
];
const topToolbar = ({ table }) => (
<Box sx={{ ...getHeroSoftToolbarSx(theme), alignItems: "center" }}>
<MRT_GlobalFilterTextField table={table} sx={getHeroSoftSearchFieldSx(theme)} placeholder="Search roster" />
</Box>
);
useEffect(() => {
Eif (classCode) {
dispatch(_fetchSpecificClassByCode(classCode));
}
}, [classCode, dispatch]);
// ✅ Memoize the processed data
const enrolledStudents = useMemo(() => {
return getAllEnrolledStudents(specificClassData?.students || []);
}, [specificClassData]);
return (
<Box sx={{ width: "100%", minHeight: 420, display: "flex", flexDirection: "column" }}>
<Box sx={{ flex: 1, minHeight: 360, display: "flex", flexDirection: "column" }}>
<PinnedTable
tableId="student-class-roster"
variant="soft"
columns={columns}
data={enrolledStudents}
topToolbar={topToolbar}
pinnedColumn={false}
isLoading={isLoading}
enableStickyHeader
muiTableContainerProps={{ sx: { minHeight: 260 } }}
/>
</Box>
</Box>
);
};
export default ClassRoster;
|