Multiple Leaderboards

Author: kkartunov

__tests__/shared/containers/__snapshots__/Leaderboard.jsx.snap

@@ -5,40 +5,10 @@ exports[`Matches shapshot 1`] = `
   HeadBanner={null}
   apiUrl="http://www.mocky.io/v2/59098e60100000b60747c10b"
   auth={null}
+  id="communityLeaderboard"
   isLoadingLeaderboard={false}
   isTopGear={false}
-  leaderboardData={
-    Array [
-      Object {
-        "avatarUrl": "some.fake.string",
-        "challenge_stats.count": 99999,
-        "challenge_stats.winner_handle": "overachieving.mofo",
-        "project_result.final_score": 9999999999,
-        "rank": 1,
-      },
-      Object {
-        "avatarUrl": "some.fake.string",
-        "challenge_stats.count": 99999,
-        "challenge_stats.winner_handle": "overachieving.mofo",
-        "project_result.final_score": 9999999999,
-        "rank": 1,
-      },
-      Object {
-        "avatarUrl": "some.fake.string",
-        "challenge_stats.count": 99999,
-        "challenge_stats.winner_handle": "overachieving.mofo",
-        "project_result.final_score": 9999999999,
-        "rank": 1,
-      },
-      Object {
-        "avatarUrl": "some.fake.string",
-        "challenge_stats.count": 99999,
-        "challenge_stats.winner_handle": "overachieving.mofo",
-        "project_result.final_score": 9999999999,
-        "rank": 1,
-      },
-    ]
-  }
+  leaderboardData={null}
   loadLeaderboard={[Function]}
   loadedApiUrl={null}
   store={

__tests__/shared/reducers/leaderboard.js

@@ -10,7 +10,7 @@ import { createActions } from 'redux-actions';
 /**
  * Load user ranking for the leaderboard page.
  */
-function fetchLeaderboard(auth, apiUrl) {
+function fetchLeaderboard(auth, apiUrl, id) {
   // we use fetch directly here, as we are making request to api v4 using token v3
   // so we don't create a new service to not bring inconsistency in an existent service approach
   return fetch(apiUrl, {
@@ -30,7 +30,7 @@ function fetchLeaderboard(auth, apiUrl) {
       data.forEach((element, index) => {
         element.rank = index + 1;
       });
-      return { data, loadedApiUrl: apiUrl };
+      return { data, id, loadedApiUrl: apiUrl };
     });
 }
 
@@ -49,7 +49,7 @@ async function getTcoHistoryChallengesDone(url, competitor) {
 
 export default createActions({
   LEADERBOARD: {
-    FETCH_LEADERBOARD_INIT: _.noop,
+    FETCH_LEADERBOARD_INIT: _.identity,
     FETCH_LEADERBOARD_DONE: fetchLeaderboard,
     GET_TCO_HISTORY_CHALLENGES_INIT: getTcoHistoryChallengesInit,
     GET_TCO_HISTORY_CHALLENGES_DONE: getTcoHistoryChallengesDone,

src/shared/actions/leaderboard.js

@@ -16,6 +16,7 @@ export function AppComponentSwitch(appComponent) {
   if (appComponent.fields.type === 'TCO-Leaderboard') {
     return (
       <Leaderboard
+        id={appComponent.sys.id}
         apiUrl={appComponent.fields.props.leaderboardApiUrl}
         title={appComponent.fields.props.title}
         podiumSpots={appComponent.fields.props.podiumSpots}

src/shared/components/Contentful/AppComponent/index.jsx

@@ -23,9 +23,10 @@ class LeaderboardPageContainer extends React.Component {
       isLoadingLeaderboard,
       loadLeaderboard,
       loadedApiUrl,
+      id,
     } = this.props;
     if (!(apiUrl === loadedApiUrl || isLoadingLeaderboard)) {
-      loadLeaderboard(auth, apiUrl);
+      loadLeaderboard(auth, apiUrl, id);
     }
   }
 
@@ -69,6 +70,7 @@ Leaderboard
 }
 
 LeaderboardPageContainer.defaultProps = {
+  id: 'communityLeaderboard',
   HeadBanner: null,
   leaderboardData: [],
   isLoadingLeaderboard: false,
@@ -81,6 +83,7 @@ LeaderboardPageContainer.defaultProps = {
 };
 
 LeaderboardPageContainer.propTypes = {
+  id: PT.string,
   HeadBanner: PT.func,
   leaderboardData: PT.arrayOf(PT.shape()),
   isLoadingLeaderboard: PT.bool,
@@ -91,17 +94,24 @@ LeaderboardPageContainer.propTypes = {
   isTopGear: PT.bool,
 };
 
-const mapStateToProps = state => ({
-  leaderboardData: state.leaderboard.data,
-  isLoadingLeaderboard: state.leaderboard.loading,
-  loadedApiUrl: state.leaderboard.loadedApiUrl,
-  auth: state.auth,
-});
+function mapStateToProps(state, props) {
+  return state.leaderboard[props.id] ? {
+    leaderboardData: state.leaderboard[props.id].data,
+    isLoadingLeaderboard: state.leaderboard[props.id].loading,
+    loadedApiUrl: state.leaderboard[props.id].loadedApiUrl,
+    auth: state.auth,
+  } : {
+    leaderboardData: null,
+    isLoadingLeaderboard: false,
+    loadedApiUrl: null,
+    auth: state.auth,
+  };
+}
 
 const mapDispatchToProps = dispatch => ({
-  loadLeaderboard: (auth, apiUrl) => {
-    dispatch(actions.leaderboard.fetchLeaderboardInit());
-    dispatch(actions.leaderboard.fetchLeaderboardDone(auth, apiUrl));
+  loadLeaderboard: (auth, apiUrl, id) => {
+    dispatch(actions.leaderboard.fetchLeaderboardInit({ id }));
+    dispatch(actions.leaderboard.fetchLeaderboardDone(auth, apiUrl, id));
   },
 });
 

src/shared/containers/Leaderboard/index.jsx

@@ -29,14 +29,15 @@ class LeaderboardPageContainer extends React.Component {
 
   componentDidMount() {
     const {
+      id,
       apiUrl,
       auth,
       isLoadingLeaderboard,
       loadLeaderboard,
       loadedApiUrl,
     } = this.props;
     if (!(apiUrl === loadedApiUrl || isLoadingLeaderboard)) {
-      loadLeaderboard(auth, apiUrl);
+      loadLeaderboard(auth, apiUrl, id);
     }
   }
 
@@ -112,6 +113,7 @@ LeaderboardPageContainer.defaultProps = {
 };
 
 LeaderboardPageContainer.propTypes = {
+  id: PT.string.isRequired,
   leaderboardData: PT.arrayOf(PT.shape()),
   isLoadingLeaderboard: PT.bool,
   loadLeaderboard: PT.func.isRequired,
@@ -127,17 +129,24 @@ LeaderboardPageContainer.propTypes = {
   memberLimit: PT.number,
 };
 
-const mapStateToProps = state => ({
-  leaderboardData: state.leaderboard.data,
-  isLoadingLeaderboard: state.leaderboard.loading,
-  loadedApiUrl: state.leaderboard.loadedApiUrl,
-  auth: state.auth,
-});
+function mapStateToProps(state, props) {
+  return state.leaderboard[props.id] ? {
+    leaderboardData: state.leaderboard[props.id].data,
+    isLoadingLeaderboard: state.leaderboard[props.id].loading,
+    loadedApiUrl: state.leaderboard[props.id].loadedApiUrl,
+    auth: state.auth,
+  } : {
+    leaderboardData: null,
+    isLoadingLeaderboard: false,
+    loadedApiUrl: null,
+    auth: state.auth,
+  };
+}
 
 const mapDispatchToProps = dispatch => ({
-  loadLeaderboard: (auth, apiUrl) => {
-    dispatch(actions.leaderboard.fetchLeaderboardInit());
-    dispatch(actions.leaderboard.fetchLeaderboardDone(auth, apiUrl));
+  loadLeaderboard: (auth, apiUrl, id) => {
+    dispatch(actions.leaderboard.fetchLeaderboardInit({ id }));
+    dispatch(actions.leaderboard.fetchLeaderboardDone(auth, apiUrl, id));
   },
   resetTcoHistoryChallenges: () => {
     dispatch(actions.leaderboard.resetTcoHistoryChallenges());

src/shared/containers/tco/Leaderboard/index.jsx

@@ -15,10 +15,12 @@ import { getAuthTokens } from 'utils/tc';
 function onDone(state, action) {
   return {
     ...state,
-    data: action.error ? null : action.payload.data,
-    loadedApiUrl: action.error ? null : action.payload.loadedApiUrl,
-    failed: !!action.error,
-    loading: false,
+    [action.payload.id]: {
+      data: action.error ? null : action.payload.data,
+      loadedApiUrl: action.error ? null : action.payload.loadedApiUrl,
+      failed: !!action.error,
+      loading: false,
+    },
   };
 }
 
@@ -43,13 +45,15 @@ function onHistoryChallengesDone(state, action) {
  */
 function create(initialState) {
   return redux.handleActions({
-    [actions.leaderboard.fetchLeaderboardInit](state) {
+    [actions.leaderboard.fetchLeaderboardInit](state, action) {
       return {
         ...state,
-        data: null,
-        loadedApiUrl: null,
-        failed: false,
-        loading: true,
+        [action.payload.id]: {
+          data: null,
+          loadedApiUrl: null,
+          failed: false,
+          loading: true,
+        },
       };
     },
     [actions.leaderboard.fetchLeaderboardDone]: onDone,