fix(challenges): Created a NotFound react component, added a redux

Added new React component and added redux states for invalid challenge
Fixed problems for requested changes with eslint long string and used
the existing NotFound component + use Link component
Used react-bootstrap for Not-Found component and changed the "Map" link into
"current-challenge" link. Deleted 'invalid' state in Challenges.jsx

BREAKING CHANGE: N/A

Closes #16257
pull/16720/head
Anh Tran 2018-02-15 13:38:27 -05:00
parent c76ebf0cee
commit 07414b6acc
4 changed files with 18 additions and 5 deletions

View File

@ -1,15 +1,22 @@
import React from 'react';
// import PropTypes from 'prop-types';
import { Alert } from 'react-bootstrap';
const propTypes = {};
export default function NotFound() {
return (
<div>404 Not Found</div>
<Alert bsStyle='danger'>
<h4>Oh snap! Page not found!</h4>
<p>
Head back to
</p>
<a href='/challenges/current-challenge'>
your current challenge
</a>
</Alert>
);
}
NotFound.displayName = 'NotFound';
NotFound.propTypes = propTypes;

View File

@ -11,6 +11,7 @@ import Project from './views/project';
import BackEnd from './views/backend';
import Quiz from './views/quiz';
import Modern from './views/Modern';
import NotFound from '../../NotFound';
import {
fetchChallenge,
@ -27,7 +28,8 @@ const views = {
project: Project,
quiz: Quiz,
simple: Project,
step: Step
step: Step,
invalid: NotFound
};
const mapDispatchToProps = {

View File

@ -218,7 +218,10 @@ export const challengeMetaSelector = createSelector(
(...args) => challengeSelector(...args),
challenge => {
if (!challenge.id) {
return {};
const viewType = 'invalid';
return {
viewType
};
}
const challengeType = challenge && challenge.challengeType;
const type = challenge && challenge.type;

View File

@ -10,3 +10,4 @@ export const bonfire = 5;
export const video = 6;
export const step = 7;
export const quiz = 8;
export const invalid = 9;