From d0310f7c2bf5881b4f6ac554cdc81543ae41f019 Mon Sep 17 00:00:00 2001
From: Carlos Mesquita <carlos.mesquita@ecrop.dev>
Date: Sat, 3 Aug 2024 14:32:54 +0100
Subject: [PATCH] Patched the module badges on the training view

---
 src/pages/training/index.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/pages/training/index.tsx b/src/pages/training/index.tsx
index da46b717..5f75a0a5 100644
--- a/src/pages/training/index.tsx
+++ b/src/pages/training/index.tsx
@@ -85,7 +85,7 @@ const Training: React.FC<{ user: User }> = ({ user }) => {
     useEffect(() => {
         const postStats = async () => {
             try {
-                const response = await axios.post<{id: string}>(`/api/training`, stats);
+                const response = await axios.post<{ id: string }>(`/api/training`, stats);
                 return response.data.id;
             } catch (error) {
                 setIsNewContentLoading(false);
@@ -93,7 +93,7 @@ const Training: React.FC<{ user: User }> = ({ user }) => {
         };
 
         if (isNewContentLoading) {
-            postStats().then( id => {
+            postStats().then(id => {
                 setTrainingStats([]);
                 if (id) {
                     router.push(`/training/${id}`)
@@ -220,6 +220,7 @@ const Training: React.FC<{ user: User }> = ({ user }) => {
     const trainingContentContainer = (timestamp: string) => {
         if (!groupedByTrainingContent) return <></>;
         const trainingContent: ITrainingContent = groupedByTrainingContent[timestamp];
+        const uniqueModules = [...new Set(trainingContent.exams.map(exam => exam.module))];
 
         return (
             <>
@@ -236,11 +237,9 @@ const Training: React.FC<{ user: User }> = ({ user }) => {
                         </div>
                         <div className="flex flex-col gap-2">
                             <div className="w-full flex flex-row gap-1">
-                                {Object.values(groupedByTrainingContent || {}).flatMap((content) =>
-                                    content.exams.map(({ module, id }) => (
-                                        <ModuleBadge key={id} module={module} />
-                                    ))
-                                )}
+                                {uniqueModules.map((module) => (
+                                    <ModuleBadge key={module} module={module} />
+                                ))}
                             </div>
                         </div>
                     </div>
@@ -270,7 +269,7 @@ const Training: React.FC<{ user: User }> = ({ user }) => {
                 {(isNewContentLoading || isLoading ? (
                     <div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
                         <span className="loading loading-infinity w-32 bg-mti-green-light" />
-                        { isNewContentLoading && (<span className="text-center text-2xl font-bold text-mti-green-light">
+                        {isNewContentLoading && (<span className="text-center text-2xl font-bold text-mti-green-light">
                             Assessing your exams, please be patient...
                         </span>)}
                     </div>