All files / src/app/teacher-page/page/assignments/new-assignment/student-preview StudentPreviewPage.jsx

3.57% Statements 1/28
0% Branches 0/10
0% Functions 0/10
4% Lines 1/25

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 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126                                      2x                                                                                                                                                                                                                    
import React, { useState } from "react";
import QuestionsList from "./layout-1/QuestionsList";
import PaginatedLayout from "./layout-2/Paginated";
import { AppBar, Box, Button, Toolbar, Typography } from "@mui/material";
import PageHeader from "./components/PageHeader";
import AnswerTracker from "./components/AnswerTracker";
import LockdownGuard from "@/utils/components/LockdownGuard";
import { useDispatch, useSelector } from "react-redux";
import YesNoOption from "@/utils/components/dialogs/YesNoOption";
import { enqueueSnackbar } from "notistack";
import SimpleLoading from "@/utils/components/SimpleLoading";
import { _updateViewAsStudent } from "@/store/slices/teacher/TeacherCreateAssignment";
// Modified by Allan Ninal — dropped an unused `_setRemainingTime` import. It was
// never dispatched, which is why the preview's countdown fell through to a
// hardcoded hour; components/Timer.jsx now reads step3.timeAllowed directly, so
// there is nothing left for it to feed. Left in place it only invites re-wiring
// the student's remaining_time into a preview that has no attempt behind it.
import { _updateMyAnswersData } from "@/store/slices/student/StudentQuestionPage";
 
const Main = () => {
    const { teacherData } = useSelector((state) => state.TeacherData);
    const { myAnswers, settings } = useSelector((state) => state.StudentQuestionPage);
    const teacherCreateAssignment = useSelector((state) => state.TeacherCreateAssignment.assignmentData);
    const dispatch = useDispatch();
 
    const [showYesNoOption, setShowYesNoOption] = useState(false);
    const [isLoading, setLoading] = useState(false);
    const [page, setPage] = useState(1);
 
    const handleYesOption = () => {
        dispatch(_updateViewAsStudent(false));
        dispatch(_updateMyAnswersData([]));
    };
 
    const previewTitle = teacherCreateAssignment?.step1?.title?.trim();
    const teacherDisplayName = [teacherData?.first_name, teacherData?.middle_name, teacherData?.last_name]
        .filter((p) => p != null && String(p).trim() !== "")
        .join(" ")
        .trim();
    const headerTitle = previewTitle || teacherDisplayName || "Assignment preview";
 
    const saveAnswers = async () => {
        enqueueSnackbar("Answers successfully saved", { variant: "success" });
    };
 
    const mainDisplay = () => {
        switch (settings.layout) {
            case "1":
                return <QuestionsList page={page} />;
            case "2":
                return <PaginatedLayout page={page} setPage={setPage} />;
            default:
                return <Box>Invalid Template</Box>;
        }
    };
 
    return (
        <React.Fragment>
            <SimpleLoading showLoading={isLoading} />
            <LockdownGuard onCancel={handleYesOption} />
            <YesNoOption
                title="Confirm Back"
                message="Would you like to return to assignment details page?"
                showDialog={showYesNoOption}
                clickNo={() => setShowYesNoOption(false)}
                clickYes={handleYesOption}
            />
            <AppBar position="relative" color="primary">
                <Toolbar sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <Button variant="inherit" onClick={() => setShowYesNoOption(true)}>
                        BACK
                    </Button>
                    <Typography variant="h6">{headerTitle}</Typography>
                    <Button variant="contained" color="success" onClick={saveAnswers}>
                        SAVE
                    </Button>
                </Toolbar>
            </AppBar>
            <PageHeader />
            <Box
                sx={{
                    display: "flex",
                    gap: 2,
                    px: 2,
                    pt: 3,
                    pb: 6,
                    minHeight: "calc(100vh - 180px)",
                    alignItems: "flex-start",
                }}
            >
                <Box
                    sx={{
                        flex: 2,
                        overflowWrap: "break-word",
                        wordBreak: "break-word",
                        whiteSpace: "normal",
                        minWidth: 0,
                    }}
                >
                    {mainDisplay()}
                </Box>
                {myAnswers.isShow && (
                    <Box
                        sx={{
                            flex: "0 0 320px",
                            maxWidth: 320,
                            position: "sticky",
                            top: 80,
                            maxHeight: "calc(100vh - 100px)",
                            overflowY: "auto",
                            "&::-webkit-scrollbar": { width: 6 },
                            "&::-webkit-scrollbar-track": { background: "transparent" },
                            "&::-webkit-scrollbar-thumb": { background: "#c0c8d4", borderRadius: 3 },
                            "&::-webkit-scrollbar-thumb:hover": { background: "#a0a8b4" },
                        }}
                    >
                        <AnswerTracker page={page} setPage={setPage} />
                    </Box>
                )}
            </Box>
        </React.Fragment>
    );
};
 
export default Main;