feat: refactoring the way redux is being used. Better use of included technology

Author: Vikas Agarwal

src/actions/challenges.js

@@ -20,10 +20,7 @@ import {
   deleteResource as deleteResourceAPI
 } from '../services/challenges'
 import {
-  LOAD_CHALLENGE_DETAILS_PENDING,
-  LOAD_CHALLENGE_DETAILS_SUCCESS,
-  LOAD_CHALLENGE_DETAILS_FAILURE,
-  LOAD_CHALLENGE_MEMBERS_SUCCESS,
+  LOAD_CHALLENGE_DETAILS,
   LOAD_CHALLENGE_METADATA_SUCCESS,
   LOAD_CHALLENGES_FAILURE,
   LOAD_CHALLENGES_PENDING,
@@ -45,7 +42,6 @@ import {
   CREATE_CHALLENGE_SUCCESS,
   CREATE_CHALLENGE_FAILURE
 } from '../config/constants'
-import { fetchProjectById } from '../services/projects'
 import { loadProject } from './projects'
 
 /**
@@ -171,43 +167,18 @@ export function loadChallenges (projectId, status, filterChallengeName = null) {
  * Loads Challenge details
  */
 export function loadChallengeDetails (projectId, challengeId) {
-  return async (dispatch, getState) => {
-    dispatch({
-      type: LOAD_CHALLENGE_DETAILS_PENDING,
-      challengeDetails: {}
-    })
-
-    if (challengeId) {
-      fetchChallenge(challengeId).then((challenge) => {
-        dispatch({
-          type: LOAD_CHALLENGE_DETAILS_SUCCESS,
-          challengeDetails: challenge
-        })
-        loadProject(challenge.projectId)(dispatch, getState)
-      }).catch((error) => {
-        dispatch({
-          type: LOAD_CHALLENGE_DETAILS_FAILURE,
-          error
-        })
-      })
-    } else {
-      dispatch({
-        type: LOAD_CHALLENGE_DETAILS_SUCCESS,
-        challengeDetails: null
+  return (dispatch, getState) => {
+    return dispatch({
+      type: LOAD_CHALLENGE_DETAILS,
+      payload: fetchChallenge(challengeId).then((challenge) => {
+        // TODO remove this unncessary check, or better utilize the the case when given project id
+        // does not match with challenge's project id
+        if (challenge.projectId === projectId) {
+          dispatch(loadProject(projectId))
+        }
+        return challenge
       })
-
-      if (projectId) {
-        fetchProjectById(projectId).then((selectedProject) => {
-          if (!selectedProject) return
-          const members = selectedProject.members
-            .filter(m => m.role === 'manager' || m.role === 'copilot')
-          dispatch({
-            type: LOAD_CHALLENGE_MEMBERS_SUCCESS,
-            members
-          })
-        })
-      }
-    }
+    })
   }
 }
 
@@ -458,6 +429,12 @@ export function loadResourceRoles () {
   }
 }
 
+/**
+ * Deletes a resource for the given challenge in given role
+ * @param {UUID} challengeId id of the challenge for which resource is to be deleted
+ * @param {UUID} roleId id of the role, the resource is in
+ * @param {String} memberHandle handle of the resource
+ */
 export function deleteResource (challengeId, roleId, memberHandle) {
   const resource = {
     challengeId,
@@ -472,6 +449,12 @@ export function deleteResource (challengeId, roleId, memberHandle) {
   }
 }
 
+/**
+ * Creates a resource for the given challenge in given role
+ * @param {UUID} challengeId id of the challenge for which resource is to be created
+ * @param {UUID} roleId id of the role, the resource should be in
+ * @param {String} memberHandle handle of the resource
+ */
 export function createResource (challengeId, roleId, memberHandle) {
   const resource = {
     challengeId,
@@ -486,6 +469,13 @@ export function createResource (challengeId, roleId, memberHandle) {
   }
 }
 
+/**
+ * Replaces the given resource in given role with new resource for the provided challenge
+ * @param {UUID} challengeId id of the challenge for which resource is to be  replaced
+ * @param {UUID} roleId id of the role, the resource is in
+ * @param {String} newMember handle of the new resource
+ * @param {String} oldMember handle of the existing resource
+ */
 export function replaceResourceInRole (challengeId, roleId, newMember, oldMember) {
   return async (dispatch) => {
     if (newMember === oldMember) {

src/actions/projects.js

@@ -1,44 +1,26 @@
 import {
-  LOAD_PROJECT_DETAILS_SUCCESS,
-  LOAD_PROJECT_DETAILS_PENDING,
-  LOAD_PROJECT_DETAILS_FAILURE,
-  LOAD_CHALLENGE_MEMBERS_SUCCESS
+  LOAD_CHALLENGE_MEMBERS_SUCCESS,
+  LOAD_PROJECT_DETAILS
 } from '../config/constants'
 import { fetchProjectById } from '../services/projects'
 
 /**
  * Loads project details
  */
 export function loadProject (projectId) {
-  return async (dispatch, getState) => {
-    dispatch({
-      type: LOAD_PROJECT_DETAILS_PENDING,
-      projectDetail: {}
-    })
-    if (projectId) {
-      fetchProjectById(projectId).then((project) => {
-        dispatch({
-          type: LOAD_PROJECT_DETAILS_SUCCESS,
-          projectDetail: project
-        })
-
+  return (dispatch, getState) => {
+    return dispatch({
+      type: LOAD_PROJECT_DETAILS,
+      payload: fetchProjectById(projectId).then((project) => {
         if (project && project.members) {
           const members = project.members.filter(m => m.role === 'manager' || m.role === 'copilot')
           dispatch({
             type: LOAD_CHALLENGE_MEMBERS_SUCCESS,
             members
           })
         }
-      }).catch(() => {
-        dispatch({
-          type: LOAD_PROJECT_DETAILS_FAILURE
-        })
+        return project
       })
-    } else {
-      dispatch({
-        type: LOAD_PROJECT_DETAILS_SUCCESS,
-        projectDetail: null
-      })
-    }
+    })
   }
 }

src/config/constants.js

@@ -34,6 +34,7 @@ export const LOAD_CHALLENGES_SUCCESS = 'LOAD_CHALLENGES_SUCCESS'
 export const LOAD_CHALLENGES_PENDING = 'LOAD_CHALLENGES_PENDING'
 export const LOAD_CHALLENGES_FAILURE = 'LOAD_CHALLENGES_FAILURE'
 
+export const LOAD_CHALLENGE_DETAILS = 'LOAD_CHALLENGE_DETAILS'
 export const LOAD_CHALLENGE_DETAILS_SUCCESS = 'LOAD_CHALLENGE_DETAILS_SUCCESS'
 export const LOAD_CHALLENGE_DETAILS_PENDING = 'LOAD_CHALLENGE_DETAILS_PENDING'
 export const LOAD_CHALLENGE_DETAILS_FAILURE = 'LOAD_CHALLENGE_DETAILS_FAILURE'
@@ -46,6 +47,7 @@ export const CREATE_CHALLENGE_SUCCESS = 'CREATE_CHALLENGE_SUCCESS'
 export const CREATE_CHALLENGE_PENDING = 'CREATE_CHALLENGE_PENDING'
 export const CREATE_CHALLENGE_FAILURE = 'CREATE_CHALLENGE_FAILURE'
 
+export const LOAD_PROJECT_DETAILS = 'LOAD_PROJECT_DETAILS'
 export const LOAD_PROJECT_DETAILS_SUCCESS = 'LOAD_PROJECT_DETAILS_SUCCESS'
 export const LOAD_PROJECT_DETAILS_PENDING = 'LOAD_PROJECT_DETAILS_PENDING'
 export const LOAD_PROJECT_DETAILS_FAILURE = 'LOAD_PROJECT_DETAILS_FAILURE'
@@ -54,7 +56,7 @@ export const LOAD_CHALLENGE_SUBMISSIONS_SUCCESS = 'LOAD_CHALLENGE_SUBMISSIONS_SU
 export const LOAD_CHALLENGE_SUBMISSIONS_PENDING = 'LOAD_CHALLENGE_SUBMISSIONS_PENDING'
 export const LOAD_CHALLENGE_SUBMISSIONS_FAILURE = 'LOAD_CHALLENGE_SUBMISSIONS_FAILURE'
 
-export const LOAD_CHALLENGE_MEMBERS_SUCCESS = 'LOAD_CHALLENGE_MEMBERS'
+export const LOAD_CHALLENGE_MEMBERS_SUCCESS = 'LOAD_CHALLENGE_MEMBERS_SUCCESS'
 export const LOAD_CHALLENGE_METADATA_SUCCESS = 'LOAD_CHALLENGE_METADATA_SUCCESS'
 
 export const SAVE_AUTH_TOKEN = 'SAVE_AUTH_TOKEN'

src/reducers/challenges.js

@@ -90,14 +90,15 @@ export default function (state = initialState, action) {
     case UPDATE_CHALLENGE_DETAILS_FAILURE:
     case CREATE_CHALLENGE_FAILURE:
       return { ...state, isLoading: false, attachments: [], challenge: null, failedToLoad: true }
-    case LOAD_CHALLENGE_DETAILS_SUCCESS:
+    case LOAD_CHALLENGE_DETAILS_SUCCESS: {
       return {
         ...state,
-        challengeDetails: action.challengeDetails,
+        challengeDetails: action.payload,
         isLoading: false,
-        attachments: _.has(action.challengeDetails, 'attachments') ? action.challengeDetails.attachments : [],
+        attachments: _.has(action.payload, 'attachments') ? action.payload.attachments : [],
         failedToLoad: false
       }
+    }
     case UPDATE_CHALLENGE_DETAILS_SUCCESS: {
       // During editing the challenge we might change its status, so when we came back to the challenge list
       // updated challenge might have to be removed from the list, or added to the list, or just updated
@@ -213,8 +214,9 @@ export default function (state = initialState, action) {
           [action.metadataKey]: action.metadataValue
         }
       }
-    case LOAD_CHALLENGE_MEMBERS_SUCCESS:
+    case LOAD_CHALLENGE_MEMBERS_SUCCESS: {
       return { ...state, metadata: { ...state.metadata, members: action.members } }
+    }
     case UPLOAD_ATTACHMENT_PENDING:
       return { ...state, isUploading: true, isSuccess: false, uploadingId: action.challengeId }
     case UPLOAD_ATTACHMENT_SUCCESS:

src/reducers/projects.js

@@ -21,7 +21,7 @@ export default function (state = initialState, action) {
     case LOAD_PROJECT_DETAILS_SUCCESS:
       return {
         ...state,
-        projectDetail: action.projectDetail,
+        projectDetail: action.payload,
         isLoading: false
       }
     default: