Jump to state

Author: zalmoxisus

src/ActionList.jsx

@@ -38,7 +38,7 @@ export default class ActionList extends Component {
   render() {
     const { styling, actions, actionIds, isWideLayout, onToggleAction, skippedActionIds,
             selectedActionId, startActionId, onSelect, onSearch, searchValue, currentActionId,
-            onCommit, onSweep } = this.props;
+            onCommit, onSweep, onJumpToState } = this.props;
     const lowerSearchValue = searchValue && searchValue.toLowerCase();
     const filteredActionIds = searchValue ? actionIds.filter(
       id => actions[id].action.type.toLowerCase().indexOf(lowerSearchValue) !== -1
@@ -67,7 +67,8 @@ export default class ActionList extends Component {
                            onSelect={(e) => onSelect(e, actionId)}
                            timestamps={getTimestamps(actions, actionIds, actionId)}
                            action={actions[actionId].action}
-                           onViewClick={() => onToggleAction(actionId)}
+                           onToggleClick={() => onToggleAction(actionId)}
+                           onJumpClick={() => onJumpToState(actionId)}
                            onCommitClick={() => onCommit(actionId)}
                            isSkipped={skippedActionIds.indexOf(actionId) !== -1} />
           )}

src/ActionListRow.jsx

@@ -4,6 +4,7 @@ import dateformat from 'dateformat';
 import RightSlider from './RightSlider';
 
 const BUTTON_SKIP = 'Skip';
+const BUTTON_JUMP = 'Jump';
 
 export default class ActionListRow extends Component {
   state = { hover: false };
@@ -64,7 +65,7 @@ export default class ActionListRow extends Component {
           </RightSlider>
           <RightSlider styling={styling} shown={showButtons} rotate>
             <div {...styling('actionListItemSelector')}>
-              {[BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
+              {[BUTTON_JUMP, BUTTON_SKIP].map(btn => (!isInitAction || btn !== BUTTON_SKIP) &&
                 <div key={btn}
                      onClick={this.handleButtonClick.bind(this, btn)}
                      {...styling([
@@ -86,7 +87,10 @@ export default class ActionListRow extends Component {
 
     switch(btn) {
     case BUTTON_SKIP:
-      this.props.onViewClick();
+      this.props.onToggleClick();
+      break;
+    case BUTTON_JUMP:
+      this.props.onJumpClick();
       break;
     }
   }

src/DevtoolsInspector.js

@@ -9,7 +9,7 @@ import { getBase16Theme } from 'react-base16-styling';
 import { reducer, updateMonitorState } from './redux';
 import { ActionCreators } from 'redux-devtools';
 
-const { commit, sweep, toggleAction } = ActionCreators;
+const { commit, sweep, toggleAction, jumpToState } = ActionCreators;
 
 function getLastActionId(props) {
   return props.stagedActionIds[props.stagedActionIds.length - 1];
@@ -168,6 +168,7 @@ export default class DevtoolsInspector extends Component {
                     onSearch={this.handleSearch}
                     onSelect={this.handleSelectAction}
                     onToggleAction={this.handleToggleAction}
+                    onJumpToState={this.handleJumpToState}
                     onCommit={this.handleCommit}
                     onSweep={this.handleSweep}
                     skippedActionIds={skippedActionIds}
@@ -189,6 +190,11 @@ export default class DevtoolsInspector extends Component {
     this.props.dispatch(toggleAction(actionId));
   };
 
+  handleJumpToState = actionId => {
+    const index = this.props.stagedActionIds.indexOf(actionId);
+    if (index > 0) this.props.dispatch(jumpToState(index));
+  };
+
   handleCommit = () => {
     this.props.dispatch(commit());
   };