Feat: News in the client app (#34392)

client/src/redux/error-saga.js

@@ -0,0 +1,25 @@
+import { navigate } from 'gatsby';
+import { takeEvery, put } from 'redux-saga/effects';
+import { isError } from 'lodash';
+
+import { isHandledError, unwrapHandledError } from '../utils/handled-error';
+import { reportClientSideError } from '../utils/report-error';
+import { createFlashMessage } from '../components/Flash/redux';
+import reportedErrorMessage from '../utils/reportedErrorMessage';
+
+const errorActionSelector = action => isError(action.payload);
+
+function* errorHandlerSaga({ payload: error }) {
+  if (isHandledError(error)) {
+    const { type, message, redirectTo } = unwrapHandledError(error);
+    if (redirectTo) {
+      navigate(redirectTo);
+    }
+    yield put(createFlashMessage({ type, message }));
+    return;
+  }
+  reportClientSideError('Unhandled Error caught in error-saga', error);
+  yield put(createFlashMessage(reportedErrorMessage));
+}
+
+export default [takeEvery(errorActionSelector, errorHandlerSaga)];

client/src/redux/index.js

@@ -19,9 +19,9 @@ import { types as settingsTypes } from './settings';
 const challengeReduxTypes = {};
 /** ***********************************/
 
-const ns = 'app';
+export const ns = 'app';
 
-const defaultFetchState = {
+export const defaultFetchState = {
   pending: true,
   complete: false,
   errored: false,
@@ -220,16 +220,15 @@ export const reducer = handleActions(
           [username]: { ...previousUserObject, ...user }
         },
         userProfileFetchState: {
+          ...defaultFetchState,
           pending: false,
-          complete: true,
-          errored: false,
-          error: null
+          complete: true
         }
       };
     },
     [types.fetchProfileForUserError]: (state, { payload }) => ({
       ...state,
-      userFetchState: {
+      userProfileFetchState: {
         pending: false,
         complete: false,
         errored: true,
@@ -253,10 +252,9 @@ export const reducer = handleActions(
       ...state,
       showCert: payload,
       showCertFetchState: {
+        ...defaultFetchState,
         pending: false,
-        complete: true,
-        errored: false,
-        error: null
+        complete: true
       }
     }),
     [types.showCertError]: (state, { payload }) => ({

client/src/redux/rootReducer.js

@@ -1,17 +1,28 @@
 import { combineReducers } from 'redux';
-import {reducer as formReducer} from 'redux-form';
+import { reducer as formReducer } from 'redux-form';
 
-import { reducer as app } from './';
-import { reducer as flash } from '../components/Flash/redux';
-import { reducer as settings } from './settings';
-import { reducer as curriculumMap } from '../components/Map/redux';
-import { reducer as challenge } from '../templates/Challenges/redux';
+import { reducer as app, ns as appNameSpace } from './';
+import {
+  reducer as flash,
+  ns as flashNameSpace
+} from '../components/Flash/redux';
+import { reducer as settings, ns as settingsNameSpace } from './settings';
+import {
+  reducer as curriculumMap,
+  ns as curriculumMapNameSpace
+} from '../components/Map/redux';
+import {
+  reducer as challenge,
+  ns as challengeNameSpace
+} from '../templates/Challenges/redux';
+import { reducer as news, ns as newsNameSpace } from '../templates/News/redux';
 
 export default combineReducers({
-  app,
-  challenge,
-  curriculumMap,
-  flash,
+  [appNameSpace]: app,
+  [challengeNameSpace]: challenge,
+  [curriculumMapNameSpace]: curriculumMap,
+  [flashNameSpace]: flash,
   form: formReducer,
-  settings
+  [newsNameSpace]: news,
+  [settingsNameSpace]: settings
 });

client/src/redux/rootSaga.js

@@ -1,9 +1,17 @@
 import { all } from 'redux-saga/effects';
 
+import errorSagas from './error-saga';
 import { sagas as appSagas } from './';
-import { sagas as settingsSagas } from './settings';
 import { sagas as challengeSagas } from '../templates/Challenges/redux';
+import { sagas as newsSagas } from '../templates/News/redux';
+import { sagas as settingsSagas } from './settings';
 
 export default function* rootSaga() {
-  yield all([...appSagas, ...challengeSagas, ...settingsSagas]);
+  yield all([
+    ...errorSagas,
+    ...appSagas,
+    ...challengeSagas,
+    ...newsSagas,
+    ...settingsSagas
+  ]);
 }

client/src/redux/settings/index.js

@@ -4,7 +4,7 @@ import { createTypes, createAsyncTypes } from '../../utils/createTypes';
 import { createSettingsSagas } from './settings-sagas';
 import { createUpdateMyEmailSaga } from './update-email-saga';
 
-const ns = 'settings';
+export const ns = 'settings';
 
 const defaultFetchState = {
   pending: false,