feat(challenges): Highlight current challenge (#16982)

highlight the currently selected challenge

Closes #16902

feat(challenges): Use of params dashed to get current challenge

Closes #16902

client/less/main.less

@@ -664,6 +664,10 @@ hr {
   padding-top: 5px;
 }
 
+.night .map-challenge-title.selectedChallenge, .map-challenge-title.selectedChallenge {
+  background-color:rgb(236, 234, 234);
+}
+
 .checklist-element {
   margin-left: -60px;
   margin-right: -20px;

common/app/Map/Challenge.jsx

@@ -7,6 +7,7 @@ import debug from 'debug';
 
 import { clickOnChallenge } from './redux';
 import { userSelector } from '../redux';
+import { paramsSelector } from '../Router/redux';
 import { challengeMapSelector } from '../entities';
 import { Link } from '../Router';
 import { onRouteChallenges } from '../routes/Challenges/redux';
@@ -20,6 +21,7 @@ const propTypes = {
   isCompleted: PropTypes.bool,
   isDev: PropTypes.bool,
   isLocked: PropTypes.bool,
+  selected: PropTypes.bool,
   title: PropTypes.string
 };
 const mapDispatchToProps = { clickOnChallenge };
@@ -28,9 +30,11 @@ function makeMapStateToProps(_, { dashedName }) {
   return createSelector(
     userSelector,
     challengeMapSelector,
+    paramsSelector,
     (
       { challengeMap: userChallengeMap },
-      challengeMap
+      challengeMap,
+      params
     ) => {
       const {
         id,
@@ -40,6 +44,7 @@ function makeMapStateToProps(_, { dashedName }) {
         isComingSoon
       } = challengeMap[dashedName] || {};
       const isCompleted = userChallengeMap ? !!userChallengeMap[id] : false;
+      const selected = dashedName === params.dashedName;
       return {
         dashedName,
         isCompleted,
@@ -47,7 +52,8 @@ function makeMapStateToProps(_, { dashedName }) {
         block,
         isLocked,
         isComingSoon,
-        isDev: debug.enabled('fcc:*')
+        isDev: debug.enabled('fcc:*'),
+        selected
       };
     }
   );
@@ -97,7 +103,8 @@ export class Challenge extends PureComponent {
       isCompleted,
       isDev,
       isLocked,
-      title
+      title,
+      selected
     } = this.props;
     if (!title) {
       return null;
@@ -109,7 +116,8 @@ export class Challenge extends PureComponent {
       'ion-checkmark-circled faded': !(isLocked || isComingSoon) && isCompleted,
       'ion-ios-circle-outline': !(isLocked || isComingSoon) && !isCompleted,
       'ion-locked': isLocked || isComingSoon,
-      disabled: isLocked || (!isDev && isComingSoon)
+      disabled: isLocked || (!isDev && isComingSoon),
+      selectedChallenge: selected
     });
     if (isLocked || (!isDev && isComingSoon)) {
       return this.renderLocked(