diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/QuizResultModal.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/QuizResultModal.tsx new file mode 100644 index 0000000..db9d12a --- /dev/null +++ b/app/routes/_procted+/lectures+/$lectureId+/_layout/QuizResultModal.tsx @@ -0,0 +1,61 @@ +import Modal from "~/components/Modal"; +import styles from "./modal.module.css"; +import formStyles from "~/components/common/form.module.css"; +import TextInput from "~/components/Input/TextInput"; +import { useParams } from "@remix-run/react"; +import { useEffect, useState } from "react"; +import { useAuth } from "~/contexts/AuthContext"; +import { getQuizWithUserId } from "~/API/practice"; + +interface Props { + isOpen: boolean; + onClose: () => void; +} + +const QuizResultModal = ({ isOpen, onClose }: Props) => { + const auth = useAuth(); + const [isLoading, setIsLoading] = useState(true); + const params = useParams(); + const [quizResult, setQuizResult] = useState< + { + gain_score: number | null; + id: number; + max_score: number; + title: string; + }[] + >([]); + useEffect(() => { + async function getData() { + const { data } = await getQuizWithUserId( + params.lectureId!, + auth.userId, + auth.token + ); + setQuizResult(data); + setIsLoading(false); + } + getData(); + }, []); + return isLoading ? null : ( + +
+ {quizResult.map((result, idx) => ( + + ))} + +
+ ); +}; + +export default QuizResultModal; diff --git a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx index 4435886..e50f367 100644 --- a/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx +++ b/app/routes/_procted+/lectures+/$lectureId+/_layout/index.tsx @@ -46,6 +46,7 @@ import { deleteProblem } from "~/API/problem"; import { deleteTestcase } from "~/API/testCase"; import DownloadMyCodesModal from "./DownloadMyCodesModal"; import { LinkElement } from "~/components/Aside/LinkElement"; +import QuizResultModal from "./QuizResultModal"; const LectureDetail = () => { const [isLoading, setIsLoading] = useState(true); const [lectures, setLectures] = useState([]); @@ -244,6 +245,7 @@ const PracticeDetail = ({ const [practiceDetail, setPracticeDetail] = useState(); const [isPracticeEditModalOpen, setIsPracticeEditModalOpen] = useState(false); const [isProblemAddModalOpen, setIsProblemAddModalOpen] = useState(false); + const [isQuizResultModalOpen, setIsQuizResultModalOpen] = useState(false); const [isFoldableOpen, setIsFoldableOpen] = useState(false); const [hasQuiz, setHasQuiz] = useState(false); const { lectureId } = useParams(); @@ -312,6 +314,14 @@ const PracticeDetail = ({ title={problem.title} /> ))} + {auth.role === "student" && hasQuiz ? ( + { + setIsQuizResultModalOpen(true); + }} + /> + ) : null} {auth.role === "professor" ? ( <> ) : null} + {isQuizResultModalOpen ? ( + setIsQuizResultModalOpen(false)} + /> + ) : null} ); };