Merge pull request #5128 from topcoder-platform/issue-1532-gets0ul

fix: toggle checkpoint feedback

Author: luizrrodrigues

src/shared/actions/page/challenge-details.js

@@ -59,7 +59,7 @@ function setSpecsTabState(state) {
  * @param {Boolean} open
  * @return {Object}
  */
-function toggleCheckpointFeedback(id, open) {
+function toggleCheckpointFeedback(id, open = false) {
   return { id, open };
 }
 

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

@@ -27,7 +27,7 @@ function Checkpoints(props) {
                 document
                   .getElementsByClassName(style['challenge-checkpoint-winners'])[index]
                   .scrollIntoView(true);
-                toggleCheckpointFeedback(index, true);
+                toggleCheckpointFeedback(item.submissionId, true);
               }}
               type="button"
             >
@@ -47,12 +47,12 @@ function Checkpoints(props) {
           }}
         />
         {
-          checkpointResults && checkpointResults.map((item, index) => (
+          checkpointResults && checkpointResults.map(item => (
             <div key={item.submissionId} styleName="challenge-checkpoint-winners">
               <button
                 onClick={(e) => {
                   e.preventDefault();
-                  toggleCheckpointFeedback(index);
+                  toggleCheckpointFeedback(item.submissionId, !item.expanded);
                 }}
                 styleName="challenge-checkpoint-submission"
                 type="button"

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

@@ -763,6 +763,14 @@ function mapStateToProps(state, props) {
       mySubmissions = _.filter(challenge.submissions, s => (`${s.memberId}` === `${auth.user.userId}`));
     }
   }
+  const { page: { challengeDetails: { feedbackOpen } } } = state;
+  const checkpoints = state.challenge.checkpoints || {};
+  if (feedbackOpen.id && checkpoints.checkpointResults) {
+    checkpoints.checkpointResults = checkpoints.checkpointResults.map(result => ({
+      ...result,
+      expanded: result.submissionId === feedbackOpen.id ? feedbackOpen.open : result.expanded,
+    }));
+  }
   return {
     auth: state.auth,
     challenge,
@@ -773,9 +781,9 @@ function mapStateToProps(state, props) {
     challengeId: String(props.match.params.challengeId),
     challengesUrl: props.challengesUrl,
     challengeTypesMap: state.challengeListing.challengeTypesMap,
-    checkpointResults: (state.challenge.checkpoints || {}).checkpointResults,
+    checkpointResults: checkpoints.checkpointResults,
     checkpointResultsUi: state.page.challengeDetails.checkpoints,
-    checkpoints: state.challenge.checkpoints || {},
+    checkpoints,
     communityId: props.communityId,
     communitiesList: state.tcCommunities.list,
     domain: state.domain,

src/shared/reducers/page/challenge-details.js

@@ -8,19 +8,8 @@ import { updateQuery } from 'utils/url';
  * @param {Object} state Previous state.
  * @param {Object} action Action.
  */
-function onToggleCheckpointFeedback(state, action) {
-  const { payload: { id, open } } = action;
-  const newCheckpointResults = _.clone(state.checkpoints.checkpointResults);
-  newCheckpointResults[id].expanded = _.isUndefined(open)
-    ? !newCheckpointResults[id].expanded : open;
-  const newCheckpoints = {
-    ...state.checkpoints,
-    checkpointResults: newCheckpointResults,
-  };
-  return {
-    ...state,
-    checkpoints: newCheckpoints,
-  };
+function onToggleCheckpointFeedback(state, { payload }) {
+  return { ...state, feedbackOpen: payload };
 }
 
 /**
@@ -92,7 +81,7 @@ function create(state = {}) {
     [a.submissions.toggleSubmissionTestcase]: toggleSubmissionTestcase,
     [a.submissions.clearSubmissionTestcaseOpen]: clearSubmissionTestcaseOpen,
   }, _.defaults(state, {
-    checkpoints: {},
+    feedbackOpen: {},
     specsTabState: SPECS_TAB_STATES.VIEW,
     submissionHistoryOpen: {},
     submissionTestcaseOpen: {},