From b1521fb5631b9135127bb4e2af1b3481ab3ba2c0 Mon Sep 17 00:00:00 2001
From: falendikategar <falendikapratama@gmail.com>
Date: Fri, 18 Oct 2024 11:03:14 +0700
Subject: [PATCH] update: revision to display the average score of sub-aspects
 when different aspects

---
 .../assessment/index.lazy.tsx                 | 59 +++++++++----------
 1 file changed, 28 insertions(+), 31 deletions(-)

diff --git a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
index d7959ad..66d00c6 100644
--- a/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
+++ b/apps/frontend/src/routes/_dashboardLayout/assessment/index.lazy.tsx
@@ -99,9 +99,6 @@ export default function AssessmentPage() {
 
         if (firstMatchingSubAspect) {
           setSelectedSubAspectId(firstMatchingSubAspect.id);
-          setSelectedAspectId(aspectsQuery.data.data.find(aspect =>
-            aspect.subAspects.some(sub => sub.id === firstMatchingSubAspect.id)
-          )?.id || null); // Set selectedAspectId based on the found sub-aspect
         }
       }
     }
@@ -130,20 +127,11 @@ export default function AssessmentPage() {
   // Fetch average scores by aspect
   const averageScoreQuery = useQuery(getAverageScoreQueryOptions(assessmentId || ""));
 
-  // Fetch average scores by sub-aspect
-  const averageScoreSubAspectQuery = useQuery(getAverageScoreSubAspectQueryOptions(assessmentId || ""));
-
   // Filter average score aspect berdasarkan sub-aspect yang dipilih
   const filteredAverageScores = averageScoreQuery.data?.aspects?.filter(aspect =>
     aspect.subAspects.some(subAspect => subAspect.subAspectId === selectedSubAspectId)
   );
 
-  // Filter average scores for the selected sub-aspect
-  const averageScoresForSelectedSubAspect = averageScoreSubAspectQuery.data?.subAspects?.filter(
-    (subAspect) =>
-      subAspect.aspectId === selectedAspectId // Use the appropriate property for filtering
-  );
-
   // Mutation function to toggle flag
   const toggleFlagMutation = useMutation<ToggleFlagResponse, Error, string>({
     mutationFn: toggleFlagAnswer,
@@ -546,19 +534,22 @@ export default function AssessmentPage() {
                   <div>
                     {filteredAverageScores && filteredAverageScores.length > 0 ? (
                       filteredAverageScores.map((aspect) => (
-                        <div key={aspect.aspectId} className="flex justify-between items-center">
-                          <Text className="text-xl text-gray-400">
-                            {aspect.aspectName}
-                          </Text>
-                          <Text className="text-xl font-bold">
-                            {parseFloat(aspect.averageScore).toFixed(2)}
-                          </Text>
+                        <div key={aspect.aspectId}>
+                          {/* Aspect Rendering */}
+                          <div className="flex justify-between items-center">
+                            <Text className="text-xl text-gray-400">
+                              {aspect.aspectName}
+                            </Text>
+                            <Text className="text-xl font-bold">
+                              {parseFloat(aspect.averageScore).toFixed(2)}
+                            </Text>
+                          </div>
                         </div>
                       ))
                     ) : (
                       <Text className="text-lg text-gray-400">Data aspek kosong</Text>
                     )}
-                  </div>
+                </div>
 
                   {/* Garis pembatas */}
                   <div>
@@ -567,17 +558,23 @@ export default function AssessmentPage() {
 
                   {/* Skor Sub-Aspek */}
                   <div>
-                    {averageScoresForSelectedSubAspect?.length ? (
-                      averageScoresForSelectedSubAspect.map((subAspect) => (
-                        <div key={subAspect.aspectId} className="flex justify-between items-center">
-                          <Text className="text-lg text-gray-400">
-                            {subAspect.subAspectName}
-                          </Text>
-                          <Text className="text-lg font-bold">
-                            {parseFloat(subAspect.averageScore).toFixed(2)}
-                          </Text>
-                        </div>
-                      ))
+                {filteredAverageScores && filteredAverageScores.length > 0 ? (
+                      filteredAverageScores.flatMap((aspect) => 
+                        aspect.subAspects && aspect.subAspects.length > 0 ? (
+                          aspect.subAspects.map((subAspect) => (
+                            <div key={subAspect.subAspectId} className="flex justify-between items-center">
+                              <Text className="text-lg text-gray-400">
+                                {subAspect.subAspectName}
+                              </Text>
+                              <Text className="text-lg font-bold">
+                                {parseFloat(subAspect.averageScore).toFixed(2)}
+                              </Text>
+                            </div>
+                          ))
+                        ) : (
+                          <Text className="text-lg text-gray-400">Tidak ada sub-aspek</Text>
+                        )
+                      )
                     ) : (
                       <Text className="text-lg text-gray-400">Data sub aspek kosong</Text>
                     )}