From d2a0ea97cac88677a8cc17c3c62fc71a1c1b1ae9 Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Fri, 18 Oct 2024 13:42:17 +0700
Subject: [PATCH] update: index lazy for submit validation information

---
 .../assessment/index.lazy.tsx                 | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
index 66d00c6..11c3a74 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
@@ -14,8 +14,8 @@ import {
 } from "@mantine/core";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import {
+  submitValidationMutationOptions,
   submitOptionMutationOptions,
-  getAverageScoreSubAspectQueryOptions,
   getAverageScoreQueryOptions,
   fetchAspects,
   getQuestionsAllQueryOptions,
@@ -59,10 +59,10 @@ export default function AssessmentPage() {
   }>({});
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [modalOpen, setModalOpen] = useState(false);
-  const [selectedAspectId, setSelectedAspectId] = useState<string | null>(null);
   const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
   const [assessmentId, setAssessmentId] = useState<string | null>(null);
   const [answers, setAnswers] = useState<{ [key: string]: string }>({});
+  const [validationInformation, setValidationInformation] = useState<{ [key: string]: string }>({});
 
   // Fetch aspects and sub-aspects
   const aspectsQuery = useQuery({
@@ -192,6 +192,47 @@ export default function AssessmentPage() {
     });
   };
 
+  // Mutation untuk mengirim data ke backend
+  const { mutate: submitValidation } = useMutation(submitValidationMutationOptions());
+
+  // Mengambil data dari localStorage saat komponen dimuat
+  useEffect(() => {
+    const storedValidationInfo = localStorage.getItem(`validationInfo_${assessmentId}`);
+    if (storedValidationInfo) {
+      try {
+        const parsedValidationInfo = JSON.parse(storedValidationInfo);
+        setValidationInformation(parsedValidationInfo);
+      } catch (error) {
+        console.error("Error parsing validation information:", error);
+      }
+    }
+  }, [assessmentId]);
+
+  // Handle perubahan di Textarea
+  const handleTextareaChange = (questionId: string, value: string) => {
+    setValidationInformation((prev) => ({
+      ...prev,
+      [questionId]: value,
+    }));
+  
+    // Update the localStorage with the new validation information as JSON
+    const updatedValidationInformation = {
+      ...validationInformation,
+      [questionId]: value,
+    };
+    localStorage.setItem(`validationInfo_${assessmentId}`, JSON.stringify(updatedValidationInformation));
+  
+    // Ensure assessmentId and questionId are not null before submitting
+    if (assessmentId && questionId) {
+      // Send the validation data to the server
+      submitValidation({
+        assessmentId,               
+        questionId,                 
+        validationInformation: value,
+      });
+    }
+  };
+
   // Drag and Drop handlers
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -429,6 +470,8 @@ export default function AssessmentPage() {
 
                       <Textarea
                         placeholder="Berikan keterangan terkait jawaban di atas"
+                        value={validationInformation[question.questionId] || ""}
+                        onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
                         disabled={!answers[question.questionId]}
                       />