Use a generic setMonitorState action so other monitors can impleemnt other logic

Author: gaearon

src/devTools.js

@@ -6,8 +6,7 @@ const ActionTypes = {
   SWEEP: 'SWEEP',
   TOGGLE_ACTION: 'TOGGLE_ACTION',
   JUMP_TO_STATE: 'JUMP_TO_STATE',
-  HIDE: 'HIDE',
-  SHOW: 'SHOW'
+  SET_MONITOR_STATE: 'SET_MONITOR_STATE'
 };
 
 const INIT_ACTION = {
@@ -133,21 +132,13 @@ function liftReducer(reducer, initialState) {
       currentStateIndex = Math.max(currentStateIndex, stagedActions.length - 1);
       break;
     case ActionTypes.PERFORM_ACTION:
-      const { action } = liftedAction;
       if (currentStateIndex === stagedActions.length - 1) {
         currentStateIndex++;
       }
-      stagedActions = [...stagedActions, action];
+      stagedActions = [...stagedActions, liftedAction.action];
       break;
-    case ActionTypes.HIDE:
-      monitorState = {
-        isVisible: false
-      };
-      break;
-    case ActionTypes.SHOW:
-      monitorState = {
-        isVisible: true
-      };
+    case ActionTypes.SET_MONITOR_STATE:
+      monitorState = liftedAction.monitorState;
       break;
     default:
       break;
@@ -227,17 +218,14 @@ export const ActionCreators = {
   sweep() {
     return { type: ActionTypes.SWEEP };
   },
-  show() {
-    return { type: ActionTypes.SHOW };
-  },
-  hide() {
-    return { type: ActionTypes.HIDE };
-  },
   toggleAction(index) {
     return { type: ActionTypes.TOGGLE_ACTION, index };
   },
   jumpToState(index) {
     return { type: ActionTypes.JUMP_TO_STATE, index };
+  },
+  setMonitorState(monitorState) {
+    return { type: ActionTypes.SET_MONITOR_STATE, monitorState };
   }
 };
 

src/react/LogMonitor.js

@@ -13,18 +13,18 @@ export default class LogMonitor {
     stagedActions: PropTypes.array.isRequired,
     skippedActions: PropTypes.object.isRequired,
     reset: PropTypes.func.isRequired,
-    hide: PropTypes.func.isRequired,
-    show: PropTypes.func.isRequired,
     commit: PropTypes.func.isRequired,
     rollback: PropTypes.func.isRequired,
     sweep: PropTypes.func.isRequired,
     toggleAction: PropTypes.func.isRequired,
     jumpToState: PropTypes.func.isRequired,
+    setMonitorState: PropTypes.func.isRequired,
     select: PropTypes.func.isRequired
   };
 
   static defaultProps = {
-    select: (state) => state
+    select: (state) => state,
+    monitorState: { isVisible: true }
   };
 
   componentWillReceiveProps(nextProps) {
@@ -81,15 +81,14 @@ export default class LogMonitor {
   }
 
   handleKeyPress(event) {
-    let { isVisible } = this.props.monitorState;
+    const { monitorState } = this.props;
 
-    if (event.ctrlKey && event.keyCode === 72) {
+    if (event.ctrlKey && event.keyCode === 72) { // Ctrl+H
       event.preventDefault();
-      if (isVisible) {
-        this.props.hide();
-      } else {
-        this.props.show();
-      }
+      this.props.setMonitorState({
+        ...monitorState,
+        isVisible: !monitorState.isVisible
+      });
     }
   }