add challenge filtering on browse projects page

src/components/CardChallenge/CardChallenge.js

@@ -19,6 +19,7 @@ import Taxonomy from '../Taxonomy/Taxonomy'
 import ChallengeProgress from '../ChallengeProgress/ChallengeProgress'
 import BusySpinner from '../BusySpinner/BusySpinner'
 import messages from './Messages'
+import { isUsableChallengeStatus } from '../../services/Challenge/ChallengeStatus/ChallengeStatus'
 
 export class CardChallenge extends Component {
   render() {
@@ -55,7 +56,7 @@ export class CardChallenge extends Component {
       <article
         ref={node => this.node = node}
         className={classNames(
-          "mr-card-challenge",
+          `${isUsableChallengeStatus(this.props.challenge?.status) ? "mr-card-challenge" : "mr-card-challenge mr-bg-white-10"}`,
           this.props.className,
           {'is-active': this.props.isExpanded}
         )}
@@ -120,7 +121,7 @@ export class CardChallenge extends Component {
             }
           </div>
         </header>
-
+        {this.props.challenge?.status === 5 ? <FormattedMessage {...messages.completedChallengeLabel} /> : null}
         {this.props.isExpanded &&
          <div className="mr-card-challenge__content">
            {!this.props.challenge.isVirtual &&

src/components/CardChallenge/Messages.js

@@ -19,6 +19,11 @@ export default defineMessages({
     defaultMessage: "View Leaderboard",
   },
 
+  completedChallengeLabel: {
+    id: "Challenge.fields.completed.label",
+    defaultMessage: "Completed"
+  },
+
   vpListLabel: {
     id: "Challenge.fields.vpList.label",
     defaultMessage: "Also in matching virtual {count,plural, one{project} other{projects}}:"

src/components/ChallengePane/ChallengeFilterSubnav/ProjectFilterSubnav.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import { FormattedMessage, injectIntl } from 'react-intl'
+import WithChallengeSearch from '../../HOCs/WithSearch/WithChallengeSearch'
+import FilterByDifficulty from './FilterByDifficulty'
+import FilterByKeyword from './FilterByKeyword'
+import FilterByCategorizationKeywords from './FilterByCategorizationKeywords'
+import ClearFiltersControl from './ClearFiltersControl'
+import SortChallengesSelector from './SortChallengesSelector'
+import './ChallengeFilterSubnav.scss'
+import messages from './Messages'
+
+/**
+ * ProjectilterSubnav presents a navigation bar that contains options
+ * for filtering MapRoulette challenges within the project browse view.
+ *
+ * @see See FilterByDifficulty
+ * @see See FilterByKeyword
+ * @see See FilterByCategorizationKeywords
+ *
+ */
+export class ProjectilterSubnav extends Component {
+  clearFilters = () => {
+    this.props.clearSearchFilters()
+    this.props.clearSearch()
+  }
+
+  render() {
+    const filtersActive =
+      this.props.unfilteredChallenges?.length > this.props.challenges?.length
+
+    return (
+      <header className="mr-bg-black-10 mr-shadow mr-py-4 lg:mr-py-0 mr-px-6 mr-hidden lg:mr-flex mr-items-center mr-justify-between">
+        <div className="mr-flex-grow mr-flex mr-items-center mr-justify-between lg:mr-justify-start">
+          <h1 className="mr-hidden xl:mr-flex mr-text-3xl mr-leading-tight mr-font-normal mr-mr-6">
+            <FormattedMessage {...messages.header} />
+          </h1>
+
+          <div className="mr-flex mr-items-center">
+            <SortChallengesSelector {...this.props} />
+            <FilterByKeyword {...this.props} />
+            <FilterByDifficulty {...this.props} />
+            <FilterByCategorizationKeywords {...this.props} />
+          </div>
+
+          {filtersActive && (
+            <ClearFiltersControl clearFilters={this.clearFilters} />
+          )}
+        </div>
+      </header>
+    )
+  }
+}
+
+export default WithChallengeSearch(injectIntl(ProjectilterSubnav))

src/components/ChallengePane/ChallengeResultList/ChallengeResultList.js

@@ -110,14 +110,10 @@ export class ChallengeResultList extends Component {
         ? limitUserResults(challengeResultsUnbound)
         : challengeResultsUnbound;
 
-    const challengeResults = this.props.project?.id ? _filter(allChallenges, (challenge) => {
+    const challengeResults = this.props.project?.id && this.props.remainingChallengeOnly ? _filter(allChallenges, (challenge) => {
         return (isUsableChallengeStatus(challenge.status))
       }) : allChallenges
 
-    const finishedChallengeResults = this.props.project?.id ? _filter(allChallenges, (challenge) => {
-        return (!isUsableChallengeStatus(challenge.status))
-      }) : []
-
     const uniqueParents = new Set();
 
     const projectResults = this.props.challenges?.reduce((result, challenge) => {
@@ -281,7 +277,7 @@ export class ChallengeResultList extends Component {
     }
 
     let results = null
-    if (challengeResults.length === 0 && finishedChallengeResults.length == 0) {
+    if (challengeResults.length === 0) {
       if (!isFetching) {
         results = (
           <div className="mr-text-white mr-text-lg mr-pt-4">
@@ -306,32 +302,6 @@ export class ChallengeResultList extends Component {
           );
         }
       }))
-      if(finishedChallengeResults?.length > 0){
-        results.push(
-          <div className="mr-text-sm mr-text-yellow mr-uppercase mr-mb-4">
-          <FormattedMessage
-            {...messages.completedChallengeCount}
-            values={{
-              count: finishedChallengeResults.length,
-            }}
-          />
-        </div>,
-          ..._compact(_map(finishedChallengeResults, (result) => {
-            if (result.parent) {
-              return (
-                <ChallengeResultItem
-                  key={`challenge_${result.id}`}
-                  {...this.props}
-                  className="mr-mb-4"
-                  challenge={result}
-                  listRef={this.listRef}
-                  sort={search?.sort}
-                />
-              )
-            }
-          }))
-        )
-      }
     } else if (!this.props.excludeProjectResults && searchType === "projects" && projectResults) {
       results = _compact(_map(projectResults, (result) => {
           return (

src/components/ProjectDetail/Messages.js

@@ -24,6 +24,11 @@ export default defineMessages({
     defaultMessage: "Manage",
   },
 
+  showAll: {
+    id: "ProjectDetails.management.controls.showAll.label",
+    defaultMessage: "Display All Challenges",
+  },
+
   startLabel: {
     id: "ProjectDetails.management.controls.start.label",
     defaultMessage: "Start",