Add extensible views to challenges

common/app/routes/challenges/components/Show.jsx

@@ -10,6 +10,11 @@ import Step from './step/Step.jsx';
 import { fetchChallenge, fetchChallenges } from '../redux/actions';
 import { challengeSelector } from '../redux/selectors';
 
+const views = {
+  step: Step,
+  classic: Classic
+};
+
 const bindableActions = {
   fetchChallenge,
   fetchChallenges
@@ -18,7 +23,10 @@ const bindableActions = {
 const mapStateToProps = createSelector(
   challengeSelector,
   state => state.challengesApp.challenge,
-  ({ isStep }, challenge) => ({ challenge, isStep })
+    ({ viewType }, challenge) => ({
+    challenge,
+    viewType
+  })
 );
 
 const fetchOptions = {
@@ -42,18 +50,16 @@ export class Challenges extends PureComponent {
     this.props.fetchChallenges();
   }
 
-  renderView(isStep) {
+  renderView(viewType) {
-    if (isStep) {
+    const View = views[viewType] || Classic;
-      return <Step />;
+    return <View />;
-    }
-    return <Classic />;
   }
 
   render() {
-    const { isStep } = this.props;
+    const { viewType } = this.props;
     return (
       <div>
-        { this.renderView(isStep) }
+        { this.renderView(viewType) }
       </div>
     );
   }

common/app/routes/challenges/redux/selectors.js

@@ -1,6 +1,19 @@
-import { STEP, HTML } from '../../../utils/challengeTypes';
+import * as challengeTypes from '../../../utils/challengeTypes';
 import { createSelector } from 'reselect';
 
+const viewTypes = {
+  [ challengeTypes.HTML ]: 'classic',
+  [ challengeTypes.JS ]: 'classic',
+  [ challengeTypes.BONFIRE ]: 'classic',
+  [ challengeTypes.ZIPLINE ]: 'project',
+  [ challengeTypes.BASEJUMP ]: 'project',
+  // might not be used anymore
+  [ challengeTypes.OLDVIDEO ]: 'video',
+  // formally hikes
+  [ challengeTypes.VIDEO ]: 'video',
+  [ challengeTypes.STEP ]: 'step'
+};
+
 export const challengeSelector = createSelector(
   state => state.challengesApp.challenge,
   state => state.entities.challenge,
@@ -11,9 +24,12 @@ export const challengeSelector = createSelector(
     const challenge = challengeMap[challengeName];
     return {
       challenge: challenge,
-      showPreview: !!challenge && challenge.challengeType === HTML,
+      viewType: viewTypes[challenge.challengeType] || 'classic',
-      isStep: !!challenge && challenge.challengeType === STEP,
+
-      mode: !!challenge && challenge.challengeType === HTML ?
+      showPreview: challenge &&
+        challenge.challengeType === challengeTypes.HTML,
+
+      mode: challenge && challenge.challengeType === challengeTypes.HTML ?
         'text/html' :
         'javascript'
     };

common/app/utils/challengeTypes.js

@@ -1,8 +1,8 @@
 export const HTML = '0';
 export const JS = '1';
-export const VIDEO = '2';
+export const OLDVIDEO = '2';
 export const ZIPLINE = '3';
 export const BASEJUMP = '4';
 export const BONFIRE = '5';
-export const HIKES = '6';
+export const VIDEO = '6';
 export const STEP = '7';