From 79b4530cf8ade78db46b30b4311fb4bb34a9cbe0 Mon Sep 17 00:00:00 2001
From: Daniel Xue <daniel.l.xue@gmail.com>
Date: Wed, 27 Mar 2024 21:10:37 -0400
Subject: [PATCH] implementation of finish question as non-answerer

---
 .../FinishConfirmModal.tsx                    | 34 ++++++++++++++
 .../InstructorQueuePage/QuestionCard.tsx      | 45 ++++++++++++-------
 2 files changed, 64 insertions(+), 15 deletions(-)
 create mode 100644 frontend/components/Course/InstructorQueuePage/FinishConfirmModal.tsx

diff --git a/frontend/components/Course/InstructorQueuePage/FinishConfirmModal.tsx b/frontend/components/Course/InstructorQueuePage/FinishConfirmModal.tsx
new file mode 100644
index 00000000..dcfdd825
--- /dev/null
+++ b/frontend/components/Course/InstructorQueuePage/FinishConfirmModal.tsx
@@ -0,0 +1,34 @@
+import { Button, Modal } from "semantic-ui-react";
+
+interface FinishConfirmModalProps {
+    finishFunc: () => void;
+    closeFunc: () => void;
+    open: boolean;
+}
+
+const FinishConfirmModal = (props: FinishConfirmModalProps) => {
+    const { finishFunc, closeFunc, open } = props;
+
+    return (
+        <Modal open={open}>
+            <Modal.Header>Finish Confirmation</Modal.Header>
+            <Modal.Content>
+                <Modal.Description>
+                    You are about to finish a question that you did not start.
+                    Is this intended?
+                </Modal.Description>
+            </Modal.Content>
+            <Modal.Actions>
+                <Button content="Cancel" onClick={closeFunc} />
+                <Button
+                    content="Finish"
+                    loading={false}
+                    color="green"
+                    onClick={finishFunc}
+                />
+            </Modal.Actions>
+        </Modal>
+    );
+};
+
+export default FinishConfirmModal;
diff --git a/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx b/frontend/components/Course/InstructorQueuePage/QuestionCard.tsx
index cfe3e73e..6561f69f 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);
@@ -58,8 +61,17 @@ const QuestionCard = (props: QuestionCardProps) => {
     };
 
     const onFinish = async () => {
-        setNotifs(lastNotif); // resets notification preference when finished answering question
-        await mutateQuestion(questionId, { status: QuestionStatus.ANSWERED });
+        if (
+            question.respondedToBy!.username === user.username ||
+            finishConfirmModalOpen
+        ) {
+            setNotifs(lastNotif); // resets notification preference when finished answering question
+            await mutateQuestion(questionId, {
+                status: QuestionStatus.ANSWERED,
+            });
+        } else {
+            setFinishConfirmModalOpen(true);
+        }
     };
 
     const onUndo = async () => {
@@ -94,6 +106,11 @@ const QuestionCard = (props: QuestionCardProps) => {
                 closeFunc={() => setMessageModalOpen(false)}
                 mutate={mutateQuestion}
             />
+            <FinishConfirmModal
+                open={finishConfirmModalOpen}
+                finishFunc={onFinish}
+                closeFunc={() => setMessageModalOpen(false)}
+            />
             <Segment attached="top" color="blue" clearing>
                 <div
                     style={{
@@ -239,19 +256,17 @@ const QuestionCard = (props: QuestionCardProps) => {
                                     />
                                 )}
                             {/* if response started, then some user responded */}
-                            {question.timeResponseStarted &&
-                                question.respondedToBy!.username ===
-                                    user.username && (
-                                    <Button
-                                        compact
-                                        size="mini"
-                                        color="green"
-                                        content="Finish"
-                                        disabled={isLoading()}
-                                        onClick={onFinish}
-                                        loading={false}
-                                    />
-                                )}
+                            {question.timeResponseStarted && (
+                                <Button
+                                    compact
+                                    size="mini"
+                                    color="green"
+                                    content="Finish"
+                                    disabled={isLoading()}
+                                    onClick={onFinish}
+                                    loading={false}
+                                />
+                            )}
                             {question.timeResponseStarted &&
                                 question.videoChatUrl && (
                                     <a