Change:
In the new beta (currently at ), it would be great if a challenge page indicated somehow when the challenge has already been completed. Currently, since user inputed code is not saved, there is no indication on a challenge page that it has already been completed.
We need a check mark in the title or a badge or to indicate the same?
The most elegant thing I can think of to have something like the little circular check mark next to the title like how it is on the learn homepage - only if it's been solved, and don't show anything if it hasn't.
That would be a nice way to handle it. Please go forth if you are interested in this?

Discussion:
import Link from '../../../components/helpers/Link'; import './challenge-title.css'; <ins> import GreenPass from '../../../assets/icons/GreenPass'; </ins> const propTypes = { children: PropTypes.string,

prevChallengePath, showPrevNextBtns }) { <del> let icon = null; if (isCompleted) { icon = ( // TODO Use SVG here <i className='ion-checkmark text-primary' title='Completed' /> ); } </del> return ( <div className='challenge-title-wrap'> {showPrevNextBtns ? (

) : null} <h2 className='text-center challenge-title'> {children || 'Happy Coding!'} <del> {icon} </del> <ins> {isCompleted ? ( <GreenPass style={{ height: '15px', width: '15px', marginLeft: '5px' }} /> ) : null} </ins> </h2> {showPrevNextBtns ? ( <Link

import ToolPanel from './Tool-Panel'; import TestSuite from './Test-Suite'; <del> import { challengeTestsSelector } from '../redux'; </del> <ins> import { challengeTestsSelector, isChallengeCompletedSelector } from '../redux'; </ins> import { createSelector } from 'reselect'; import './side-panel.css'; const mapStateToProps = createSelector( <ins> isChallengeCompletedSelector, </ins> challengeTestsSelector, <del> tests => ({ </del> <ins> (isChallengeCompleted, tests) => ({ isChallengeCompleted, </ins> tests }) );

guideUrl: PropTypes.string, instructions: PropTypes.string, introPath: PropTypes.string, <ins> isChallengeCompleted: PropTypes.bool, </ins> nextChallengePath: PropTypes.string, prevChallengePath: PropTypes.string, section: PropTypes.string,

description, instructions, introPath, <ins> isChallengeCompleted, </ins> guideUrl, nextChallengePath, prevChallengePath,

<div> <ChallengeTitle introPath={introPath} <ins> isCompleted={isChallengeCompleted} </ins> nextChallengePath={nextChallengePath} prevChallengePath={prevChallengePath} showPrevNextBtns={showPrevNextBtns}

className="text-center challenge-title" > title text <del> <i className="ion-checkmark text-primary" title="Completed" /> </del> <ins> <span className="sr-only" > Passed </span> <svg height="50" style={ Object { "height": "15px", "marginLeft": "5px", "width": "15px", } } viewBox="0 0 200 200" width="50" xmlns="http://www.w3.org/2000/svg" > <g> <title> Passed </title> <circle cx="100" cy="99" fill="#858591" r="95" stroke="#858591" strokeDasharray="null" strokeLinecap="null" strokeLinejoin="null" /> <rect fill="#ffffff" height="30" stroke="#ffffff" strokeDasharray="null" strokeLinecap="null" strokeLinejoin="null" transform="rotate(-45, 120, 106.321)" width="128.85878" x="55.57059" y="91.32089" /> <rect fill="#ffffff" height="30" stroke="#ffffff" strokeDasharray="null" strokeLinecap="null" strokeLinejoin="null" transform="rotate(45, 66.75, 123.75)" width="80.66548" x="26.41726" y="108.75" /> </g> </svg> </ins> </h2> <a aria-label="Next lesson"

import { createExecuteChallengeSaga } from './execute-challenge-saga'; import { createCurrentChallengeSaga } from './current-challenge-saga'; import { challengeTypes } from '../../../../utils/challengeTypes'; <ins> import { completedChallengesSelector } from '../../../redux'; </ins> export const ns = 'challenge'; export const backendNS = 'backendChallenge';

export const challengeMetaSelector = state => state[ns].challengeMeta; export const challengeTestsSelector = state => state[ns].challengeTests; export const consoleOutputSelector = state => state[ns].consoleOut; <ins> export const isChallengeCompletedSelector = state => { const completedChallenges = completedChallengesSelector(state); const { id: currentChallengeId } = challengeMetaSelector(state); return completedChallenges.some(({ id }) => id === currentChallengeId); }; </ins> export const isCodeLockedSelector = state => state[ns].isCodeLocked; export const isCompletionModalOpenSelector = state => state[ns].modal.completion;