feat: added warning for unreachable server (#43576)

* feat: added warning for unreachable server

* fix: update initial state in test file

* fix: make offline warning scroll with page

* adjust z-indexes for warning banners

* add hyperlink for offline warning

client/src/redux/action-types.js

@@ -12,6 +12,7 @@ export const actionTypes = createTypes(
     'preventProgressDonationRequests',
     'openDonationModal',
     'onlineStatusChange',
+    'serverStatusChange',
     'resetUserData',
     'tryToShowDonationModal',
     'executeGA',

client/src/redux/failed-updates-epic.js

@@ -15,7 +15,11 @@ import { backEndProject } from '../../utils/challenge-types';
 import { isGoodXHRStatus } from '../templates/Challenges/utils';
 import postUpdate$ from '../templates/Challenges/utils/postUpdate$';
 import { actionTypes } from './action-types';
-import { onlineStatusChange, isOnlineSelector, isSignedInSelector } from './';
+import {
+  serverStatusChange,
+  isServerOnlineSelector,
+  isSignedInSelector
+} from './';
 
 const key = 'fcc-failed-updates';
 
@@ -37,14 +41,14 @@ function failedUpdateEpic(action$, state$) {
         store.set(key, [...failures, payload]);
       }
     }),
-    map(() => onlineStatusChange(false))
+    map(() => serverStatusChange(false))
   );
 
   const flushUpdates = action$.pipe(
     ofType(actionTypes.fetchUserComplete, actionTypes.updateComplete),
     filter(() => isSignedInSelector(state$.value)),
     filter(() => store.get(key)),
-    filter(() => isOnlineSelector(state$.value)),
+    filter(() => isServerOnlineSelector(state$.value)),
     tap(() => {
       let failures = store.get(key) || [];
 

client/src/redux/failed-updates-epic.test.js

@@ -27,6 +27,7 @@ describe('failed-updates-epic', () => {
 const initialState = {
   app: {
     isOnline: true,
+    isServerOnline: true,
     appUsername: 'developmentuser'
   }
 };

client/src/redux/index.js

@@ -60,6 +60,7 @@ const initialState = {
   sessionMeta: { activeDonations: 0 },
   showDonationModal: false,
   isOnline: true,
+  isServerOnline: true,
   donationFormState: {
     ...defaultDonationFormState
   }
@@ -102,6 +103,7 @@ export const updateDonationFormState = createAction(
 );
 
 export const onlineStatusChange = createAction(actionTypes.onlineStatusChange);
+export const serverStatusChange = createAction(actionTypes.serverStatusChange);
 
 // TODO: re-evaluate this since /internal is no longer used.
 // `hardGoTo` is used to hit the API server directly
@@ -189,6 +191,7 @@ export const stepsToClaimSelector = state => {
 };
 export const isDonatingSelector = state => userSelector(state).isDonating;
 export const isOnlineSelector = state => state[ns].isOnline;
+export const isServerOnlineSelector = state => state[ns].isServerOnline;
 export const isSignedInSelector = state => !!state[ns].appUsername;
 export const isDonationModalOpenSelector = state => state[ns].showDonationModal;
 export const recentlyClaimedBlockSelector = state =>
@@ -553,6 +556,10 @@ export const reducer = handleActions(
       ...state,
       isOnline
     }),
+    [actionTypes.serverStatusChange]: (state, { payload: isServerOnline }) => ({
+      ...state,
+      isServerOnline
+    }),
     [actionTypes.closeDonationModal]: state => ({
       ...state,
       showDonationModal: false

client/src/redux/update-complete-epic.js

@@ -2,12 +2,12 @@ import { ofType } from 'redux-observable';
 import { mapTo, filter } from 'rxjs/operators';
 
 import { actionTypes as types } from './action-types';
-import { onlineStatusChange, isOnlineSelector } from './';
+import { serverStatusChange, isServerOnlineSelector } from './';
 
 export default function updateCompleteEpic(action$, state$) {
   return action$.pipe(
     ofType(types.updateComplete),
-    filter(() => !isOnlineSelector(state$.value)),
-    mapTo(onlineStatusChange(true))
+    filter(() => !isServerOnlineSelector(state$.value)),
+    mapTo(serverStatusChange(true))
   );
 }