From b4f2958ddaa0828403f8f75ac451f246c93f102e Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Thu, 6 Jan 2022 22:27:50 -0600 Subject: [PATCH] Fix usage of filtered actions with slider-monitor (#983) * Use jumpToAction instead of jumpToState * Jumping to action is time traveling * Fix bad null check * Fix types * Fix JUMP_TO_ACTION handling * Use indexOf --- extension/src/app/service/Monitor.ts | 3 +- .../redux-devtools-app/src/actions/index.ts | 2 -- .../src/reducers/instances.ts | 8 ++--- .../src/SliderMonitor.tsx | 35 +++++++++++++------ 4 files changed, 30 insertions(+), 18 deletions(-) diff --git a/extension/src/app/service/Monitor.ts b/extension/src/app/service/Monitor.ts index a3d0dd33..acdb6bff 100644 --- a/extension/src/app/service/Monitor.ts +++ b/extension/src/app/service/Monitor.ts @@ -51,7 +51,8 @@ export default class Monitor> { this.lastAction && /^@@redux\/(INIT|REPLACE)/.test(this.lastAction); isMonitorAction = () => this.lastAction && this.lastAction !== 'PERFORM_ACTION'; - isTimeTraveling = () => this.lastAction === 'JUMP_TO_STATE'; + isTimeTraveling = () => + this.lastAction === 'JUMP_TO_STATE' || this.lastAction === 'JUMP_TO_ACTION'; isPaused = () => { if (this.paused) { if (this.lastAction !== 'BLOCKED') { diff --git a/packages/redux-devtools-app/src/actions/index.ts b/packages/redux-devtools-app/src/actions/index.ts index 9611a447..fd6128d6 100644 --- a/packages/redux-devtools-app/src/actions/index.ts +++ b/packages/redux-devtools-app/src/actions/index.ts @@ -104,11 +104,9 @@ export interface MonitorActionAction { export interface JumpToStateAction { type: 'JUMP_TO_STATE'; index: number; - actionId: number; } export interface JumpToActionAction { type: 'JUMP_TO_ACTION'; - index: number; actionId: number; } export interface PauseRecordingAction { diff --git a/packages/redux-devtools-app/src/reducers/instances.ts b/packages/redux-devtools-app/src/reducers/instances.ts index e516c549..521e1928 100644 --- a/packages/redux-devtools-app/src/reducers/instances.ts +++ b/packages/redux-devtools-app/src/reducers/instances.ts @@ -217,10 +217,10 @@ export function dispatchAction( if (action.type === 'JUMP_TO_STATE' || action.type === 'JUMP_TO_ACTION') { const id = state.selected || state.current; const liftedState = state.states[id]; - let currentStateIndex = action.index; - if (typeof currentStateIndex === 'undefined' && action.actionId) { - currentStateIndex = liftedState.stagedActionIds.indexOf(action.actionId); - } + const currentStateIndex = + action.type === 'JUMP_TO_STATE' + ? action.index + : liftedState.stagedActionIds.indexOf(action.actionId); return { ...state, states: { diff --git a/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx b/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx index d78c5b9b..9e8e7c52 100644 --- a/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx +++ b/packages/redux-devtools-slider-monitor/src/SliderMonitor.tsx @@ -17,7 +17,7 @@ import reducer from './reducers'; import SliderButton from './SliderButton'; // eslint-disable-next-line @typescript-eslint/unbound-method -const { reset, jumpToState } = ActionCreators; +const { reset, jumpToAction } = ActionCreators; interface ExternalProps> { // eslint-disable-next-line @typescript-eslint/ban-types @@ -151,11 +151,12 @@ class SliderMonitor> extends (PureComponent || this.pauseReplay(); } - this.props.dispatch(jumpToState(value)); + this.props.dispatch(jumpToAction(this.props.stagedActionIds[value])); }; startReplay = () => { - const { computedStates, currentStateIndex, dispatch } = this.props; + const { computedStates, currentStateIndex, dispatch, stagedActionIds } = + this.props; if (computedStates.length < 2) { return; @@ -164,20 +165,20 @@ class SliderMonitor> extends (PureComponent || let stateIndex; if (currentStateIndex === computedStates.length - 1) { - dispatch(jumpToState(0)); + dispatch(jumpToAction(stagedActionIds[0])); stateIndex = 0; } else if (currentStateIndex === computedStates.length - 2) { - dispatch(jumpToState(currentStateIndex + 1)); + dispatch(jumpToAction(stagedActionIds[currentStateIndex + 1])); return; } else { stateIndex = currentStateIndex + 1; - dispatch(jumpToState(currentStateIndex + 1)); + dispatch(jumpToAction(stagedActionIds[currentStateIndex + 1])); } let counter = stateIndex; const timer = window.setInterval(() => { if (counter + 1 <= computedStates.length - 1) { - dispatch(jumpToState(counter + 1)); + dispatch(jumpToAction(stagedActionIds[counter + 1])); } counter += 1; @@ -198,7 +199,7 @@ class SliderMonitor> extends (PureComponent || } if (this.props.currentStateIndex === this.props.computedStates.length - 1) { - this.props.dispatch(jumpToState(0)); + this.props.dispatch(jumpToAction(this.props.stagedActionIds[0])); this.loop(0); } else { @@ -213,7 +214,11 @@ class SliderMonitor> extends (PureComponent || const aLoop = () => { const replayDiff = Date.now() - currentTimestamp; if (replayDiff >= timestampDiff) { - this.props.dispatch(jumpToState(this.props.currentStateIndex + 1)); + this.props.dispatch( + jumpToAction( + this.props.stagedActionIds[this.props.currentStateIndex + 1] + ) + ); if ( this.props.currentStateIndex >= @@ -275,7 +280,11 @@ class SliderMonitor> extends (PureComponent || this.pauseReplay(); if (this.props.currentStateIndex !== 0) { - this.props.dispatch(jumpToState(this.props.currentStateIndex - 1)); + this.props.dispatch( + jumpToAction( + this.props.stagedActionIds[this.props.currentStateIndex - 1] + ) + ); } }; @@ -283,7 +292,11 @@ class SliderMonitor> extends (PureComponent || this.pauseReplay(); if (this.props.currentStateIndex !== this.props.computedStates.length - 1) { - this.props.dispatch(jumpToState(this.props.currentStateIndex + 1)); + this.props.dispatch( + jumpToAction( + this.props.stagedActionIds[this.props.currentStateIndex + 1] + ) + ); } };