Merge pull request #187 from 1337MARCEL/marcel/persist-user-filters

That looks good to me. Thanks a lot for contributing :)
DarkIntaqt · Dec 22, 2023 · 956add3 · 956add3
2 parents d7ac401 + 95ab4a6
commit 956add3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/func/sessionStorageFunctions.js b/src/func/sessionStorageFunctions.js
@@ -1,7 +1,9 @@
 /**
- * Keys used for localStorage.
+ * Keys used for sessionStorage.
  */
 export const storageKeys = {
+   userFilter: "user-filter",
+   userFilters: "user-filters",
    challengeFilters: "challenge-filters",
    challengeSearch: "challenge-search",
    pointsOnly: "points-only",
@@ -44,4 +46,4 @@ export function removeStorage(key) {
  */
 export function clearStorage() {
    sessionStorage.clear();
-}
+}
diff --git a/src/module/user/UserChallenges.js b/src/module/user/UserChallenges.js
@@ -47,12 +47,12 @@ class UserChallenges extends Component {
             orderByPoints: getStorage(storageKeys.pointsOnly, false),
             capstones: getStorage(storageKeys.capstones, false),
             placeholder: window.compactMode,
-            filter: "level",
-            filters: {
+            filter: getStorage(storageKeys.userFilter, "level"),
+            filters: getStorage(storageKeys.userFilters, {
                 "category": [],
                 "type": [],
-                "gamemode": []
-            },
+                "gamemode": [],
+            }),
             translation: props.t,
             search: ""
         }
@@ -122,6 +122,7 @@ class UserChallenges extends Component {
             }
 
             this.setState({ filter: tempFilter, alphabet: alphabetVar })
+            setStorage(storageKeys.userFilter, tempFilter);
 
         }
     }
@@ -149,6 +150,7 @@ class UserChallenges extends Component {
             }
 
             this.setState({ filters: filters })
+            setStorage(storageKeys.userFilters, filters);
 
         }
     }
@@ -163,6 +165,16 @@ class UserChallenges extends Component {
         this.setState({ search: e.currentTarget.value })
     }
 
+    componentDidUpdate() {
+        const filters = [this.state.filter, ...Object.values(this.state.filters).flat()];
+
+        for (const id of filters) {
+            if (document.getElementById(id)) {
+                document.getElementById(id).classList.add(filterCSS["selected"]);
+            }
+        }
+    }
+
 
     render() {
 
@@ -333,7 +345,7 @@ class UserChallenges extends Component {
                     <div className={filterCSS.category} category="category">
                         <p className={filterCSS.cheading}>{t("Order by")}</p>
 
-                        <button onClick={this.changeFilter} id="level" className={filterCSS["selected"]}>
+                        <button onClick={this.changeFilter} id="level">
                             <i className="fa-solid fa-ranking-star"></i>
                             {t("Rank")}
                         </button>
@@ -448,4 +460,4 @@ class UserChallenges extends Component {
     }
 }
 
-export default withTranslation()(UserChallenges)
+export default withTranslation()(UserChallenges)