From 07414b6acc8cca2ced0360305d382704c31585f4 Mon Sep 17 00:00:00 2001
From: Anh Tran <trana1906@gmail.com>
Date: Thu, 15 Feb 2018 13:38:27 -0500
Subject: [PATCH] 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
---
 common/app/NotFound/Not-Found.jsx           | 13 ++++++++++---
 common/app/routes/Challenges/Show.jsx       |  4 +++-
 common/app/routes/Challenges/redux/index.js |  5 ++++-
 common/app/utils/challengeTypes.js          |  1 +
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/common/app/NotFound/Not-Found.jsx b/common/app/NotFound/Not-Found.jsx
index 13c796137d6..73f101166ca 100644
--- a/common/app/NotFound/Not-Found.jsx
+++ b/common/app/NotFound/Not-Found.jsx
@@ -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;
-
diff --git a/common/app/routes/Challenges/Show.jsx b/common/app/routes/Challenges/Show.jsx
index a4741a9dfbc..f8e60cc807b 100644
--- a/common/app/routes/Challenges/Show.jsx
+++ b/common/app/routes/Challenges/Show.jsx
@@ -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 = {
diff --git a/common/app/routes/Challenges/redux/index.js b/common/app/routes/Challenges/redux/index.js
index d8aff4e4640..1b681b66734 100644
--- a/common/app/routes/Challenges/redux/index.js
+++ b/common/app/routes/Challenges/redux/index.js
@@ -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;
diff --git a/common/app/utils/challengeTypes.js b/common/app/utils/challengeTypes.js
index e271239bb02..9dbb1a54d6b 100644
--- a/common/app/utils/challengeTypes.js
+++ b/common/app/utils/challengeTypes.js
@@ -10,3 +10,4 @@ export const bonfire = 5;
 export const video = 6;
 export const step = 7;
 export const quiz = 8;
+export const invalid = 9;