Merged PR 8878: fix-progress-count

src/components/task-item.js

@@ -8,7 +8,7 @@ import classNames from 'classnames'
 
 import {useState, useEffect}  from 'react'
 
-export const TaskItem = ({type, title, url, chapterId, taskId, exerciseCount, index}) => {
+export const TaskItem = ({type, title, url, chapterId, taskId, exercises, index}) => {
 
   
   const {progress} = useMsal()
@@ -20,7 +20,6 @@ export const TaskItem = ({type, title, url, chapterId, taskId, exerciseCount, in
           console.debug("Failed to retrieve progress")
           return
       }
-      console.debug("Progress is not loaded", progress);
       const chapterFound = progress.modules.find(element => element.moduleId === chapterId)
 
    
@@ -32,13 +31,14 @@ export const TaskItem = ({type, title, url, chapterId, taskId, exerciseCount, in
             
           let count = 0 
 
-          //Fixes progress count when duplicates exist in database. Shouldn't happen.
-          let taskSet = new Set()
+          // Filters id:s client side which shouldn't exist in database but does so for some reason. For example if the id for an exercise has changed.
+          // A better solution would be to just wipe those posts from the database. 
+          
+          const filteredExercises = taskFound.exercises.filter((elem1 => exercises.find(elem2 => elem2.properties.id === elem1.exerciseId) !== undefined))
 
-          taskFound.exercises.forEach((e) => {
-            if (!taskSet.has(e.exerciseId) && JSON.parse(e.exerciseData).status === "complete") 
-              count++
-                   
+          filteredExercises.forEach((e) => {
+            if (JSON.parse(e.exerciseData).status === "complete") 
+              count++                  
           })
 
           setDoneCount(count)
@@ -52,13 +52,13 @@ export const TaskItem = ({type, title, url, chapterId, taskId, exerciseCount, in
         <div className={classes.item}>
             <div className={classes.header}>
               <div className={classes.leftheader}>
-                { type != "chapter" && <p className={classNames(classes.itemNr, { [classes.idCompleted]: doneCount == exerciseCount })}>{index}</p>}
+                { type != "chapter" && <p className={classNames(classes.itemNr, { [classes.idCompleted]: doneCount == exercises.length })}>{index}</p>}
                 <h3 className={classes.title}>{title}</h3>
               </div>
               { type != "chapter" && <div className={classes.rightheader}>
 					 {/* <span className={classes.icon}>KOD </span> */}
 					 {/* <span className={classes.separator}>|</span> */}
-                <p className={classes.progress}>Avklarat: {doneCount}/{exerciseCount}</p>
+                <p className={classes.progress}>Avklarat: {doneCount}/{exercises.length}</p>
               </div>}
             </div>
         </div>

src/templates/chapter.js

@@ -84,7 +84,7 @@ const Chapter = (props) => {
       });
 
     const chapterTasks = props.pageContext.tasks.map( (task, i) => { 
-        return <TaskItem chapterId={id} taskId={task.node.frontmatter.id} exerciseCount={task.node.htmlAst.children.length} url={task.node.fields.slug} keyValue={i} description={task.node.frontmatter.description} title={task.node.frontmatter.title} index={task.node.frontmatter.index}> </TaskItem>
+        return <TaskItem chapterId={id} taskId={task.node.frontmatter.id} exercises={task.node.htmlAst.children} url={task.node.fields.slug} keyValue={i} description={task.node.frontmatter.description} title={task.node.frontmatter.title} index={task.node.frontmatter.index}> </TaskItem>
     });
 
     chapterTasks.sort(function(a, b) {