Fix issue topcoder-platform#190

Author: elfman

src/shared/actions/challenge.js

@@ -29,9 +29,14 @@ function getDetailsInit(challengeId) {
  * @return {Promise}
  */
 function getDetailsDone(challengeId, tokenV3, tokenV2) {
+  console.log(challengeId);
+  if (_.isNaN(challengeId) || !_.inRange(challengeId, 9999999, 100000000)) {
+    return Promise.reject({ errorCode: 404 });
+  }
   const service = getChallengesService(tokenV3, tokenV2);
   const v3Promise = service.getChallenges({ id: challengeId })
-    .then(res => res.challenges[0]);
+    .then(res => (res.challenges && res.challenges.length > 0 ?
+      res.challenges[0] : Promise.reject({ errorCode: 404 })));
   return Promise.all([
     v3Promise,
     v3Promise.then((v3) => {

src/shared/containers/challenge-detail/index.jsx

@@ -24,6 +24,7 @@ import challengeActions from 'actions/challenge';
 import termsActions from 'actions/terms';
 import config from 'utils/config';
 import { BUCKETS } from 'utils/challenge-listing/buckets';
+import Error404 from 'components/Error404';
 
 import './styles.scss';
 
@@ -126,6 +127,9 @@ class ChallengeDetailPageContainer extends React.Component {
 
     if (this.props.isLoadingChallenge) return <LoadingPagePlaceholder />;
 
+    if (this.props.fetchChallengeFailure &&
+      this.props.fetchChallengeFailure.errorCode === 404) return <Error404 />;
+
     return (
       <div styleName="outer-container">
         <div styleName="challenge-detail-container">
@@ -231,6 +235,7 @@ class ChallengeDetailPageContainer extends React.Component {
 ChallengeDetailPageContainer.defaultProps = {
   tokenV3: null,
   isLoadingChallenge: false,
+  fetchChallengeFailure: null,
   loadingCheckpointResults: false,
   checkpointResults: null,
   loadingResults: false,
@@ -251,6 +256,7 @@ ChallengeDetailPageContainer.propTypes = {
   tokenV3: PT.string,
   challenge: PT.shape().isRequired,
   isLoadingChallenge: PT.bool,
+  fetchChallengeFailure: PT.shape(),
   loadChallengeDetails: PT.func.isRequired,
   authTokens: PT.shape().isRequired,
   challengeId: PT.number.isRequired,
@@ -369,6 +375,7 @@ const mapStateToProps = (state, props) => ({
     state.challenge.detailsV2,
     Number(props.match.params.challengeId)),
   isLoadingChallenge: Boolean(state.challenge.loadingDetailsForChallengeId),
+  fetchChallengeFailure: state.challenge.fetchChallengeFailure,
   authTokens: state.auth,
   tokenV2: state.auth && state.auth.tokenV2,
   tokenV3: state.auth && state.auth.tokenV3,
@@ -398,7 +405,7 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(a.getDetailsInit(challengeId));
       dispatch(a.getDetailsDone(challengeId, tokens.tokenV3, tokens.tokenV2))
         .then((res) => {
-          if (res.payload[0].track === 'DESIGN') {
+          if (res.payload[0] && res.payload[0].track === 'DESIGN') {
             dispatch(a.fetchCheckpointsInit());
             dispatch(a.fetchCheckpointsDone(tokens.tokenV2, challengeId));
           }

src/shared/reducers/challenge.js

@@ -20,13 +20,13 @@ function onGetDetailsInit(state, action) {
   const challengeId = action.payload;
   return state.details && _.toString(state.details.id) !== challengeId ? {
     ...state,
-    fetchChallengeFailure: false,
+    fetchChallengeFailure: null,
     loadingDetailsForChallengeId: challengeId,
     details: null,
     detailsV2: null,
   } : {
     ...state,
-    fetchChallengeFailure: false,
+    fetchChallengeFailure: null,
     loadingDetailsForChallengeId: challengeId,
   };
 }
@@ -47,7 +47,7 @@ function onGetDetailsDone(state, action) {
       ...state,
       details: null,
       detailsV2: null,
-      fetchChallengeFailure: action.error,
+      fetchChallengeFailure: action.payload,
       loadingDetailsForChallengeId: '',
     };
   }
@@ -65,7 +65,7 @@ function onGetDetailsDone(state, action) {
     ...state,
     details,
     detailsV2: action.payload[1],
-    fetchChallengeFailure: false,
+    fetchChallengeFailure: null,
     loadingDetailsForChallengeId: '',
   };
 }