diff --git a/frontend/components/Course/InstructorQueuePage/FinishConfirmModal.tsx b/frontend/components/Course/InstructorQueuePage/FinishConfirmModal.tsx new file mode 100644 index 00000000..872583e1 --- /dev/null +++ b/frontend/components/Course/InstructorQueuePage/FinishConfirmModal.tsx @@ -0,0 +1,34 @@ +import { Button, Modal } from "semantic-ui-react"; + +interface FinishConfirmModalProps { + onFinish: (forced?: boolean) => void; + onClose: () => void; + open: boolean; +} + +const FinishConfirmModal = (props: FinishConfirmModalProps) => { + const { onFinish, onClose, open } = props; + + return ( + + Finish Confirmation + + + You are about to finish a question that you did not start. + Is this intended? + + + + + onFinish(true)} + /> + + + ); +}; + +export default FinishConfirmModal; diff --git a/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx b/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx index cfe3e73e..39531e68 100644 --- a/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx +++ b/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx @@ -14,6 +14,7 @@ import RejectQuestionModal from "./RejectQuestionModal"; import { AuthUserContext } from "../../../context/auth"; import { Question, QuestionStatus, User } from "../../../types"; import MessageQuestionModal from "./MessageQuestionModal"; +import FinishConfirmModal from "./FinishConfirmModal"; import LinkedText from "../../common/ui/LinkedText"; export const fullName = (user: User) => `${user.firstName} ${user.lastName}`; @@ -24,6 +25,7 @@ interface QuestionCardProps { notifs: boolean; setNotifs: (boolean) => void; } + const QuestionCard = (props: QuestionCardProps) => { const { question, mutate: mutateQuestion, notifs, setNotifs } = props; const { id: questionId, askedBy } = question; @@ -36,6 +38,7 @@ const QuestionCard = (props: QuestionCardProps) => { const [open, setOpen] = useState(false); const [messageModalOpen, setMessageModalOpen] = useState(false); + const [finishConfirmModalOpen, setFinishConfirmModalOpen] = useState(false); // save notification preference for when an instructor answers a question const [lastNotif, setLastNotif] = useState(notifs); @@ -57,9 +60,15 @@ const QuestionCard = (props: QuestionCardProps) => { await mutateQuestion(questionId, { status: QuestionStatus.ACTIVE }); }; - const onFinish = async () => { - setNotifs(lastNotif); // resets notification preference when finished answering question - await mutateQuestion(questionId, { status: QuestionStatus.ANSWERED }); + const onFinish = async (forced?: boolean) => { + if (question.respondedToBy?.username === user.username || forced) { + setNotifs(lastNotif); // resets notification preference when finished answering question + await mutateQuestion(questionId, { + status: QuestionStatus.ANSWERED, + }); + } else { + setFinishConfirmModalOpen(true); + } }; const onUndo = async () => { @@ -94,6 +103,11 @@ const QuestionCard = (props: QuestionCardProps) => { closeFunc={() => setMessageModalOpen(false)} mutate={mutateQuestion} /> + setMessageModalOpen(false)} + /> { /> )} {/* if response started, then some user responded */} - {question.timeResponseStarted && - question.respondedToBy!.username === - user.username && ( - - )} + {question.timeResponseStarted && ( + onFinish()} + loading={false} + /> + )} {question.timeResponseStarted && question.videoChatUrl && ( { url="/api/ws/subscribe/" findOrigin={ process.env.NODE_ENV === "development" - ? () => "ws://localhost:8000" + ? () => "ws://127.0.0.1:8000" : undefined } >