Improve UX on approving milestones, it does not refresh page on successful approve/reject.

Author: tasqat

src/config/constants.js

@@ -318,6 +318,8 @@ export const LOAD_PROJECT_PHASES             = 'LOAD_PROJECT_PHASES'
 export const LOAD_PROJECT_PHASES_PENDING     = 'LOAD_PROJECT_PHASES_PENDING'
 export const LOAD_PROJECT_PHASES_FAILURE     = 'LOAD_PROJECT_PHASES_FAILURE'
 export const LOAD_PROJECT_PHASES_SUCCESS     = 'LOAD_PROJECT_PHASES_SUCCESS'
+export const CUSTOMER_APPROVE_MILESTONE_SUCCESS      = 'CUSTOMER_APPROVE_MILESTONE_SUCCESS'
+export const CUSTOMER_APPROVE_MILESTONE_FAILURE      = 'CUSTOMER_APPROVE_MILESTONE_FAILURE'
 
 export const LOAD_PRODUCT_TIMELINE_WITH_MILESTONES             = 'LOAD_PRODUCT_TIMELINE_WITH_MILESTONES'
 export const LOAD_PRODUCT_TIMELINE_WITH_MILESTONES_PENDING     = 'LOAD_PRODUCT_TIMELINE_WITH_MILESTONES_PENDING'

src/projects/actions/project.js

@@ -71,7 +71,9 @@ import {
   CREATE_PROJECT_PHASE_TIMELINE_MILESTONES,
   LOAD_PROJECT_MEMBER,
   ES_REINDEX_DELAY,
-  CREATE_PROJECT_PHASE
+  CREATE_PROJECT_PHASE,
+  CUSTOMER_APPROVE_MILESTONE_SUCCESS,
+  CUSTOMER_APPROVE_MILESTONE_FAILURE
 } from '../../config/constants'
 import {
   updateProductMilestone,
@@ -515,12 +517,30 @@ export function executePhaseApproval(projectId, phaseId, updatedProps, phaseInde
     const state = getState()
     phaseIndex = phaseIndex ? phaseIndex : _.findIndex(state.projectState.phases, { id: phaseId })
 
-    createPhaseApprovalAPI(projectId, phaseId, updatedProps, phaseIndex).then(() => {
-      dispatch(loadProjectPhasesWithProducts(projectId))
+    return createPhaseApprovalAPI(projectId, phaseId, updatedProps, phaseIndex).then(() => {
+    }).catch(() => {
+      return Promise.reject(new Error('Fail to approve milestone'))
     })
   }
 }
 
+/**
+ * Dispatch alert message after individual or bulk milestone approval
+ *
+ * @param {Boolean} success is milestone updated successfully
+ *
+ * @return {Promise} phase
+ */
+export function approveMilestone(success = true) {
+  return (dispatch) => {
+    if (success) {
+      dispatch({ type: CUSTOMER_APPROVE_MILESTONE_SUCCESS })
+    } else {
+      dispatch({ type: CUSTOMER_APPROVE_MILESTONE_FAILURE })
+    }
+  }
+}
+
 /**
  * Update phase info
  *

src/projects/detail/containers/DashboardContainer.jsx

@@ -32,6 +32,7 @@ import {
   createPhaseAndMilestones,
   createPhaseWithoutTimeline,
   getChallengesByIds,
+  approveMilestone,
 } from '../../actions/project'
 import { addProductAttachment, updateProductAttachment, removeProductAttachment } from '../../actions/projectAttachment'
 
@@ -67,7 +68,8 @@ import {
   SCREEN_BREAKPOINT_MD,
   CODER_BOT_USERID,
   PROJECT_TYPE_TALENT_AS_A_SERVICE,
-  PHASE_PRODUCT_TEMPLATE_ID
+  PHASE_PRODUCT_TEMPLATE_ID,
+  PHASE_STATUS_REVIEWED
 } from '../../../config/constants'
 
 const SYSTEM_USER = {
@@ -83,7 +85,8 @@ class DashboardContainer extends React.Component {
 
     this.state = {
       open: false,
-      createGameplanPhases: null
+      createGameplanPhases: null,
+      visiblePhases: null
     }
     this.onNotificationRead = this.onNotificationRead.bind(this)
     this.toggleDrawer = this.toggleDrawer.bind(this)
@@ -151,18 +154,32 @@ class DashboardContainer extends React.Component {
   }
 
   onApproveMilestones({type, comment, milestones}) {
-    const { executePhaseApproval } = this.props
+    const { executePhaseApproval, approveMilestone } = this.props
     const reqs = []
     milestones.forEach( ms => { 
       reqs.push(
         executePhaseApproval(ms.projectId, ms.id, {decision: type, comment})
       )
       console.log('type-comment', type, comment, ms)
     })
-    Promise.all(reqs).then((...args) => {console.log('onApproveMilestones t', args)})
-      .catch(e => console.log('onApproveMilestones f', e))
+    const updatedPhases = this.state.createGameplanPhases || this.state.visiblePhases || []
+    Promise.all(reqs).then(() => {
+      milestones.forEach(ms => {
+        const index = updatedPhases.findIndex(phase => phase.id === ms.id)
+        updatedPhases.splice(index, 1, {
+          ...updatedPhases[index],
+          status: PHASE_STATUS_REVIEWED
+        })
+      })
+
+      approveMilestone()
+    })
+      .catch((e) => {
+        console.log('onApproveMilestones f', e)
+        approveMilestone(false)
+      })
       .finally(() => {
-        this.onChangeMilestones(null)
+        this.onChangeMilestones(updatedPhases)
       })
   }
 
@@ -350,6 +367,7 @@ class DashboardContainer extends React.Component {
     const visiblePhases = phases && phases.filter((phase) => (
       hasPermission(PERMISSIONS.VIEW_DRAFT_PHASES) || phase.status !== PHASE_STATUS_DRAFT
     ))
+    this.state.visiblePhases = visiblePhases
     const visiblePhasesIds = _.map(visiblePhases, 'id')
     const visiblePhasesNonDirty = phasesNonDirty && phasesNonDirty.filter((phaseNonDirty) => (
       _.includes(visiblePhasesIds, phaseNonDirty.id)
@@ -565,7 +583,8 @@ const mapDispatchToProps = {
   removeProjectAttachment,
   updatePhase,
   updatePhaseMembers,
-  executePhaseApproval
+  executePhaseApproval,
+  approveMilestone
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(withRouter(DashboardContainer))

src/reducers/alerts.js

@@ -71,7 +71,9 @@ import {
   REJECT_SCOPE_CHANGE_FAILURE,
   CANCEL_SCOPE_CHANGE_FAILURE,
   ACTIVATE_SCOPE_CHANGE_FAILURE,
-  CREATE_PROJECT_PHASE_SUCCESS
+  CREATE_PROJECT_PHASE_SUCCESS,
+  CUSTOMER_APPROVE_MILESTONE_SUCCESS,
+  CUSTOMER_APPROVE_MILESTONE_FAILURE
 } from '../config/constants'
 /* eslint-enable no-unused-vars */
 
@@ -263,6 +265,13 @@ export default function(state = {}, action) {
     Alert.error(message)
     return state
   }
+  case CUSTOMER_APPROVE_MILESTONE_SUCCESS:
+    Alert.success('Approved Milestones successfully.')
+    return state
+
+  case CUSTOMER_APPROVE_MILESTONE_FAILURE:
+    Alert.error('Unable to Approve Milestone.')
+    return state
 
   case CREATE_PROJECT_FAILURE:
   case DELETE_PROJECT_FAILURE: