Modify sagas to use new combineSagaHandlers function

Author: leeyi45

src/commons/redux/utils.ts

@@ -4,12 +4,12 @@ import {
   type ActionCreatorWithPreparedPayload,
   createAction
 } from '@reduxjs/toolkit';
-import * as Sentry from '@sentry/browser';
 import type { SagaIterator } from 'redux-saga';
-import { type StrictEffect, takeLatest, takeLeading } from 'redux-saga/effects';
+import { type StrictEffect, takeEvery, takeLatest, takeLeading } from 'redux-saga/effects';
 
-import { safeTakeEvery } from '../sagas/SafeEffects';
-import { objectEntries } from '../utils/TypeHelper';
+import { safeTakeEvery, wrapSaga } from '../sagas/SafeEffects';
+import type { SourceActionType } from '../utils/ActionsHelper';
+import { ActionTypeToCreator, objectEntries } from '../utils/TypeHelper';
 
 /**
  * Creates actions, given a base name and base actions
@@ -42,57 +42,36 @@ export function createActions<BaseName extends string, BaseActions extends Recor
   );
 }
 
-function wrapSaga<T extends (...args: any[]) => Generator>(saga: T) {
-  return function* (...args: Parameters<T>) {
-    try {
-      return yield* saga(...args);
-    } catch (error) {
-      handleUncaughtError(error);
-    }
-  };
-}
+type SagaHandler<T extends SourceActionType['type']> = (
+  action: ReturnType<ActionTypeToCreator<T>>
+) => Generator<StrictEffect>;
 
-type SagaHandler<
-  T extends ActionCreatorWithPreparedPayload<any, any> | ActionCreatorWithoutPayload<any>
-> = (action: ReturnType<T>) => Generator<StrictEffect>;
+type SagaHandlers = {
+  [K in SourceActionType['type']]?:
+    | SagaHandler<K>
+    | Partial<Record<'takeEvery' | 'takeLatest' | 'takeLeading', SagaHandler<K>>>;
+};
 
-export function combineSagaHandlers<
-  TActions extends Record<
-    string,
-    ActionCreatorWithPreparedPayload<any, any> | ActionCreatorWithoutPayload<any>
-  >
->(
-  actions: TActions,
-  handlers: {
-    // TODO: Maybe this can be stricter? And remove the optional type after migration is fully done
-    [K in keyof TActions]?:
-      | SagaHandler<TActions[K]>
-      | { takeLeading: SagaHandler<TActions[K]> }
-      | { takeLatest: SagaHandler<TActions[K]> };
-  },
-  others?: (takeEvery: typeof saferTakeEvery) => SagaIterator
-): () => SagaIterator {
+export function combineSagaHandlers(handlers: SagaHandlers) {
   return function* (): SagaIterator {
-    for (const [actionName, saga] of objectEntries(handlers)) {
+    for (const [actionName, saga] of objectEntries(handlers as SagaHandlers)) {
       if (saga === undefined) {
         continue;
       } else if (typeof saga === 'function') {
-        yield safeTakeEvery(actions[actionName].type, saga);
-      } else if ('takeLeading' in saga) {
-        yield takeLeading(actions[actionName].type, wrapSaga(saga.takeLeading));
-      } else if ('takeLatest' in saga) {
-        yield takeLatest(actions[actionName].type, wrapSaga(saga.takeLatest));
-      } else {
-        throw new Error(`Unknown saga handler type for ${actionName as string}`);
+        yield takeEvery(actionName, wrapSaga(saga));
+        continue;
+      }
+
+      if (saga.takeEvery) {
+        yield takeEvery(actionName, wrapSaga(saga.takeEvery));
+      }
+
+      if (saga.takeLeading) {
+        yield takeLeading(actionName, wrapSaga(saga.takeLeading));
       }
-    }
 
-    if (others) {
-      const obj = others(saferTakeEvery);
-      while (true) {
-        const { done, value } = obj.next();
-        if (done) break;
-        yield value;
+      if (saga.takeLatest) {
+        yield takeLatest(actionName, wrapSaga(saga.takeLatest));
       }
     }
   };
@@ -105,16 +84,3 @@ export function saferTakeEvery<
 >(actionPattern: Action, fn: (action: ReturnType<Action>) => Generator<StrictEffect<any>>) {
   return safeTakeEvery(actionPattern.type, fn);
 }
-
-function handleUncaughtError(error: any) {
-  if (process.env.NODE_ENV === 'development') {
-    // react-error-overlay is a "special" package that's automatically included
-    // in development mode by CRA
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    import('react-error-overlay').then(reo => reo.reportRuntimeError(error));
-  }
-  Sentry.captureException(error);
-  console.error(error);
-}

src/commons/sagas/AchievementSaga.ts

@@ -1,13 +1,15 @@
 import { call, delay, put, select } from 'redux-saga/effects';
 import AchievementActions from 'src/features/achievement/AchievementActions';
 
-import { AchievementGoal, EventType } from '../../features/achievement/AchievementTypes';
+import { type AchievementGoal, EventType } from '../../features/achievement/AchievementTypes';
 import { updateGoalProcessed } from '../achievement/AchievementManualEditor';
 import AchievementInferencer from '../achievement/utils/AchievementInferencer';
 import { goalIncludesEvents, incrementCount } from '../achievement/utils/EventHandler';
-import { OverallState } from '../application/ApplicationTypes';
-import { Tokens } from '../application/types/SessionTypes';
+import type { OverallState } from '../application/ApplicationTypes';
+import type { Tokens } from '../application/types/SessionTypes';
 import { combineSagaHandlers } from '../redux/utils';
+import SideContentActions from '../sideContent/SideContentActions';
+import { getLocation } from '../sideContent/SideContentHelper';
 import { SideContentType } from '../sideContent/SideContentTypes';
 import { actions } from '../utils/ActionsHelper';
 import Constants from '../utils/Constants';
@@ -26,19 +28,17 @@ import {
   updateOwnGoalProgress
 } from './RequestsSaga';
 
-const AchievementSaga = combineSagaHandlers(AchievementActions, {
-  bulkUpdateAchievements: function* (action) {
+const AchievementSaga = combineSagaHandlers({
+  [AchievementActions.bulkUpdateAchievements.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
-
     const achievements = action.payload;
-
     const resp = yield call(bulkUpdateAchievements, achievements, tokens);
 
     if (!resp) {
       return;
     }
   },
-  bulkUpdateGoals: function* (action) {
+  [AchievementActions.bulkUpdateGoals.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     const goals = action.payload;
@@ -49,7 +49,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       return;
     }
   },
-  getAchievements: function* () {
+  [AchievementActions.getAchievements.type]: function* () {
     const tokens: Tokens = yield selectTokens();
 
     const achievements = yield call(getAchievements, tokens);
@@ -58,7 +58,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       yield put(actions.saveAchievements(achievements));
     }
   },
-  getGoals: function* (action) {
+  [AchievementActions.getGoals.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     const studentCourseRegId = action.payload;
@@ -69,7 +69,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       yield put(actions.saveGoals(goals));
     }
   },
-  getOwnGoals: function* (action) {
+  [AchievementActions.getOwnGoals.type]: function* () {
     const tokens: Tokens = yield selectTokens();
 
     const goals = yield call(getOwnGoals, tokens);
@@ -78,7 +78,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       yield put(actions.saveGoals(goals));
     }
   },
-  getUsers: function* (action) {
+  [AchievementActions.getUsers.type]: function* () {
     const tokens: Tokens = yield selectTokens();
 
     const users = yield call(getAllUsers, tokens);
@@ -87,7 +87,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       yield put(actions.saveUsers(users));
     }
   },
-  removeAchievement: function* (action) {
+  [AchievementActions.removeAchievement.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     const achievement = action.payload;
@@ -98,7 +98,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       return;
     }
   },
-  removeGoal: function* (action) {
+  [AchievementActions.removeGoal.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     const definition = action.payload;
@@ -109,7 +109,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       return;
     }
   },
-  updateOwnGoalProgress: function* (action) {
+  [AchievementActions.updateOwnGoalProgress.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     const progress = action.payload;
@@ -120,7 +120,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       return;
     }
   },
-  updateGoalProgress: function* (action) {
+  [AchievementActions.updateGoalProgress.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     const { studentCourseRegId, progress } = action.payload;
@@ -132,10 +132,10 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
     }
     if (resp.ok) {
       yield put(actions.getGoals(studentCourseRegId));
-      updateGoalProcessed();
+      yield call(updateGoalProcessed);
     }
   },
-  addEvent: function* (action) {
+  [AchievementActions.addEvent.type]: function* ({ payload: { eventNames, workspaceLocation } }) {
     let loggedEvents: EventType[][] = [];
     let timeoutSet: boolean = false;
     const updateInterval = 3000;
@@ -144,25 +144,25 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
     const enableAchievements = yield select(
       (state: OverallState) => state.session.enableAchievements
     );
-    if (action.payload.find(e => e === EventType.ERROR)) {
-      // TODO update this to work with new side content system
-      // Flash the home icon if there is an error and the user is in the CSE machine or subst viz tab
-      const introIcon = document.getElementById(SideContentType.introduction + '-icon');
-      const cseTab = document.getElementById(
-        'bp5-tab-panel_side-content-tabs_' + SideContentType.cseMachine
-      );
-      const substTab = document.getElementById(
-        'bp5-tab-panel_side-content-tabs_' + SideContentType.substVisualizer
-      );
+    if (workspaceLocation !== undefined && eventNames.find(e => e === EventType.ERROR)) {
+      const selectedTab: SideContentType | undefined = yield select((state: OverallState) => {
+        const [loc, storyEnv] = getLocation(workspaceLocation);
+        return loc === 'stories'
+          ? state.sideContent.stories[storyEnv].selectedTab
+          : state.sideContent[loc].selectedTab;
+      });
+
       if (
-        (cseTab && cseTab.ariaHidden === 'false') ||
-        (substTab && substTab.ariaHidden === 'false')
+        selectedTab === SideContentType.cseMachine ||
+        selectedTab === SideContentType.substVisualizer
       ) {
-        introIcon?.classList.add('side-content-tab-alert-error');
+        yield put(
+          SideContentActions.beginAlertSideContent(SideContentType.introduction, workspaceLocation)
+        );
       }
     }
     if (role && enableAchievements && !Constants.playgroundOnly) {
-      loggedEvents.push(action.payload);
+      loggedEvents.push(eventNames);
 
       if (!timeoutSet && role) {
         // make sure that only one action every interval will handleEvent
@@ -175,7 +175,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       }
     }
   },
-  handleEvent: function* (action) {
+  [AchievementActions.handleEvent.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     // get the most recent list of achievements
@@ -219,7 +219,7 @@ const AchievementSaga = combineSagaHandlers(AchievementActions, {
       }
     }
   },
-  getUserAssessmentOverviews: function* (action) {
+  [AchievementActions.getUserAssessmentOverviews.type]: function* (action) {
     const tokens: Tokens = yield selectTokens();
 
     const assessmentOverviews = yield call(getUserAssessmentOverviews, action.payload, tokens);