Implement control mechanism for queue release

src/components/NetworkConnectivity.js

@@ -56,7 +56,7 @@ function validateProps(props: Props) {
     throw new Error('httpMethod parameter should be either HEAD or OPTIONS');
   }
 }
-
+/* eslint-disable react/default-props-match-prop-types */
 class NetworkConnectivity extends React.PureComponent<Props, State> {
   static defaultProps = {
     onConnectivityChange: () => undefined,

src/index.js

@@ -20,6 +20,9 @@ module.exports = {
   get offlineActionTypes() {
     return require('./redux/actionTypes').default;
   },
+  get offlineActionCreators() {
+    return require('./redux/actionCreators').default;
+  },
   get networkSaga() {
     return require('./redux/sagas').default;
   },

src/redux/actionCreators.js

@@ -6,6 +6,8 @@ import type {
   FluxActionWithPreviousIntent,
   FluxActionForRemoval,
   FluxActionForDismissal,
+  FluxActionForChangeQueueSemaphore,
+  SemaphoreColor,
 } from '../types';
 
 type EnqueuedAction = FluxAction | Function;
@@ -53,3 +55,18 @@ export const dismissActionsFromQueue = (
   type: actionTypes.DISMISS_ACTIONS_FROM_QUEUE,
   payload: actionTrigger,
 });
+
+export const changeQueueSemaphore = (
+  semaphoreColor: SemaphoreColor,
+): FluxActionForChangeQueueSemaphore => ({
+  type: actionTypes.CHANGE_QUEUE_SEMAPHORE,
+  payload: semaphoreColor,
+});
+
+export default {
+  changeQueueSemaphore,
+  dismissActionsFromQueue,
+  removeActionFromQueue,
+  fetchOfflineMode,
+  connectionChange,
+};

src/redux/actionTypes.js

@@ -5,6 +5,7 @@ type ActionTypes = {|
   FETCH_OFFLINE_MODE: '@@network-connectivity/FETCH_OFFLINE_MODE',
   REMOVE_FROM_ACTION_QUEUE: '@@network-connectivity/REMOVE_FROM_ACTION_QUEUE',
   DISMISS_ACTIONS_FROM_QUEUE: '@@network-connectivity/DISMISS_ACTIONS_FROM_QUEUE',
+  CHANGE_QUEUE_SEMAPHORE: '@@network-connectivity/CHANGE_QUEUE_SEMAPHORE',
 |};
 
 const actionTypes: ActionTypes = {
@@ -13,6 +14,7 @@ const actionTypes: ActionTypes = {
   REMOVE_FROM_ACTION_QUEUE: '@@network-connectivity/REMOVE_FROM_ACTION_QUEUE',
   DISMISS_ACTIONS_FROM_QUEUE:
     '@@network-connectivity/DISMISS_ACTIONS_FROM_QUEUE',
+  CHANGE_QUEUE_SEMAPHORE: '@@network-connectivity/CHANGE_QUEUE_SEMAPHORE',
 };
 
 export default actionTypes;

src/redux/createNetworkMiddleware.js

@@ -23,6 +23,7 @@ type Arguments = {|
   regexActionType: RegExp,
   actionTypes: Array<string>,
   queueReleaseThrottle: number,
+  shouldDequeueSelector: (state: State) => boolean,
 |};
 
 function validateParams(regexActionType, actionTypes) {
@@ -70,11 +71,19 @@ function didComeBackOnline(action, wasConnected) {
   );
 }
 
+function didQueueResume(action, isQueuePaused) {
+  return (
+    action.type === networkActionTypes.CHANGE_QUEUE_SEMAPHORE &&
+    !isQueuePaused &&
+    action.payload === 'GREEN'
+  );
+}
+
 export const createReleaseQueue = (getState, next, delay) => async queue => {
   // eslint-disable-next-line
   for (const action of queue) {
-    const { isConnected } = getState().network;
-    if (isConnected) {
+    const { isConnected, isQueuePaused } = getState().network;
+    if (isConnected && !isQueuePaused) {
       next(removeActionFromQueue(action));
       next(action);
       // eslint-disable-next-line
@@ -89,11 +98,12 @@ function createNetworkMiddleware({
   regexActionType = /FETCH.*REQUEST/,
   actionTypes = [],
   queueReleaseThrottle = 50,
+  shouldDequeueSelector = () => true,
 }: Arguments = {}) {
   return ({ getState }: MiddlewareAPI<State>) => (
     next: (action: any) => void,
   ) => (action: any) => {
-    const { isConnected, actionQueue } = getState().network;
+    const { isConnected, actionQueue, isQueuePaused } = getState().network;
     const releaseQueue = createReleaseQueue(
       getState,
       next,
@@ -114,7 +124,14 @@ function createNetworkMiddleware({
     }
 
     const isBackOnline = didComeBackOnline(action, isConnected);
-    if (isBackOnline) {
+    const hasQueueBeenResumed = didQueueResume(action, isQueuePaused);
+
+    const shouldDequeue =
+      isConnected &&
+      (isBackOnline || hasQueueBeenResumed) &&
+      shouldDequeueSelector(getState());
+
+    if (shouldDequeue) {
       // Dispatching queued actions in order of arrival (if we have any)
       next(action);
       return releaseQueue(actionQueue);

src/redux/createReducer.js

@@ -8,11 +8,13 @@ import type {
   FluxActionWithPreviousIntent,
   FluxActionForRemoval,
   NetworkState,
+  SemaphoreColor,
 } from '../types';
 
 export const initialState = {
   isConnected: true,
   actionQueue: [],
+  isQueuePaused: false,
 };
 
 function handleOfflineAction(
@@ -81,8 +83,20 @@ function handleDismissActionsFromQueue(
   };
 }
 
+function handleChangeQueueSemaphore(
+  state: NetworkState,
+  semaphoreColor: SemaphoreColor,
+): NetworkState {
+  return {
+    ...state,
+    isQueuePaused: semaphoreColor === 'RED',
+  };
+}
+
 export default (comparisonFn: Function = getSimilarActionInQueue) => (
-  state: NetworkState = initialState,
+  state: NetworkState = {
+    ...initialState,
+  },
   action: *,
 ): NetworkState => {
   switch (action.type) {
@@ -97,6 +111,8 @@ export default (comparisonFn: Function = getSimilarActionInQueue) => (
       return handleRemoveActionFromQueue(state, action.payload);
     case actionTypes.DISMISS_ACTIONS_FROM_QUEUE:
       return handleDismissActionsFromQueue(state, action.payload);
+    case actionTypes.CHANGE_QUEUE_SEMAPHORE:
+      return handleChangeQueueSemaphore(state, action.payload);
     default:
       return state;
   }

src/types.js

@@ -4,6 +4,8 @@ export type State = {
   isConnected: boolean,
 };
 
+export type SemaphoreColor = 'RED' | 'GREEN';
+
 export type FluxAction = {
   type: string,
   payload: any,
@@ -35,9 +37,15 @@ export type FluxActionForDismissal = {
   payload: string,
 };
 
+export type FluxActionForChangeQueueSemaphore = {
+  type: string,
+  payload: SemaphoreColor,
+};
+
 export type NetworkState = {
   isConnected: boolean,
   actionQueue: Array<*>,
+  isQueuePaused: boolean,
 };
 
 export type HTTPMethod = 'HEAD' | 'OPTIONS';

test/createNetworkMiddleware.test.js

@@ -5,7 +5,6 @@ import createNetworkMiddleware, {
   createReleaseQueue,
 } from '../src/redux/createNetworkMiddleware';
 import * as actionCreators from '../src/redux/actionCreators';
-import { removeActionFromQueue } from '../src/redux/actionCreators';
 import wait from '../src/utils/wait';
 
 const getFetchAction = type => ({
@@ -378,14 +377,16 @@ describe('createReleaseQueue', () => {
   const mockGetState = jest.fn().mockImplementation(() => ({
     network: {
       isConnected: true,
+      isQueuePaused: false,
     },
   }));
   const mockDelay = 50;
   afterEach(() => {
     mockDispatch.mockClear();
     mockGetState.mockClear();
   });
-  it('empties the queue if we are online', async () => {
+
+  it('empties the queue if we are online and queue is not halted', async () => {
     const releaseQueue = createReleaseQueue(
       mockGetState,
       mockDispatch,
@@ -396,12 +397,35 @@ describe('createReleaseQueue', () => {
     expect(mockDispatch).toHaveBeenCalledTimes(4);
     expect(mockDispatch).toHaveBeenNthCalledWith(
       1,
-      removeActionFromQueue('foo'),
+      actionCreators.removeActionFromQueue('foo'),
     );
     expect(mockDispatch).toHaveBeenNthCalledWith(2, 'foo');
     expect(mockDispatch).toHaveBeenNthCalledWith(
       3,
-      removeActionFromQueue('bar'),
+      actionCreators.removeActionFromQueue('bar'),
+    );
+    expect(mockDispatch).toHaveBeenNthCalledWith(4, 'bar');
+  });
+
+  it('does not empty the queue if we are online and dequeue selector returns false', async () => {
+    const mockDequeueSelector = () => false;
+    const releaseQueue = createReleaseQueue(
+      mockGetState,
+      mockDispatch,
+      mockDelay,
+      mockDequeueSelector,
+    );
+    const actionQueue = ['foo', 'bar'];
+    await releaseQueue(actionQueue);
+    expect(mockDispatch).toHaveBeenCalledTimes(4);
+    expect(mockDispatch).toHaveBeenNthCalledWith(
+      1,
+      actionCreators.removeActionFromQueue('foo'),
+    );
+    expect(mockDispatch).toHaveBeenNthCalledWith(2, 'foo');
+    expect(mockDispatch).toHaveBeenNthCalledWith(
+      3,
+      actionCreators.removeActionFromQueue('bar'),
     );
     expect(mockDispatch).toHaveBeenNthCalledWith(4, 'bar');
   });
@@ -427,10 +451,31 @@ describe('createReleaseQueue', () => {
     expect(mockDispatch).toHaveBeenCalledTimes(2);
     expect(mockDispatch).toHaveBeenNthCalledWith(
       1,
-      removeActionFromQueue('foo'),
+      actionCreators.removeActionFromQueue('foo'),
     );
     expect(mockDispatch).toHaveBeenNthCalledWith(2, 'foo');
   });
+
+  it('should stop dispatching if queue has been halted', async () => {
+    const haltQueue = () =>
+      new Promise(async resolve => {
+        await wait(30);
+        mockGetState.mockImplementation(() => ({
+          network: {
+            isQueuePaused: true,
+          },
+        }));
+        resolve();
+      });
+    const releaseQueue = createReleaseQueue(
+      mockGetState,
+      mockDispatch,
+      mockDelay,
+    );
+    const actionQueue = ['foo', 'bar'];
+    await Promise.all([releaseQueue(actionQueue), haltQueue()]);
+    expect(mockDispatch).toHaveBeenCalledTimes(0);
+  });
 });
 
 describe('createNetworkMiddleware with wrong type params', () => {

test/reducer.test.js

@@ -12,6 +12,7 @@ const networkReducer = createReducer();
 const getState = (isConnected = false, ...actionQueue) => ({
   isConnected,
   actionQueue,
+  isQueuePaused: false,
 });
 
 /** Actions used from now on to test different scenarios */
@@ -63,6 +64,7 @@ describe('CONNECTION_CHANGE action type', () => {
     expect(networkReducer(initialState, mockAction)).toEqual({
       isConnected: false,
       actionQueue: [],
+      isQueuePaused: false,
     });
   });
 });
@@ -106,6 +108,7 @@ describe('OFFLINE_ACTION action type', () => {
         expect(nextState).toEqual({
           isConnected: false,
           actionQueue: [prevActionToRetry1],
+          isQueuePaused: false,
         });
 
         const action2 = actionCreators.fetchOfflineMode(prevActionToRetry2);
@@ -236,6 +239,26 @@ describe('REMOVE_ACTION_FROM_QUEUE action type', () => {
   });
 });
 
+describe('QUEUE_SEMAPHORE_CHANGE action type', () => {
+  it('Pauses the queue if semaphore is red', () => {
+    expect(
+      networkReducer(undefined, actionCreators.changeQueueSemaphore('RED')),
+    ).toEqual({
+      ...initialState,
+      isQueuePaused: true,
+    });
+  });
+
+  it('Resumes the queue if semaphore is green', () => {
+    expect(
+      networkReducer(undefined, actionCreators.changeQueueSemaphore('GREEN')),
+    ).toEqual({
+      ...initialState,
+      isQueuePaused: false,
+    });
+  });
+});
+
 describe('thunks', () => {
   function fetchThunk(dispatch) {
     dispatch({ type: 'FETCH_DATA_REQUEST' });
@@ -383,3 +406,11 @@ describe('networkSelector', () => {
     });
   });
 });
+
+describe('network reducer config', () => {
+  it('has isQueuePaused set to false by default', () => {
+    expect(networkReducer(undefined, { type: 'ACTION_I_DONT_CARE' })).toEqual(
+      initialState,
+    );
+  });
+});