apps/frontend/src/routes/_assessmentLayout/assessment/index.lazy.tsx

@@ -64,6 +64,14 @@ interface ToggleFlagResponse {
   };
 }
 
+export interface SubmitOptionResponse {
+  message: string;
+  answer: {
+      id: string;
+      isFlagged: boolean | null;
+  };
+}
+
 export default function AssessmentPage() {
   const [page, setPage] = useState(1);
   const limit = 10;
@@ -275,32 +283,44 @@ export default function AssessmentPage() {
 
   // Mutation function to toggle flag
   const { mutate: toggleFlag } = useMutation({
-    mutationFn: (questionId: string) => toggleFlagAnswer(questionId),
-    onSuccess: (response) => {
-      if (response && response.answer) {
-        const { answer } = response;
-        setFlaggedQuestions((prevFlags) => ({
-          ...prevFlags,
-          [answer.id]: answer.isFlagged !== null ? answer.isFlagged : false,
-        }));
-      }
+    mutationFn: (formData: { assessmentId: string; questionId: string; isFlagged: boolean }) =>
+        toggleFlagAnswer(formData),
+    onSuccess: (response: SubmitOptionResponse) => {
+        if (response.answer) {
+            const { answer } = response;
+            setFlaggedQuestions((prevFlags) => ({
+                ...prevFlags,
+                [answer.id]: answer.isFlagged ?? false,
+            }));
+        }
     },
     onError: (error) => {
-      console.error("Error toggling flag:", error);
+        console.error("Error toggling flag:", error);
     },
   });
 
   // Fungsi untuk toggle flag
   const handleToggleFlag = (questionId: string) => {
     const newFlagState = !flaggedQuestions[questionId];
+    const assessmentId = getQueryParam("id");
 
-    // Update flaggedQuestions dan kirim ke server
+    if (!assessmentId) {
+        console.error("Assessment ID tidak ditemukan");
+        return;
+    }
+
+    // Update flaggedQuestions di state
     setFlaggedQuestions((prevFlags) => ({
-      ...prevFlags,
-      [questionId]: newFlagState,
+        ...prevFlags,
+        [questionId]: newFlagState,
     }));
 
-    toggleFlag(questionId);
+    // Kirim perubahan flag ke server
+    toggleFlag({
+        assessmentId,
+        questionId,
+        isFlagged: newFlagState,
+    });
   };
 
   // Usage of the mutation in your component