search filter

DarkIntaqt · Jul 28, 2023 · 6c28610 · 6c28610
1 parent ac7fd10
commit 6c28610
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 15 deletions.
diff --git a/src/css/filter.module.css b/src/css/filter.module.css
@@ -2,7 +2,6 @@
     width: 250px;
     float: left;
     overflow: hidden;
-
 }
 
 .displayMode {
@@ -16,8 +15,6 @@
     width: 25px;
 }
 
-
-
 .displayMode>button {
     border: none;
     background-color: var(--dark0);
@@ -63,8 +60,8 @@ button.pointstrue {
 }
 
 .input {
-    width: 80%;
-    margin: 10px 10%;
+    width: 90%;
+    margin: 10px 5%;
     background: var(--dark2);
     color: white;
     padding: 8px 20px;

diff --git a/src/module/Challenges.js b/src/module/Challenges.js
@@ -90,7 +90,6 @@ class Challenges extends Component {
 
         let challengeObject = [];
 
-        console.log(this.filter);
         for (let i = 0; i < challenges.length; i++) {
             const challenge = challenges[i];
             if (challenge.id < 10) {
@@ -389,7 +388,6 @@ class Challenges extends Component {
                 {this.state.event}
             </section>
 
-            <input type="text" placeholder={t("Search for a challenge")} onKeyUp={this.search} className={filterCSS.input} defaultValue={this.searchFor} />
             <div className={filterCSS.filter}>
 
                 <div className={filterCSS.selectors + " clearfix"}>
@@ -430,7 +428,7 @@ class Challenges extends Component {
                         </button>
                         <button onClick={this.changeFilter} data-id="2023000">
                             <img src={config.images['2023000']} alt="2023 seasonal" />
-                            2023 Seasonal <span>{t("new").toUpperCase()}</span>
+                            2023 Seasonal
                         </button>
                         <button onClick={this.changeFilter} data-id="seasonal-retired">
                             <img src={config.images['seasonal-retired']} alt="seasonal outdated" />
@@ -488,6 +486,7 @@ class Challenges extends Component {
                 </div>
             </div>
             <div className={css.parent + " " + css.flexWidth}>
+                <input type="text" placeholder={t("Search for a challenge")} onKeyUp={this.search} className={filterCSS.input} defaultValue={this.searchFor} />
                 {
                     this.state.challenges.length > 0
                         ? this.state.challenges

diff --git a/src/module/user/UserChallenges.js b/src/module/user/UserChallenges.js
@@ -18,7 +18,6 @@ import Timestamp from "react-timestamps"
 import css from "../../css/user.module.css"
 
 import orderChallenges, { getNextLevel } from "./orderChallenges";
-import goTo from "../../func/goTo";
 import Loader from "../Loader"
 import { withTranslation } from "react-i18next";
 import { capitalize } from "../../func/stringManipulation";
@@ -37,8 +36,9 @@ class UserChallenges extends Component {
         this.togglePointsAvailableSorting = this.togglePointsAvailableSorting.bind(this)
 
         this.changeDisplayMethod = this.changeDisplayMethod.bind(this)
+        this.search = this.search.bind(this);
 
-        this.props = props
+        this.props = props;
 
         this.state = {
             alphabet: "a-z",
@@ -51,7 +51,8 @@ class UserChallenges extends Component {
                 "type": [],
                 "gamemode": []
             },
-            translation: props.t
+            translation: props.t,
+            search: ""
         }
 
     }
@@ -154,6 +155,10 @@ class UserChallenges extends Component {
         }
     }
 
+    search(e) {
+        this.setState({ search: e.currentTarget.value })
+    }
+
 
     render() {
 
@@ -175,7 +180,7 @@ class UserChallenges extends Component {
         const filter = this.state.filter
 
 
-        let challengesOrdered = orderChallenges(user.challenges, this.state.filter, this.state.filters, this.state.orderByMaster, this.state.orderByPoints)
+        let challengesOrdered = orderChallenges(user.challenges, this.state.filter, this.state.filters, this.state.orderByMaster, this.state.orderByPoints, this.state.search)
 
 
         let challenges = challengesOrdered.map((challenge) => {
@@ -427,6 +432,7 @@ class UserChallenges extends Component {
 
 
             <div className={css.parent + " " + css.flexWidth} style={this.state.extraStyleNormal}>
+                <input type="text" placeholder={t("Search for a challenge")} onKeyUp={this.search} className={filterCSS.input} defaultValue={this.state.search} />
                 {challenges}
             </div>
 

diff --git a/src/module/user/orderChallenges.js b/src/module/user/orderChallenges.js
@@ -19,7 +19,7 @@ export function getNextLevel(current, masterOnly = false, pointsOnly = false) {
 
 
 
-export function removeUnnecessaryChallenges(challengesArray, filters, masterOnly = false, pointsOnly = false) {
+export function removeUnnecessaryChallenges(challengesArray, filters, masterOnly = false, pointsOnly = false, search = "") {
 
     let challenges = {};
     challengesArray.forEach(challenge => {
@@ -143,15 +143,19 @@ export function removeUnnecessaryChallenges(challengesArray, filters, masterOnly
 
         }
 
+        if (search !== "" && (challenge[6].translation.name.toLowerCase().search(search.toLowerCase()) === -1 && challenge[6].translation.description.toLowerCase().search(search.toLowerCase()) === -1)) {
+            return null
+        }
+
         return challenge
     })?.filter(x => x !== null)
 
 }
 
 
-export default function orderChallenges(challenges, filter, extraFilter, masterOnly, pointsOnly) {
+export default function orderChallenges(challenges, filter, extraFilter, masterOnly, pointsOnly, search) {
 
-    challenges = removeUnnecessaryChallenges(challenges, extraFilter, masterOnly, pointsOnly)
+    challenges = removeUnnecessaryChallenges(challenges, extraFilter, masterOnly, pointsOnly, search)
 
     let sortAlgorithm = function (a, b) {