From a9a9b4dfc4cc0ea739af74ea6d198ad2e834b6a8 Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Fri, 11 Oct 2024 09:38:00 +0700
Subject: [PATCH] update: revision for index lazy

---
 .../assessment/index.lazy.tsx                 | 101 +++++++++++-------
 1 file changed, 61 insertions(+), 40 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
index c6efe1b..bb3e7b3 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
@@ -61,16 +61,33 @@ export default function AssessmentPage() {
   const [selectedSubAspectId, setSelectedSubAspectId] = useState<string | null>(null);
   const [assessmentId, setAssessmentId] = useState<string | null>(null);
 
+  // Fetch aspects and sub-aspects
+  const aspectsQuery = useQuery({
+    queryKey: ["aspects"],
+    queryFn: fetchAspects,
+  });
+
   useEffect(() => {
     const id = getQueryParam("id");
 
     if (!id) {
-      // Handle if no ID found
-      setAssessmentId(null);
+        // Handle if no ID found
+        setAssessmentId(null);
     } else {
-      setAssessmentId(id);
+        setAssessmentId(id);
     }
-  }, []);
+
+    // Setel sub-aspek pertama sebagai default saat pertama kali halaman dimuat
+    // Check if aspectsQuery.data and aspectsQuery.data.data are defined
+    if (aspectsQuery.data?.data && aspectsQuery.data.data.length > 0 && selectedSubAspectId === null) {
+        const firstAspect = aspectsQuery.data.data[0];
+        const firstSubAspect = firstAspect?.subAspects?.[0];
+
+        if (firstSubAspect) {
+            setSelectedSubAspectId(firstSubAspect.id);
+        }
+    }
+  }, [aspectsQuery.data, selectedSubAspectId]);
 
   // Fetching questions data using useQuery
   const { data, isLoading, isError, error } = useQuery(
@@ -87,12 +104,6 @@ export default function AssessmentPage() {
     }));
   };
 
-  // Fetch aspects and sub-aspects
-  const aspectsQuery = useQuery({
-    queryKey: ["aspects"],
-    queryFn: fetchAspects,
-  });
-
   // Fetch average scores berdasarkan assessmentId yang diambil dari URL
   const averageScoreQuery = useQuery(
     getAverageScoreQueryOptions(assessmentId || "")
@@ -231,40 +242,50 @@ export default function AssessmentPage() {
           {/* Aspek dan Sub-Aspek */}
           <Flex direction="column" gap="xs" className="mr-4 w-52">
             <div className="space-y-4">
-              {aspectsQuery.data?.data.map((aspect) => (
-                <div
-                  key={aspect.id}
-                  className="p-4 bg-gray-50 rounded-lg shadow-md"
-                >
+              {aspectsQuery.data?.data
+                .filter((aspect) =>
+                  aspect.subAspects.some((subAspect) =>
+                    data?.data.some((question) => question.subAspectId === subAspect.id)
+                  )
+                )
+                .map((aspect) => (
                   <div
-                    className="flex justify-between cursor-pointer"
-                    onClick={() => toggleAspect(aspect.id)}
+                    key={aspect.id}
+                    className="p-4 bg-gray-50 rounded-lg shadow-md"
                   >
-                    <div className="text-lg text-gray-700">{aspect.name}</div>
-                    <div>
-                      {openAspects[aspect.id] ? (
-                        <TbChevronUp size={25} />
-                      ) : (
-                        <TbChevronRight size={25} />
-                      )}
+                    <div
+                      className="flex justify-between cursor-pointer"
+                      onClick={() => toggleAspect(aspect.id)}
+                    >
+                      <div className="text-lg text-gray-700">{aspect.name}</div>
+                      <div>
+                        {openAspects[aspect.id] ? (
+                          <TbChevronUp size={25} />
+                        ) : (
+                          <TbChevronRight size={25} />
+                        )}
+                      </div>
                     </div>
-                  </div>
 
-                  {openAspects[aspect.id] && (
-                    <div className="mt-2 space-y-2">
-                      {aspect.subAspects.map((subAspect) => (
-                        <div
-                          key={subAspect.id}
-                          className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
-                          onClick={() => setSelectedSubAspectId(subAspect.id)}
-                        >
-                          <div>{subAspect.name}</div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              ))}
+                    {openAspects[aspect.id] && (
+                      <div className="mt-2 space-y-2">
+                        {aspect.subAspects
+                          .filter((subAspect) =>
+                            data?.data.some((question) => question.subAspectId === subAspect.id)
+                          )
+                          .map((subAspect) => (
+                            <div
+                              key={subAspect.id}
+                              className={`flex justify-between text-gray-600 cursor-pointer ${selectedSubAspectId === subAspect.id ? 'font-bold' : ''}`}
+                              onClick={() => setSelectedSubAspectId(subAspect.id)}
+                            >
+                              <div>{subAspect.name}</div>
+                            </div>
+                          ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
             </div>
           </Flex>
           {/* Pertanyaan */}