From 370b5e6df3a56227260f41ab75a41507413a9458 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Mon, 6 Sep 2021 16:48:34 +0000 Subject: [PATCH] fix(extension): fix state persisting (#843) --- extension/src/app/middlewares/api.ts | 33 +++++++++++++++---- extension/src/app/middlewares/panelSync.ts | 3 +- extension/src/app/middlewares/windowSync.ts | 3 +- .../src/app/reducers/window/instances.ts | 3 ++ .../redux-devtools-app/src/actions/index.ts | 10 ++++++ .../src/components/buttons/PersistButton.tsx | 4 +-- .../src/constants/actionTypes.ts | 1 + .../src/reducers/instances.ts | 3 ++ 8 files changed, 50 insertions(+), 10 deletions(-) diff --git a/extension/src/app/middlewares/api.ts b/extension/src/app/middlewares/api.ts index ce36b002..f74b7181 100644 --- a/extension/src/app/middlewares/api.ts +++ b/extension/src/app/middlewares/api.ts @@ -3,6 +3,8 @@ import { UPDATE_STATE, REMOVE_INSTANCE, LIFTED_ACTION, + TOGGLE_PERSIST, + SET_PERSIST, } from '@redux-devtools/app/lib/constants/actionTypes'; import { nonReduxDispatch } from '@redux-devtools/app/lib/utils/monitorActions'; import syncOptions, { @@ -18,8 +20,9 @@ import { CustomAction, DispatchAction as AppDispatchAction, LibConfig, + SetPersistAction, } from '@redux-devtools/app/lib/actions'; -import { Action, Dispatch } from 'redux'; +import { Action, Dispatch, MiddlewareAPI } from 'redux'; import { ContentScriptToBackgroundMessage, SplitMessage, @@ -35,6 +38,7 @@ import { LiftedActionAction, } from '../stores/backgroundStore'; import { Position } from '../api/openWindow'; +import { BackgroundState } from '../reducers/background'; interface TabMessageBase { readonly type: string; @@ -183,8 +187,13 @@ export type TabMessage = export type PanelMessage> = | NAAction | ErrorMessage - | UpdateStateAction; -export type MonitorMessage = NAAction | ErrorMessage | EmptyUpdateStateAction; + | UpdateStateAction + | SetPersistAction; +export type MonitorMessage = + | NAAction + | ErrorMessage + | EmptyUpdateStateAction + | SetPersistAction; type TabPort = Omit & { postMessage: (message: TabMessage) => void; @@ -224,7 +233,8 @@ const getId = (sender: chrome.runtime.MessageSender, name?: string) => type MonitorAction> = | NAAction | ErrorMessage - | UpdateStateAction; + | UpdateStateAction + | SetPersistAction; function toMonitors>( action: MonitorAction, @@ -233,7 +243,9 @@ function toMonitors>( ) { Object.keys(connections.monitor).forEach((id) => { connections.monitor[id].postMessage( - verbose || action.type === 'ERROR' ? action : { type: UPDATE_STATE } + verbose || action.type === 'ERROR' || action.type === SET_PERSIST + ? action + : { type: UPDATE_STATE } ); }); Object.keys(connections.panel).forEach((id) => { @@ -582,9 +594,18 @@ declare global { window.syncOptions = syncOptions(toAllTabs); // Expose to the options page -export default function api() { +export default function api( + store: MiddlewareAPI, BackgroundState> +) { return (next: Dispatch) => (action: BackgroundAction) => { if (action.type === LIFTED_ACTION) toContentScript(action); + else if (action.type === TOGGLE_PERSIST) { + togglePersist(); + toMonitors({ + type: SET_PERSIST, + payload: !store.getState().instances.persisted, + }); + } return next(action); }; } diff --git a/extension/src/app/middlewares/panelSync.ts b/extension/src/app/middlewares/panelSync.ts index 558524c0..eb264802 100644 --- a/extension/src/app/middlewares/panelSync.ts +++ b/extension/src/app/middlewares/panelSync.ts @@ -2,6 +2,7 @@ import { LIFTED_ACTION, UPDATE_STATE, SELECT_INSTANCE, + TOGGLE_PERSIST, } from '@redux-devtools/app/lib/constants/actionTypes'; import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; import { Dispatch, MiddlewareAPI } from 'redux'; @@ -23,7 +24,7 @@ function panelDispatcher(bgConnection: chrome.runtime.Port) { next({ type: SELECT_INSTANCE, selected: connections[0] }); } } - if (action.type === LIFTED_ACTION) { + if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) { const instances = store.getState().instances; const instanceId = getActiveInstance(instances); const id = instances.options[instanceId].connectionId; diff --git a/extension/src/app/middlewares/windowSync.ts b/extension/src/app/middlewares/windowSync.ts index fb5cb549..6164f553 100644 --- a/extension/src/app/middlewares/windowSync.ts +++ b/extension/src/app/middlewares/windowSync.ts @@ -1,6 +1,7 @@ import { UPDATE_STATE, LIFTED_ACTION, + TOGGLE_PERSIST, } from '@redux-devtools/app/lib/constants/actionTypes'; import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; import { Dispatch, MiddlewareAPI, Store } from 'redux'; @@ -21,7 +22,7 @@ const syncStores = instances: baseStore.getState().instances, }); } - if (action.type === LIFTED_ACTION) { + if (action.type === LIFTED_ACTION || action.type === TOGGLE_PERSIST) { const instances = store.getState().instances; const instanceId = getActiveInstance(instances); const id = instances.options[instanceId].connectionId; diff --git a/extension/src/app/reducers/window/instances.ts b/extension/src/app/reducers/window/instances.ts index 1db1a6ec..0d75d233 100644 --- a/extension/src/app/reducers/window/instances.ts +++ b/extension/src/app/reducers/window/instances.ts @@ -6,6 +6,7 @@ import { UPDATE_STATE, SELECT_INSTANCE, LIFTED_ACTION, + SET_PERSIST, } from '@redux-devtools/app/lib/constants/actionTypes'; import { ExpandedUpdateStateAction, @@ -27,6 +28,8 @@ export default function instances( return state; case SELECT_INSTANCE: return { ...state, selected: action.selected }; + case SET_PERSIST: + return { ...state, persisted: action.payload }; default: return state; } diff --git a/packages/redux-devtools-app/src/actions/index.ts b/packages/redux-devtools-app/src/actions/index.ts index 071368a8..684d4c01 100644 --- a/packages/redux-devtools-app/src/actions/index.ts +++ b/packages/redux-devtools-app/src/actions/index.ts @@ -23,6 +23,7 @@ import { GET_REPORT_ERROR, GET_REPORT_SUCCESS, ERROR, + SET_PERSIST, } from '../constants/actionTypes'; import { AUTH_ERROR, @@ -302,6 +303,14 @@ export function togglePersist(): TogglePersistAction { return { type: TOGGLE_PERSIST }; } +export interface SetPersistAction { + type: typeof SET_PERSIST; + payload: boolean; +} +export function setPersist(persist: boolean): SetPersistAction { + return { type: SET_PERSIST, payload: persist }; +} + export interface ToggleSyncAction { type: typeof TOGGLE_SYNC; } @@ -561,6 +570,7 @@ export type StoreActionWithoutUpdateStateOrLiftedAction = | UpdateMonitorStateAction | ExportAction | TogglePersistAction + | SetPersistAction | ToggleSyncAction | ToggleSliderAction | ToggleDispatcherAction diff --git a/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx b/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx index e78349a5..bdf1ea2a 100644 --- a/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx +++ b/packages/redux-devtools-app/src/components/buttons/PersistButton.tsx @@ -26,8 +26,8 @@ class LockButton extends Component { mark={this.props.persisted && 'base0D'} title={ this.props.persisted - ? 'Persist state history' - : 'Disable state persisting' + ? 'Disable state persisting' + : 'Persist state history' } onClick={this.props.onClick} > diff --git a/packages/redux-devtools-app/src/constants/actionTypes.ts b/packages/redux-devtools-app/src/constants/actionTypes.ts index 13898f66..98b1aa38 100644 --- a/packages/redux-devtools-app/src/constants/actionTypes.ts +++ b/packages/redux-devtools-app/src/constants/actionTypes.ts @@ -9,6 +9,7 @@ export const LIFTED_ACTION = 'devTools/LIFTED_ACTION'; export const MONITOR_ACTION = 'devTools/MONITOR_ACTION'; export const TOGGLE_SYNC = 'devTools/TOGGLE_SYNC'; export const TOGGLE_PERSIST = 'devTools/TOGGLE_PERSIST'; +export const SET_PERSIST = 'devTools/SET_PERSIST'; export const SELECT_MONITOR = 'devTools/SELECT_MONITOR'; export const UPDATE_MONITOR_STATE = 'devTools/UPDATE_MONITOR_STATE'; export const TOGGLE_SLIDER = 'devTools/TOGGLE_SLIDER'; diff --git a/packages/redux-devtools-app/src/reducers/instances.ts b/packages/redux-devtools-app/src/reducers/instances.ts index cbc3fc00..0a079ff9 100644 --- a/packages/redux-devtools-app/src/reducers/instances.ts +++ b/packages/redux-devtools-app/src/reducers/instances.ts @@ -8,6 +8,7 @@ import { REMOVE_INSTANCE, TOGGLE_PERSIST, TOGGLE_SYNC, + SET_PERSIST, } from '../constants/actionTypes'; import { DISCONNECTED } from '../constants/socketActionTypes'; import parseJSON from '../utils/parseJSON'; @@ -349,6 +350,8 @@ export default function instances( }; case TOGGLE_PERSIST: return { ...state, persisted: !state.persisted }; + case SET_PERSIST: + return { ...state, persisted: action.payload }; case TOGGLE_SYNC: return { ...state, sync: !state.sync }; case SELECT_INSTANCE: