Fix state comparison bug

Author: 100gle

static/js/passedState.js

@@ -16,7 +16,7 @@ class PassedState {
         const rawState = this._prepareState(initialState);
 
         // check new state and old state whether is undefined or not. and merge the new state to the old state.
-        const state = this._checkAndMerge(currentState, rawState);
+        const state = this._checkAndMerge(JSON.parse(currentState), rawState);
         this._save(state);
         this._state = state;
         return
@@ -84,12 +84,16 @@ class PassedState {
             throw new Error('one of the new state and the old state is required.');
         }
 
-        if (!newState) {
+        if (!oldState && newState) {
+            return newState;
+        }
+
+        if (!newState && oldState) {
             return oldState;
         }
 
         let mergedState = {};
-        const levels = ['basic', 'intermediate', 'advanced', 'expert'];
+        const levels = ['basic', 'intermediate', 'advanced', 'extreme'];
 
         for (const level of levels) {
             // Initialize an empty array for merged challenges
@@ -101,13 +105,8 @@ class PassedState {
 
             // Add or update challenges from the newState
             for (const [name, newChallenge] of newChallengesMap.entries()) {
-                mergedChallenges.push({ ...newChallenge, passed: oldChallengesMap.get(name)?.passed });
-                oldChallengesMap.delete(name); // Remove the challenge from oldChallengesMap since it's updated
-            }
-
-            // Add remaining challenges from the oldState that are not updated (not present in newState)
-            for (const oldChallenge of oldChallengesMap.values()) {
-                mergedChallenges.push(oldChallenge);
+                let hasPassed = oldChallengesMap.get(name)?.passed || newChallenge.passed;
+                mergedChallenges.push({ ...newChallenge, passed: hasPassed });
             }
 
             // Set the merged challenges for the current level in the mergedState

templates/components/challenge_sidebar.html

@@ -146,4 +146,7 @@ <h5 class="challenge-level">{{ level }}</h5>
       c.classList.remove('active-challenge');
     }
   }
+
+  const initialState = {{ challenges_groupby_level | tojson }}
+  const passedState = new PassedState(initialState);
 </script>