feat(events): Add toggleAnnotationMode events (#522)

* feat(events): Add toggleAnnotationMode events

* Add middleware handler that will emit an `annotations_mode_change` when toggleAnnotationMode is dispatched.

* feat(events): Add toggleAnnotationMode events

* Update test description

* feat(events): Add toggleAnnotationMode events

* Addressing PR Feedback

* feat(events): Add toggleAnnotationMode events

* Add object around emitted nextState item

Author: mickr

src/@types/events.ts

@@ -3,8 +3,9 @@ enum Event {
     ACTIVE_SET = 'annotations_active_set',
     ANNOTATION_CREATE = 'annotations_create',
     ANNOTATION_FETCH_ERROR = 'annotations_fetch_error',
-    ANNOTATIONS_INITIALIZED = 'annotations_initialized',
     ANNOTATION_REMOVE = 'annotations_remove',
+    ANNOTATIONS_INITIALIZED = 'annotations_initialized',
+    ANNOTATIONS_MODE_CHANGE = 'annotations_mode_change',
     VISIBLE_SET = 'annotations_visible_set',
 }
 

src/store/eventing/__tests__/mode-test.ts

@@ -0,0 +1,19 @@
+import eventManager from '../../../common/EventManager';
+import { AppState } from '../../types';
+import { handleToggleAnnotationModeAction } from '../mode';
+
+jest.mock('../../../common/EventManager');
+
+describe('store/eventing/mode', () => {
+    test('should emit annotations_mode_change with the next mode when changing annotation modes.', () => {
+        const nextState = {
+            common: {
+                mode: 'region',
+            },
+        } as AppState;
+
+        handleToggleAnnotationModeAction({} as AppState, nextState);
+
+        expect(eventManager.emit).toBeCalledWith('annotations_mode_change', { mode: 'region' });
+    });
+});

src/store/eventing/middleware.ts

@@ -6,11 +6,13 @@ import {
     setActiveAnnotationIdAction,
     setIsInitialized,
 } from '../annotations/actions';
+import { EventHandlerMap } from './types';
 import { handleActiveAnnotationEvents } from './active';
+import { handleAnnotationsInitialized } from './init';
 import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccessEvents } from './create';
 import { handleFetchErrorEvents } from './fetch';
-import { handleAnnotationsInitialized } from './init';
-import { EventHandlerMap } from './types';
+import { handleToggleAnnotationModeAction } from './mode';
+import { toggleAnnotationModeAction } from '../common/actions';
 
 // Array of event handlers based on redux action. To add handling for new events add an entry keyed by action
 const eventHandlers: EventHandlerMap = {
@@ -20,6 +22,7 @@ const eventHandlers: EventHandlerMap = {
     [fetchAnnotationsAction.rejected.toString()]: handleFetchErrorEvents,
     [setActiveAnnotationIdAction.toString()]: handleActiveAnnotationEvents,
     [setIsInitialized.toString()]: handleAnnotationsInitialized,
+    [toggleAnnotationModeAction.toString()]: handleToggleAnnotationModeAction,
 };
 
 function getEventingMiddleware(handlers: EventHandlerMap = eventHandlers): Middleware {

src/store/eventing/mode.ts

@@ -0,0 +1,7 @@
+import eventManager from '../../common/EventManager';
+import { AppState } from '../types';
+import { Event } from '../../@types';
+
+export const handleToggleAnnotationModeAction = (prevState: AppState, nextState: AppState): void => {
+    eventManager.emit(Event.ANNOTATIONS_MODE_CHANGE, { mode: nextState.common.mode });
+};