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
This commit is contained in:
@ -1,15 +1,22 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
// import PropTypes from 'prop-types';
|
// import PropTypes from 'prop-types';
|
||||||
|
import { Alert } from 'react-bootstrap';
|
||||||
|
|
||||||
const propTypes = {};
|
const propTypes = {};
|
||||||
|
|
||||||
export default function NotFound() {
|
export default function NotFound() {
|
||||||
return (
|
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.displayName = 'NotFound';
|
||||||
NotFound.propTypes = propTypes;
|
NotFound.propTypes = propTypes;
|
||||||
|
|
||||||
|
@ -11,6 +11,7 @@ import Project from './views/project';
|
|||||||
import BackEnd from './views/backend';
|
import BackEnd from './views/backend';
|
||||||
import Quiz from './views/quiz';
|
import Quiz from './views/quiz';
|
||||||
import Modern from './views/Modern';
|
import Modern from './views/Modern';
|
||||||
|
import NotFound from '../../NotFound';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
fetchChallenge,
|
fetchChallenge,
|
||||||
@ -27,7 +28,8 @@ const views = {
|
|||||||
project: Project,
|
project: Project,
|
||||||
quiz: Quiz,
|
quiz: Quiz,
|
||||||
simple: Project,
|
simple: Project,
|
||||||
step: Step
|
step: Step,
|
||||||
|
invalid: NotFound
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapDispatchToProps = {
|
const mapDispatchToProps = {
|
||||||
|
@ -218,7 +218,10 @@ export const challengeMetaSelector = createSelector(
|
|||||||
(...args) => challengeSelector(...args),
|
(...args) => challengeSelector(...args),
|
||||||
challenge => {
|
challenge => {
|
||||||
if (!challenge.id) {
|
if (!challenge.id) {
|
||||||
return {};
|
const viewType = 'invalid';
|
||||||
|
return {
|
||||||
|
viewType
|
||||||
|
};
|
||||||
}
|
}
|
||||||
const challengeType = challenge && challenge.challengeType;
|
const challengeType = challenge && challenge.challengeType;
|
||||||
const type = challenge && challenge.type;
|
const type = challenge && challenge.type;
|
||||||
|
@ -10,3 +10,4 @@ export const bonfire = 5;
|
|||||||
export const video = 6;
|
export const video = 6;
|
||||||
export const step = 7;
|
export const step = 7;
|
||||||
export const quiz = 8;
|
export const quiz = 8;
|
||||||
|
export const invalid = 9;
|
||||||
|
Reference in New Issue
Block a user