fix: badge initialisation when starting game (#1670)

* fix: badge initialisation when starting game * Merge branch 'master' into badges_init * Merge branch 'master' into badges_init
ocadotechnology · Jun 6, 2022 · 0672c65 · 0672c65
1 parent 51ece24
commit 0672c65
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 45 deletions.
diff --git a/game_frontend/src/components/NavigationBar/index.js b/game_frontend/src/components/NavigationBar/index.js
@@ -9,6 +9,7 @@ import { IconButton, Button } from '@material-ui/core'
 
 import KuronoLogo from 'components/icons/KuronoLogo'
 import BadgeModal, { getBadges } from 'components/Badge'
+import { avatarWorkerActions } from 'features/AvatarWorker'
 
 export const NavigationBarLayout = styled.nav`
   grid-area: navigation-bar;
@@ -38,10 +39,15 @@ export class NavigationBar extends Component {
     // the props received from redux state or reducers
     modalOpen: PropTypes.bool,
     completedTasks: PropTypes.string,
+    badgesInit: PropTypes.func,
   }
 
   state = { modalOpen: false, completedTasks: [], lastTask: '' }
 
+  componentDidMount() {
+    this.props.badgesInit()
+  }
+
   handleClose = () => {
     this.setState({
       modalOpen: false,
@@ -114,4 +120,8 @@ const mapStateToProps = (state) => ({
   modalOpen: state.avatarWorker.modalOpen,
 })
 
-export default connect(mapStateToProps)(NavigationBar)
+const mapDispatchToProps = {
+  badgesInit: avatarWorkerActions.getBadgesRequest,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NavigationBar)
diff --git a/game_frontend/src/redux/features/AvatarWorker/actions.js b/game_frontend/src/redux/features/AvatarWorker/actions.js
@@ -1,42 +1,42 @@
 import types from './types'
 
 const initializePyodide = () => ({
-  type: types.INITIALIZE_PYODIDE
+  type: types.INITIALIZE_PYODIDE,
 })
 
 const pyodideInitialized = () => ({
-  type: types.PYODIDE_INITIALIZED
+  type: types.PYODIDE_INITIALIZED,
 })
 
-const avatarCodeUpdated = computedTurnResult => ({
+const avatarCodeUpdated = (computedTurnResult) => ({
   type: types.AVATAR_CODE_UPDATED,
   payload: {
-    ...computedTurnResult
-  }
+    ...computedTurnResult,
+  },
 })
 
-const avatarsNextActionComputed = computedTurnResult => ({
+const avatarsNextActionComputed = (computedTurnResult) => ({
   type: types.AVATARS_NEXT_ACTION_COMPUTED,
   payload: {
-    ...computedTurnResult
-  }
-})
-
-const badgesChecked = badges => ({
-  type: types.BADGES_CHECKED,
-  payload: badges,
+    ...computedTurnResult,
+  },
 })
 
 const getBadgesRequest = () => ({
   type: types.GET_BADGES_REQUEST,
 })
 
-const getBadgesReceived = badges => ({
+const getBadgesReceived = (badges) => ({
   type: types.GET_BADGES_SUCCESS,
   payload: badges,
 })
 
-const postBadgesRequest = badges => ({
+const checkBadgesReceived = (badges) => ({
+  type: types.BADGES_CHECKED_SUCCESS,
+  payload: badges,
+})
+
+const postBadgesRequest = (badges) => ({
   type: types.POST_BADGES_REQUEST,
   payload: badges,
 })
@@ -45,14 +45,20 @@ const postBadgesReceived = () => ({
   type: types.POST_BADGES_SUCCESS,
 })
 
+const badgesEarned = (badges) => ({
+  type: types.BADGES_EARNED,
+  payload: badges,
+})
+
 export default {
   initializePyodide,
   pyodideInitialized,
   avatarCodeUpdated,
   avatarsNextActionComputed,
-  badgesChecked,
+  badgesEarned,
   getBadgesRequest,
   getBadgesReceived,
+  checkBadgesReceived,
   postBadgesRequest,
   postBadgesReceived,
 }
diff --git a/game_frontend/src/redux/features/AvatarWorker/epics.js b/game_frontend/src/redux/features/AvatarWorker/epics.js
@@ -1,12 +1,12 @@
-import {switchMap, mapTo, zip, take, tap, map, mergeMap, catchError} from 'rxjs/operators'
+import { switchMap, mapTo, zip, take, tap, map, mergeMap, catchError } from 'rxjs/operators'
 
 import actions from './actions'
 import types from './types'
 import { timeoutIfWorkerTakesTooLong } from './operators'
 import { ofType } from 'redux-observable'
 import { gameTypes } from '../Game'
 import { editorTypes } from '../Editor'
-import {from, of, Scheduler} from 'rxjs'
+import { from, of, Scheduler } from 'rxjs'
 
 const backgroundScheduler = Scheduler.async
 
@@ -84,12 +84,12 @@ const computeNextActionEpic = (
   )
 
 /**
- * Whenever the avatar's code is updated, get the user's badges information.
+ * Get the user's badges information.
  * @returns a redux action that contains a string storing the user's earned badges information.
  */
 const getBadgesEpic = (action$, state$, { api }) =>
   action$.pipe(
-    ofType(types.AVATAR_CODE_UPDATED),
+    ofType(types.GET_BADGES_REQUEST),
     mergeMap((action) =>
       api.get(`badges/${state$.value.game.connectionParameters.game_id}/`).pipe(
         map((response) => actions.getBadgesReceived(response.badges)),
@@ -105,23 +105,23 @@ const getBadgesEpic = (action$, state$, { api }) =>
   )
 
 /**
- * Once the badge check has been run on the user's new code to see if they've earned any new badges, send a POST request
- * with the updated information.
- * @returns a redux action that confirms the success or failure of the POST request.
+ * Whenever the avatar's code is updated, get the user's badges information.
+ * @returns a redux action that contains a string storing the user's earned badges information.
  */
-const postBadgesEpic = (action$, state$, { api }) =>
+const checkBadgesEpic = (action$, state$, { api }) =>
   action$.pipe(
-    ofType(types.BADGES_CHECKED),
-    api.post(`/kurono/api/badges/${state$.value.game.connectionParameters.game_id}/`, (action) => {
-      return {badges: action.payload}
-    }),
-    map(() => actions.postBadgesReceived()),
-    catchError((error) =>
-      of({
-        type: types.POST_BADGES_FAILURE,
-        payload: error.xhr.response,
-        error: true,
-      })
+    ofType(types.AVATAR_CODE_UPDATED),
+    mergeMap((action) =>
+      api.get(`badges/${state$.value.game.connectionParameters.game_id}/`).pipe(
+        map((response) => actions.checkBadgesReceived(response.badges)),
+        catchError((error) =>
+          of({
+            type: types.GET_BADGES_FAILURE,
+            payload: error.xhr.response,
+            error: true,
+          })
+        )
+      )
     )
   )
 
@@ -132,7 +132,7 @@ const postBadgesEpic = (action$, state$, { api }) =>
  */
 const checkBadgesEarnedEpic = (action$, state$, { pyodideRunner: { checkIfBadgeEarned } }) =>
   action$.pipe(
-    ofType(types.GET_BADGES_SUCCESS),
+    ofType(types.BADGES_CHECKED_SUCCESS),
     switchMap(({ payload: badges }) =>
       action$.pipe(
         ofType(types.AVATAR_CODE_UPDATED),
@@ -147,7 +147,7 @@ const checkBadgesEarnedEpic = (action$, state$, { pyodideRunner: { checkIfBadgeE
             )
           )
         ),
-        map(actions.badgesChecked),
+        map(actions.badgesEarned),
         catchError((error) =>
           of({
             type: types.BADGES_CHECKED_FAILURE,
@@ -156,7 +156,28 @@ const checkBadgesEarnedEpic = (action$, state$, { pyodideRunner: { checkIfBadgeE
           })
         )
       )
-    ),
+    )
+  )
+
+/**
+ * Once the badge check has been run on the user's new code to see if they've earned any new badges, send a POST request
+ * with the updated information.
+ * @returns a redux action that confirms the success or failure of the POST request.
+ */
+const postBadgesEpic = (action$, state$, { api }) =>
+  action$.pipe(
+    ofType(types.BADGES_EARNED),
+    api.post(`/kurono/api/badges/${state$.value.game.connectionParameters.game_id}/`, (action) => {
+      return { badges: action.payload }
+    }),
+    map(() => actions.postBadgesReceived()),
+    catchError((error) =>
+      of({
+        type: types.POST_BADGES_FAILURE,
+        payload: error.xhr.response,
+        error: true,
+      })
+    )
   )
 
 export default {
@@ -165,6 +186,7 @@ export default {
   updateAvatarCodeEpic,
   computeNextActionEpic,
   getBadgesEpic,
+  checkBadgesEpic,
   postBadgesEpic,
   checkBadgesEarnedEpic,
 }
diff --git a/game_frontend/src/redux/features/AvatarWorker/reducers.js b/game_frontend/src/redux/features/AvatarWorker/reducers.js
@@ -5,18 +5,24 @@ const actionReducer = (state = { initialized: false }, action) => {
     case types.AVATARS_NEXT_ACTION_COMPUTED:
       return {
         ...state,
-        avatarAction: action.payload
+        avatarAction: action.payload,
       }
     case types.PYODIDE_INITIALIZED:
       return {
         ...state,
-        initialized: true
+        initialized: true,
       }
-    case types.BADGES_CHECKED:
+    case types.GET_BADGES_SUCCESS:
       return {
         ...state,
         completedTasks: action.payload,
-        modalOpen: true
+        modalOpen: false,
+      }
+    case types.BADGES_EARNED:
+      return {
+        ...state,
+        completedTasks: action.payload,
+        modalOpen: true,
       }
     default:
       return state

diff --git a/game_frontend/src/redux/features/AvatarWorker/types.js b/game_frontend/src/redux/features/AvatarWorker/types.js
@@ -5,8 +5,9 @@ const AVATAR_CODE_UPDATED = 'features/AvatarWorker/AVATAR_CODE_UPDATED'
 
 const AVATARS_NEXT_ACTION_COMPUTED = 'features/AvatarWorker/AVATARS_NEXT_ACTION_COMPUTED'
 
-const BADGES_CHECKED = 'features/AvatarWorker/BADGES_CHECKED'
+const BADGES_EARNED = 'features/AvatarWorker/BADGES_EARNED'
 const BADGES_CHECKED_FAILURE = 'features/AvatarWorker/BADGES_CHECKED_FAILURE'
+const BADGES_CHECKED_SUCCESS = 'features/AvatarWorker/BADGES_CHECKED_SUCCESS'
 const GET_BADGES_REQUEST = 'features/AvatarWorker/GET_CODE_REQUEST'
 const GET_BADGES_SUCCESS = 'features/AvatarWorker/GET_CODE_SUCCESS'
 const GET_BADGES_FAILURE = 'features/AvatarWorker/GET_CODE_FAILURE'
@@ -19,8 +20,9 @@ export default {
   PYODIDE_INITIALIZED,
   AVATARS_NEXT_ACTION_COMPUTED,
   INITIALIZE_PYODIDE,
-  BADGES_CHECKED,
+  BADGES_EARNED,
   BADGES_CHECKED_FAILURE,
+  BADGES_CHECKED_SUCCESS,
   GET_BADGES_REQUEST,
   GET_BADGES_SUCCESS,
   GET_BADGES_FAILURE,