removed TextArea component and replaced with prompts

src/devTools.js

@@ -3,8 +3,7 @@ const ActionTypes = {
   RESET: 'RESET',
   ROLLBACK: 'ROLLBACK',
   COMMIT: 'COMMIT',
-  EXPORT: 'EXPORT',
-  IMPORT: 'IMPORT',
+  IMPORT_STATE: 'IMPORT_STATE',
   SWEEP: 'SWEEP',
   TOGGLE_ACTION: 'TOGGLE_ACTION',
   JUMP_TO_STATE: 'JUMP_TO_STATE',
@@ -88,8 +87,7 @@ function liftReducer(reducer, initialState) {
     skippedActions: {},
     currentStateIndex: 0,
     monitorState: {
-      isVisible: true,
-      exportMode: false
+      isVisible: true
     },
     timestamps: [Date.now()]
   };
@@ -124,24 +122,15 @@ function liftReducer(reducer, initialState) {
       currentStateIndex = 0;
       timestamps = [liftedAction.timestamp];
       break;
-    case ActionTypes.EXPORT:
-      monitorState = Object.assign(
-        {},
+    case ActionTypes.IMPORT_STATE:
+      ({
+        stagedActions,
+        skippedActions,
+        computedStates,
+        currentStateIndex,
         monitorState,
-        { exportMode: !monitorState.exportMode }
-      );
-      break;
-    case ActionTypes.IMPORT:
-      (
-        {
-          stagedActions,
-          skippedActions,
-          computedStates,
-          currentStateIndex,
-          monitorState,
-          timestamps
-        } = liftedAction.newState
-      );
+        timestamps
+      } = liftedAction.nextLiftedState);
       break;
     case ActionTypes.ROLLBACK:
       stagedActions = [INIT_ACTION];
@@ -280,11 +269,8 @@ export const ActionCreators = {
   commit() {
     return { type: ActionTypes.COMMIT, timestamp: Date.now() };
   },
-  export() {
-    return { type: ActionTypes.EXPORT };
-  },
-  import(newState) {
-    return { type: ActionTypes.IMPORT, newState };
+  importState(nextLiftedState) {
+    return { type: ActionTypes.IMPORT_STATE, nextLiftedState };
   },
   sweep() {
     return { type: ActionTypes.SWEEP };

src/react/LogMonitor.js

@@ -1,12 +1,9 @@
+/* eslint-disable no-alert */
 import React, { PropTypes, findDOMNode, Component } from 'react';
 import LogMonitorEntry from './LogMonitorEntry';
 import LogMonitorButton from './LogMonitorButton';
-import LogMonitorTextarea from './LogMonitorTextarea';
 import * as themes from './themes';
 
-const EXPORT_CONTAINER_HEIGHT = 150;
-const ELEMENTS_CONTAINER_TOP = 38;
-
 const styles = {
   container: {
     fontFamily: 'monaco, Consolas, Lucida Console, monospace',
@@ -29,7 +26,7 @@ const styles = {
     position: 'absolute',
     left: 0,
     right: 0,
-    top: ELEMENTS_CONTAINER_TOP,
+    top: 38,
     bottom: 0,
     overflowX: 'hidden',
     overflowY: 'auto'
@@ -123,11 +120,18 @@ export default class LogMonitor extends Component {
   }
 
   handleExport() {
-    this.props.export();
+    window.prompt('Current state\'s schema', JSON.stringify(this.props.store.getState()));
   }
 
-  handleImport(newState) {
-    this.props.import(newState);
+  handleImport() {
+    try {
+      let nextLiftedState = window.prompt('Please paste a valid action log');
+      if (nextLiftedState) {
+        this.props.importState(JSON.parse(nextLiftedState));
+      }
+    } catch (err) {
+      console.warn('There was an error parsing the new state. Please enter a valid schema.');
+    }
   }
 
   handleToggleAction(index) {
@@ -196,13 +200,14 @@ export default class LogMonitor extends Component {
           <LogMonitorButton theme={theme} onClick={::this.handleRollback} enabled={computedStates.length}>Revert</LogMonitorButton>
           <LogMonitorButton theme={theme} onClick={::this.handleSweep} enabled={Object.keys(skippedActions).some(key => skippedActions[key])}>Sweep</LogMonitorButton>
           <LogMonitorButton theme={theme} onClick={::this.handleCommit} enabled={computedStates.length > 1}>Commit</LogMonitorButton>
+          <LogMonitorButton theme={theme} onClick={::this.handleImport} enabled={true}>Import</LogMonitorButton>
           <LogMonitorButton theme={theme} onClick={::this.handleExport} enabled={computedStates.length}>Export</LogMonitorButton>
         </div>
-        <LogMonitorTextarea theme={theme} handleImport={::this.handleImport} currentState={this.props.store.getState()} />
-        <div style={{...styles.elements, top: monitorState.exportMode ? EXPORT_CONTAINER_HEIGHT : ELEMENTS_CONTAINER_TOP }} ref="elements">
+        <div style={styles.elements} ref="elements">
           {elements}
         </div>
       </div>
     );
   }
 }
+/* eslint-enable no-alert */

src/react/LogMonitorTextarea.js

@@ -1,42 +0,0 @@
-import React, { PropTypes, findDOMNode, Component } from 'react';
-
-const EXPORT_CONTAINER_HEIGHT = 150;
-const ELEMENTS_CONTAINER_TOP = 38;
-
-var styles = {
-  exportContainer: {
-    width: '100%',
-    height: EXPORT_CONTAINER_HEIGHT
-  },
-  exportArea: {
-    position: 'relative',
-    resize: 'none',
-    width: '100%',
-    height: 112,
-    backgroundColor: '#4F5A66',
-    color: 'white'
-  }
-};
-
-export default class LogMonitorTextarea extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  parseInput(event) {
-    try {
-      this.props.handleImport(JSON.parse(event.target.value))
-    } catch(err) {
-      console.warn('There was an error parsing the new state. Please enter a valid schema.');
-    }
-  }
-
-  render() {
-    let { handleImport, currentState, theme } = this.props;
-    return currentState.monitorState.exportMode ? (
-      <div style={{...styles.exportContainer, backgroundColor: theme.base00}}>
-        <textarea style={styles.exportArea} value={JSON.stringify(currentState)} onChange={::this.parseInput} />
-      </div>
-    ) : null;
-  }
-}