gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
highlight the currently selected challenge

Closes #16902

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

Closes #16902
This commit is contained in:
Lovepreet Singh
2018-04-18 20:53:37 +05:30
committed by Stuart Taylor
parent 38e9cff9fa
commit 2f95c9f363
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/less/main.less
View File

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

16
common/app/Map/Challenge.jsx
View File

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