From 521d39f7f66dd339844557923d30f2b64ed1af1e Mon Sep 17 00:00:00 2001
From: abiyasa05 <abiyasap24@gmail.com>
Date: Tue, 22 Oct 2024 08:14:00 +0700
Subject: [PATCH] update: index lazy for upload file on database and local
 storage

---
 .../assessment/index.lazy.tsx                 | 316 ++++++++++++------
 1 file changed, 206 insertions(+), 110 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
index 11c3a74..2efc965 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
@@ -14,6 +14,7 @@ import {
 } from "@mantine/core";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import {
+  uploadFileMutationOptions,
   submitValidationMutationOptions,
   submitOptionMutationOptions,
   getAverageScoreQueryOptions,
@@ -63,6 +64,7 @@ export default function AssessmentPage() {
   const [assessmentId, setAssessmentId] = useState<string | null>(null);
   const [answers, setAnswers] = useState<{ [key: string]: string }>({});
   const [validationInformation, setValidationInformation] = useState<{ [key: string]: string }>({});
+  const [uploadedFiles, setUploadedFiles] = useState<{ [key: string]: File | null }>({});
 
   // Fetch aspects and sub-aspects
   const aspectsQuery = useQuery({
@@ -233,6 +235,9 @@ export default function AssessmentPage() {
     }
   };
 
+  // Mutation for file upload
+  const uploadFileMutation = useMutation(uploadFileMutationOptions());
+
   // Drag and Drop handlers
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -243,12 +248,59 @@ export default function AssessmentPage() {
     setDragActive(false);
   };
 
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+  // Load uploaded files from local storage when the component mounts
+  useEffect(() => {
+    const keys = Object.keys(localStorage);
+    keys.forEach((key) => {
+        if (key.startsWith(`uploadedFile_${assessmentId}_`)) { // Menggunakan assessmentId
+            const fileData = JSON.parse(localStorage.getItem(key) || '{}');
+            const questionId = key.replace(`uploadedFile_${assessmentId}_`, ''); // Ambil questionId dari kunci
+            setUploadedFiles(prev => ({
+                ...prev,
+                [questionId]: new File([fileData], fileData.name, { type: fileData.type }), // Buat objek File baru
+            }));
+        }
+    });
+  }, [assessmentId]);
+
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>, question: { questionId: string }) => {
     event.preventDefault();
     setDragActive(false);
     const droppedFiles = Array.from(event.dataTransfer.files);
-    setFiles((prevFiles) => [...prevFiles, ...droppedFiles]);
-  };
+    if (droppedFiles.length > 0) {
+        const formData = new FormData();
+        formData.append('file', droppedFiles[0]); // Hanya menyertakan file pertama
+
+        // Pastikan assessmentId tidak null sebelum menambahkannya ke FormData
+        if (assessmentId) {
+            formData.append('assessmentId', assessmentId);
+        } else {
+            console.error("assessmentId is null");
+            return; // Atau tangani sesuai kebutuhan
+        }
+
+        // Tambahkan questionId ke FormData
+        if (question.questionId) {
+            formData.append('questionId', question.questionId);
+        } else {
+            console.error("questionId is null");
+            return; // Atau tangani sesuai kebutuhan
+        }
+
+        uploadFileMutation.mutate(formData); // Unggah file
+
+        // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci
+        setUploadedFiles(prev => ({
+            ...prev,
+            [question.questionId]: droppedFiles[0], // Simpan file berdasarkan questionId
+        }));
+        localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({
+            name: droppedFiles[0].name,
+            type: droppedFiles[0].type,
+            lastModified: droppedFiles[0].lastModified,
+        })); // Simpan info file ke local storage
+    }
+  };  
 
   const handleClick = () => {
     if (fileInputRef.current) {
@@ -256,17 +308,51 @@ export default function AssessmentPage() {
     }
   };
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>, question: { questionId: string }) => {
     if (event.target.files) {
-      const fileArray = Array.from(event.target.files); // Ubah ke array hanya jika files tidak null
-      setFiles((prevFiles) => [...prevFiles, ...fileArray]);
-    }
-  };
+        const fileArray = Array.from(event.target.files);
+        if (fileArray.length > 0) {
+            const formData = new FormData();
+            formData.append('file', fileArray[0]); // Hanya menyertakan file pertama
 
-  const handleRemoveFile = (fileIndex: number) => {
-    setFiles((prevFiles) =>
-      prevFiles.filter((_, index) => index !== fileIndex)
-    );
+            // Tambahkan assessmentId ke FormData
+            if (assessmentId) {
+                formData.append('assessmentId', assessmentId);
+            } else {
+                console.error("assessmentId is null");
+                return; // Atau tangani sesuai kebutuhan
+            }
+
+            // Tambahkan questionId ke FormData
+            if (question.questionId) {
+                formData.append('questionId', question.questionId);
+            } else {
+                console.error("questionId is null");
+                return; // Atau tangani sesuai kebutuhan
+            }
+
+            uploadFileMutation.mutate(formData); // Unggah file
+
+            // Simpan file dalam state dan local storage menggunakan questionId dan assessmentId sebagai kunci
+            setUploadedFiles(prev => ({
+                ...prev,
+                [question.questionId]: fileArray[0], // Simpan file berdasarkan questionId
+            }));
+            localStorage.setItem(`uploadedFile_${assessmentId}_${question.questionId}`, JSON.stringify({
+                name: fileArray[0].name,
+                type: fileArray[0].type,
+                lastModified: fileArray[0].lastModified,
+            })); // Simpan info file ke local storage
+        }
+    }
+  };  
+
+  const handleRemoveFile = (question: { questionId: string }) => {
+    setUploadedFiles(prev => ({
+        ...prev,
+        [question.questionId]: null, // Hapus file yang diunggah untuk pertanyaan ini
+    }));
+    localStorage.removeItem(`uploadedFile_${assessmentId}_${question.questionId}`); // Hapus info file dari local storage
   };
 
   // Function to scroll to the specific question
@@ -316,7 +402,7 @@ export default function AssessmentPage() {
   });
 
   return (
-    <Card shadow="sm" p="lg" radius="md" withBorder>
+    <div>
       <Stack gap="md">
         <Flex justify="space-between" align="flex-start" mt="lg">
 
@@ -372,10 +458,10 @@ export default function AssessmentPage() {
           </Flex>
           {/* Pertanyaan */}
           <Stack gap="sm" style={{ flex: 1 }}>
-            <Text className="text-2xl font-bold">
+            <Text className="text-2xl font-bold ml-6">
               Harap menjawab semua pertanyaan yang tersedia
             </Text>
-            <Text className="text-gray-400">Semua jawaban Anda akan ditinjau</Text>
+            <Text className="text-gray-400 ml-6">Semua jawaban Anda akan ditinjau</Text>
             {filteredQuestions.length === 0 ? (
               <Text color="black" className="text-center p-3">
                 Pertanyaan tidak ada untuk sub-aspek yang dipilih.
@@ -386,28 +472,21 @@ export default function AssessmentPage() {
                 if (!questionId) return null;
 
                 return (
-                  <Card
+                  <div
                     key={questionId}
-                    shadow="sm"
-                    p="lg"
-                    radius="md"
-                    withBorder
                     ref={(el) => (questionRefs.current[questionId] = el)}
-                    style={{ position: "relative" }}
+                    className="space-y-4"
                   >
                     <Stack gap="sm">
                       <Flex justify="space-between" align="flex-start" style={{ width: "100%" }}>
-                        <Text
-                          className="font-bold"
-                          style={{
-                            flexGrow: 1,
-                            wordBreak: "break-word",
-                            marginRight: "40px",
-                          }}
-                        >
-                          {startIndex + index + 1}. {question.questionText}
-                        </Text>
+                        <Text className="font-bold mr-3">{startIndex + index + 1}.</Text>
+                        <div className="flex-grow">
+                          <Text className="font-bold break-words">
+                            {question.questionText}
+                          </Text>
+                        </div>
 
+                        {/* Action Icon */}
                         <ActionIcon
                           onClick={() => {
                             setFlaggedQuestions((prevFlags) => ({
@@ -440,92 +519,109 @@ export default function AssessmentPage() {
                         </ActionIcon>
                       </Flex>
 
+                      {/* Opsi Radio Button */}
                       {question.options?.length > 0 ? (
-                        <Radio.Group value={answers[question.questionId] || ""}>
-                          <div className="flex flex-col gap-4">
-                            {question.options.map((option: any) => (
-                              <label
-                                key={option.optionId}
-                                className="bg-gray-200 border rounded-lg p-4 cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center"
-                                onClick={() => document.getElementById(option.optionId)?.click()}
-                              >
-                                <Radio
-                                  id={option.optionId}
-                                  className="font-bold"
-                                  value={option.optionId}
-                                  label={option.optionText}
-                                  size="md"
-                                  radius="xl"
-                                  style={{ pointerEvents: "none" }}
-                                  checked={answers[question.questionId] === option.optionId} // Untuk menampilkan jawaban yang sudah dipilih
-                                  onChange={() => handleAnswerChange(question.questionId, option.optionId)} // Memanggil handleAnswerChange dengan questionId dan optionId
-                                />
-                              </label>
-                            ))}
-                          </div>
-                        </Radio.Group>
+                        <div className="ml-6">
+                          <Radio.Group value={answers[question.questionId] || ""}>
+                            <div className="flex flex-col gap-4">
+                              {question.options.map((option: any) => (
+                                <label
+                                  key={option.optionId}
+                                  className={`cursor-pointer transition-transform transform hover:scale-105 shadow-md hover:shadow-lg flex items-center border rounded-lg p-4 ${
+                                    answers[question.questionId] === option.optionId 
+                                      ? "bg-blue-500 text-white"
+                                      : "bg-gray-200 text-black"
+                                  }`}
+                                  onClick={() => document.getElementById(option.optionId)?.click()}
+                                >
+                                  <Radio
+                                    id={option.optionId}
+                                    className="font-bold"
+                                    value={option.optionId}
+                                    label={option.optionText}
+                                    size="md"
+                                    radius="xl"
+                                    style={{ pointerEvents: "none" }}
+                                    checked={answers[question.questionId] === option.optionId} // Untuk menampilkan jawaban yang sudah dipilih
+                                    onChange={() => handleAnswerChange(question.questionId, option.optionId)} // Memanggil handleAnswerChange dengan questionId dan optionId
+                                  />
+                                </label>
+                              ))}
+                            </div>
+                          </Radio.Group>
+                        </div>
                       ) : (
                         <Text color="red">Tidak ada opsi untuk pertanyaan ini.</Text>
                       )}
 
-                      <Textarea
-                        placeholder="Berikan keterangan terkait jawaban di atas"
-                        value={validationInformation[question.questionId] || ""}
-                        onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
-                        disabled={!answers[question.questionId]}
-                      />
+                      {/* Textarea */}
+                      <div className="ml-6">
+                        <Textarea
+                          placeholder="Berikan keterangan terkait jawaban di atas"
+                          value={validationInformation[question.questionId] || ""}
+                          onChange={(event) => handleTextareaChange(question.questionId, event.currentTarget.value)}
+                          disabled={!answers[question.questionId]}
+                        />
+                      </div>
 
                       {/* File Upload */}
-                      {question.needFile === true && (
-                        <div
-                          className={`pt-5 pb-5 pr-5 pl-2 border-2 border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
-                            } shadow-lg`}
-                          onDragOver={handleDragOver}
-                          onDragLeave={handleDragLeave}
-                          onDrop={handleDrop}
-                          onClick={handleClick}
-                        >
-                          <Flex align="center" justify="space-between" gap="sm">
-                            <TbUpload
-                              size={24}
-                              style={{ marginLeft: "8px", marginRight: "8px" }}
-                            />
-                            <div className="flex-grow text-right">
-                              <Text className="font-bold">
-                                Klik untuk unggah atau geser file disini
-                              </Text>
-                              <Text className="text-sm text-gray-400">
-                                PNG, JPG, PDF
-                              </Text>
-                            </div>
-                          </Flex>
-                          <input
-                            type="file"
-                            ref={fileInputRef}
-                            onChange={handleFileChange}
-                            style={{ display: "none" }}
-                            accept="image/png, image/jpeg, application/pdf"
-                            disabled={!answers[question.questionId]}
-                          />
-                        </div>
-                      )}
-
-                      {files.length > 0 && (
-                        <Stack gap="sm" mt="sm">
-                          <Text className="font-bold">File yang diunggah:</Text>
-                          {files.map((file, fileIndex) => (
-                            <Group key={fileIndex} align="center">
-                              <Text>{file.name}</Text>
-                              <CloseButton
-                                title="Hapus file"
-                                onClick={() => handleRemoveFile(fileIndex)}
+                      <div className="ml-6">
+                        {question.needFile === true && (
+                          <div
+                            className={`pt-5 pb-5 pr-5 pl-5 border-2 rounded-lg border-dashed ${dragActive ? "bg-gray-100" : "bg-transparent"
+                              } shadow-lg`}
+                            onDragOver={handleDragOver}
+                            onDragLeave={handleDragLeave}
+                            onDrop={(event) => handleDrop(event, question)} // Mengoper question sebagai argumen
+                            onClick={handleClick}
+                          >
+                            <Flex align="center" justify="space-between" gap="sm">
+                              <TbUpload
+                                size={24}
+                                style={{ marginLeft: "8px", marginRight: "8px" }}
                               />
-                            </Group>
-                          ))}
-                        </Stack>
-                      )}
+                              <div className="flex-grow text-right">
+                                <Text className="font-bold">
+                                  Klik untuk unggah atau geser file disini
+                                </Text>
+                                <Text className="text-sm text-gray-400">
+                                  PNG, JPG, PDF
+                                </Text>
+                              </div>
+                            </Flex>
+                            <input
+                              type="file"
+                              ref={fileInputRef}
+                              onChange={(event) => handleFileChange(event, question)} // Mengoper question sebagai argumen
+                              style={{ display: "none" }}
+                              accept="image/png, image/jpeg, application/pdf"
+                              disabled={!answers[question.questionId]}
+                            />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="ml-6">
+                        {uploadedFiles[question.questionId] && (
+                            <Stack gap="sm" mt="sm">
+                                <Text className="font-bold">File yang diunggah:</Text>
+                                <Group align="center">
+                                    <Text>{uploadedFiles[question.questionId]?.name}</Text> {/* Tampilkan nama file yang diunggah */}
+                                    <CloseButton
+                                        title="Hapus file"
+                                        onClick={() => handleRemoveFile(question)} // Mengoper question sebagai argumen
+                                    />
+                                </Group>
+                            </Stack>
+                        )}
+                      </div>
+
+                      {/* Garis pembatas setiap soal */}
+                      <div>
+                        <hr className="border-t-2 border-gray-300 ml-6 mx-auto mt-6 mb-6" />
+                      </div>
                     </Stack>
-                  </Card>
+                  </div>
                 );
               })
             )}
@@ -626,7 +722,7 @@ export default function AssessmentPage() {
 
                 {/* Tombol Selesai */}
                 <div className="mt-6">
-                  <button onClick={handleFinishClick} className="bg-gray-200 text-black font-bold py-2 w-full">
+                  <button onClick={handleFinishClick} className="bg-blue-500 text-white font-bold rounded-md py-2 w-full">
                     Selesai
                   </button>
                 </div>
@@ -643,6 +739,6 @@ export default function AssessmentPage() {
           </Flex>
         </Flex>
       </Stack>
-    </Card>
+    </div>
   );
 }
\ No newline at end of file