fix issue #200

__tests__/shared/actions/challenge-listing/index.js

@@ -82,7 +82,7 @@ describe('challengeListing.getPastChallengesInit', () => {
 });
 
 describe('challengeListing.getChallengeSubtracksDone', () => {
-  global.fetch = mockFetch(true, [{ description: 'dummy' }]);
+  global.fetch = mockFetch(true, { result: { status: 200, content: [{ description: 'dummy' }] } });
 
   const a = actions.getChallengeSubtracksDone();
 
@@ -91,7 +91,7 @@ describe('challengeListing.getChallengeSubtracksDone', () => {
   });
 
   test('payload is a promise which resolves to the expected object', () =>
-    a.payload.then(res => expect(res).toEqual(['dummy', 'dummy'])));
+    a.payload.then(res => expect(res).toEqual([{ description: 'dummy' }])));
 });
 
 describe('challengeListing.getChallengeTagsDone', () => {

__tests__/shared/components/challenge-listing/Filters/FiltersPanel.jsx

@@ -25,7 +25,7 @@ const mockDatas = [{
   setFilterState,
   setSearchText,
   validKeywords: ['key', 'word'],
-  validSubtracks: ['sub', 'track'],
+  validSubtracks: [{ name: 'sub', subTrack: 'sub' }, { name: 'track', subTrack: 'track' }],
   onClose,
 }, {
   communityFilters: [

__tests__/shared/reducers/challenge-listing/index.js

@@ -81,6 +81,7 @@ let expectedState = {
 
   challenges: [],
   challengeSubtracks: [],
+  challengeSubtracksMap: {},
   challengeTags: [],
 
   filter: {},

src/shared/actions/challenge-listing/index.js

@@ -46,8 +46,7 @@ function getChallengeSubtracksDone() {
   return getService()
     .getChallengeSubtracks()
     .then(res =>
-      res.map(item => item.description)
-        .sort((a, b) => a.localeCompare(b)),
+      res.sort((a, b) => a.name.localeCompare(b.name)),
     );
 }
 

src/shared/components/challenge-detail/Header/ChallengeTags.jsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import PT from 'prop-types';
+import _ from 'lodash';
 import { Link } from 'utils/router';
 
 import './style.scss';
@@ -20,8 +21,17 @@ export default function ChallengeTags(props) {
     subTrackStyle,
     eventStyle,
     setChallengeListingFilter,
+    challengeSubtracksMap,
   } = props;
 
+  const stylizedSubTrack = (t) => {
+    if (challengeSubtracksMap[t]) {
+      return challengeSubtracksMap[t].name;
+    }
+    return (t || '').replace(/_/g, ' ')
+      .replace(/\w\S*/g, txt => _.capitalize(txt));
+  };
+
   return (
     <div styleName="tag-holder">
       {
@@ -30,7 +40,7 @@ export default function ChallengeTags(props) {
           onClick={() => setChallengeListingFilter({ subtracks: [subTrack] })}
           to="/challenges"
           styleName={`tag-common ${subTrackStyle}`}
-        >{subTrack}</Link>
+        >{stylizedSubTrack(subTrack)}</Link>
       }
       {
         events.map(event => (
@@ -71,4 +81,5 @@ ChallengeTags.propTypes = {
   subTrackStyle: PT.string.isRequired,
   eventStyle: PT.string.isRequired,
   setChallengeListingFilter: PT.func.isRequired,
+  challengeSubtracksMap: PT.shape().isRequired,
 };

src/shared/components/challenge-detail/Header/index.jsx

@@ -34,6 +34,7 @@ export default function ChallengeHeader(props) {
     setChallengeListingFilter,
     unregisterFromChallenge,
     unregistering,
+    challengeSubtracksMap,
   } = props;
 
   const {
@@ -66,8 +67,6 @@ export default function ChallengeHeader(props) {
 
   const theme = themeFactory(trackLower);
 
-  const stylizedSubTrack = (subTrack || '').replace('_', ' ')
-    .replace(/\w\S*/g, txt => _.capitalize(txt));
   const subTrackStyle = `${trackLower}-accent-background`;
   const eventStyle = `${trackLower}-accent-color`;
   const eventNames = (events || []).map((event => (event.eventName || '').toUpperCase()));
@@ -138,7 +137,8 @@ export default function ChallengeHeader(props) {
         <div styleName="important-detail">
           <h1 styleName="challenge-header">{name}</h1>
           <ChallengeTags
-            subTrack={stylizedSubTrack}
+            subTrack={subTrack}
+            challengeSubtracksMap={challengeSubtracksMap}
             events={eventNames}
             technPlatforms={miscTags}
             subTrackStyle={subTrackStyle}
@@ -259,4 +259,5 @@ ChallengeHeader.propTypes = {
   showDeadlineDetail: PT.bool.isRequired,
   unregisterFromChallenge: PT.func.isRequired,
   unregistering: PT.bool.isRequired,
+  challengeSubtracksMap: PT.shape().isRequired,
 };

src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx

@@ -52,7 +52,7 @@ export default function FiltersPanel({
   }));
 
   const mapOps = item => ({ label: item, value: item });
-
+  const mapSubtracks = item => ({ label: item.name, value: item.subTrack });
   return (
     <div styleName={className}>
       <div styleName="header">
@@ -98,7 +98,7 @@ export default function FiltersPanel({
                 const subtracks = value ? value.split(',') : undefined;
                 setFilterState(Filter.setSubtracks(filterState, subtracks));
               }}
-              options={validSubtracks.map(mapOps)}
+              options={validSubtracks.map(mapSubtracks)}
               simpleValue
               value={
                 filterState.subtracks ? filterState.subtracks.join(',') : null
@@ -162,6 +162,6 @@ FiltersPanel.propTypes = {
   setFilterState: PT.func.isRequired,
   setSearchText: PT.func.isRequired,
   validKeywords: PT.arrayOf(PT.string).isRequired,
-  validSubtracks: PT.arrayOf(PT.string).isRequired,
+  validSubtracks: PT.arrayOf(PT.shape()).isRequired,
   onClose: PT.func,
 };

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

@@ -54,7 +54,8 @@ class ChallengeDetailPageContainer extends React.Component {
 
   componentDidMount() {
     const { challenge, loadChallengeDetails, loadTerms,
-      openTermsModal, authTokens, challengeId } = this.props;
+      openTermsModal, authTokens, challengeId,
+      challengeSubtracksMap, getSubtracks } = this.props;
 
     if (challenge.id !== challengeId) {
       loadChallengeDetails(authTokens, challengeId);
@@ -65,6 +66,10 @@ class ChallengeDetailPageContainer extends React.Component {
     if (authTokens.tokenV2 && location.search.indexOf('showTerms=true') > 0) {
       openTermsModal();
     }
+
+    if (_.isEmpty(challengeSubtracksMap)) {
+      getSubtracks();
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -147,6 +152,7 @@ class ChallengeDetailPageContainer extends React.Component {
               unregistering={this.props.unregistering}
               checkpoints={this.props.checkpoints}
               hasRegistered={hasRegistered}
+              challengeSubtracksMap={this.props.challengeSubtracksMap}
             />
           }
           {
@@ -282,6 +288,8 @@ ChallengeDetailPageContainer.propTypes = {
   agreedTerms: PT.shape(),
   loadingDocuSignUrl: PT.string,
   setChallengeListingFilter: PT.func.isRequired,
+  challengeSubtracksMap: PT.shape().isRequired,
+  getSubtracks: PT.func.isRequired,
 };
 
 function extractChallengeDetail(v3, v2, challengeId) {
@@ -388,6 +396,7 @@ const mapStateToProps = (state, props) => ({
   agreeingTerm: state.terms.agreeingTerm,
   agreedTerms: state.terms.agreedTerms,
   isLoadingTerms: state.terms.loadingTermsForChallengeId === props.match.params.challengeId,
+  challengeSubtracksMap: state.challengeListing.challengeSubtracksMap,
 });
 
 const mapDispatchToProps = (dispatch) => {
@@ -456,6 +465,11 @@ const mapDispatchToProps = (dispatch) => {
       dispatch(t.agreeTermInit(termId));
       dispatch(t.agreeTermDone(termId, tokens.tokenV2));
     },
+    getSubtracks: () => {
+      const cl = challengeListingActions.challengeListing;
+      dispatch(cl.getChallengeSubtracksInit());
+      dispatch(cl.getChallengeSubtracksDone());
+    },
   };
 };
 

src/shared/containers/challenge-listing/Listing/index.jsx

@@ -224,7 +224,7 @@ ListingContainer.propTypes = {
   allDraftChallengesLoaded: PT.bool.isRequired,
   allPastChallengesLoaded: PT.bool.isRequired,
   challenges: PT.arrayOf(PT.shape({})).isRequired,
-  challengeSubtracks: PT.arrayOf(PT.string).isRequired,
+  challengeSubtracks: PT.arrayOf(PT.shape()).isRequired,
   challengeTags: PT.arrayOf(PT.string).isRequired,
   communityFilters: PT.arrayOf(PT.shape({
     challengeFilter: PT.shape(),

src/shared/reducers/challenge-listing/index.js

@@ -52,6 +52,7 @@ function onGetChallengeSubtracksDone(state, action) {
   return {
     ...state,
     challengeSubtracks: action.error ? [] : action.payload,
+    challengeSubtracksMap: action.error ? {} : _.keyBy(action.payload, 'subTrack'),
     loadingChallengeSubtracks: false,
   };
 }
@@ -237,6 +238,7 @@ function create(initialState) {
 
     challenges: [],
     challengeSubtracks: [],
+    challengeSubtracksMap: {},
     challengeTags: [],
 
     filter: {},

src/shared/services/challenges.js

@@ -140,12 +140,13 @@ class ChallengesService {
    * @return {Promise} Resolves to the array of subtrack names.
    */
   getChallengeSubtracks() {
-    return Promise.all([
-      this.private.apiV2.get('/design/challengetypes')
-        .then(res => (res.ok ? res.json() : new Error(res.statusText))),
-      this.private.apiV2.get('/develop/challengetypes')
-        .then(res => (res.ok ? res.json() : new Error(res.statusText))),
-    ]).then(([a, b]) => a.concat(b));
+    return this.private.api.get('/challenge-types')
+      .then(res => (res.ok ? res.json() : new Error(res.statusText)))
+      .then(res => (
+        res.result.status === 200 ?
+          res.result.content :
+          new Error(res.result.content)
+      ));
   }
 
   /**

src/shared/utils/challenge-listing/filter.js

@@ -114,8 +114,8 @@ function filterBySubtracks(challenge, state) {
    * why challenge subtracks in challenge objects are different from those
    * return from the API as the list of possible subtracks. */
   const filterSubtracks = state.subtracks.map(item =>
-    item.toLowerCase().replace(/ /g, ''));
-  const challengeSubtrack = challenge.subTrack.toLowerCase().replace(/_/g, '');
+    item.toLowerCase().replace(/[_ ]/g, ''));
+  const challengeSubtrack = challenge.subTrack.toLowerCase().replace(/[_ ]/g, '');
   return filterSubtracks.includes(challengeSubtrack);
 }