feat(extension): use persist from app (#821)

* feat(extension): use persist from app

* Fix imports

extension/src/app/middlewares/api.ts

@@ -355,7 +355,7 @@ function getReducerError() {
 
 function togglePersist() {
   const state = window.store.getState();
-  if (state.persistStates) {
+  if (state.instances.persisted) {
     Object.keys(state.instances.connections).forEach((id) => {
       if (connections.tab[id]) return;
       window.store.dispatch({ type: REMOVE_INSTANCE, id });
@@ -492,7 +492,7 @@ function disconnect(
     if (p) p.onDisconnect.removeListener(disconnectListener);
     delete connections[type][id];
     if (type === 'tab') {
-      if (!window.store.getState().persistStates) {
+      if (!window.store.getState().instances.persisted) {
         window.store.dispatch({ type: REMOVE_INSTANCE, id });
         toMonitors({ type: 'NA', id });
       }
@@ -522,7 +522,7 @@ function onConnect<S, A extends Action<unknown>>(port: chrome.runtime.Port) {
         if (isMonitored) port.postMessage({ type: 'START' });
 
         const state = window.store.getState();
-        if (state.persistStates) {
+        if (state.instances.persisted) {
           const instanceId = `${id}/${msg.instanceId}`;
           const persistedState = state.instances.states[instanceId];
           if (!persistedState) return;
@@ -585,7 +585,6 @@ window.syncOptions = syncOptions(toAllTabs); // Expose to the options page
 export default function api() {
   return (next: Dispatch<BackgroundAction>) => (action: BackgroundAction) => {
     if (action.type === LIFTED_ACTION) toContentScript(action);
-    else if (action.type === 'TOGGLE_PERSIST') togglePersist();
     return next(action);
   };
 }

extension/src/app/middlewares/panelSync.ts

@@ -6,17 +6,15 @@ import {
 import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI } from 'redux';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
-import { StoreActionWithTogglePersist } from '../stores/windowStore';
+import { StoreAction } from '@redux-devtools/app/lib/actions';
 
 function panelDispatcher(bgConnection: chrome.runtime.Port) {
   let autoselected = false;
   const tabId = chrome.devtools.inspectedWindow.tabId;
 
-  return (
+  return (store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) =>
-      store: MiddlewareAPI<Dispatch<StoreActionWithTogglePersist>, StoreState>
+    (next: Dispatch<StoreAction>) =>
-    ) =>
+    (action: StoreAction) => {
-    (next: Dispatch<StoreActionWithTogglePersist>) =>
-    (action: StoreActionWithTogglePersist) => {
       const result = next(action);
       if (!autoselected && action.type === UPDATE_STATE && tabId) {
         autoselected = true;
@@ -25,7 +23,7 @@ function panelDispatcher(bgConnection: chrome.runtime.Port) {
           next({ type: SELECT_INSTANCE, selected: connections[0] });
         }
       }
-      if (action.type === LIFTED_ACTION || action.type === 'TOGGLE_PERSIST') {
+      if (action.type === LIFTED_ACTION) {
         const instances = store.getState().instances;
         const instanceId = getActiveInstance(instances);
         const id = instances.options[instanceId].connectionId;

extension/src/app/middlewares/windowSync.ts

@@ -6,10 +6,7 @@ import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances';
 import { Dispatch, MiddlewareAPI, Store } from 'redux';
 import { BackgroundState } from '../reducers/background';
 import { StoreAction } from '@redux-devtools/app/lib/actions';
-import {
+import { WindowStoreAction } from '../stores/windowStore';
-  WindowStoreAction,
-  StoreActionWithTogglePersist,
-} from '../stores/windowStore';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
 import { BackgroundAction } from '../stores/backgroundStore';
 
@@ -17,14 +14,14 @@ const syncStores =
   (baseStore: Store<BackgroundState, BackgroundAction>) =>
   (store: MiddlewareAPI<Dispatch<StoreAction>, StoreState>) =>
   (next: Dispatch<WindowStoreAction>) =>
-  (action: StoreActionWithTogglePersist) => {
+  (action: StoreAction) => {
     if (action.type === UPDATE_STATE) {
       return next({
         ...action,
         instances: baseStore.getState().instances,
       });
     }
-    if (action.type === LIFTED_ACTION || action.type === 'TOGGLE_PERSIST') {
+    if (action.type === LIFTED_ACTION) {
       const instances = store.getState().instances;
       const instanceId = getActiveInstance(instances);
       const id = instances.options[instanceId].connectionId;

extension/src/app/reducers/background/index.ts

@@ -2,18 +2,15 @@ import { combineReducers, Reducer } from 'redux';
 import instances, {
   InstancesState,
 } from '@redux-devtools/app/lib/reducers/instances';
-import persistStates from './persistStates';
 import { BackgroundAction } from '../../stores/backgroundStore';
 
 export interface BackgroundState {
   readonly instances: InstancesState;
-  readonly persistStates: boolean;
 }
 
 const rootReducer: Reducer<BackgroundState, BackgroundAction> =
   combineReducers<BackgroundState>({
     instances,
-    persistStates,
   });
 
 export default rootReducer;

extension/src/app/reducers/background/persistStates.ts

@@ -1,6 +0,0 @@
-import { BackgroundAction } from '../../stores/backgroundStore';
-
-export default function persistStates(state = false, action: BackgroundAction) {
-  if (action.type === 'TOGGLE_PERSIST') return !state;
-  return state;
-}

extension/src/app/reducers/panel/index.ts

@@ -18,7 +18,7 @@ import theme, { ThemeState } from '@redux-devtools/app/lib/reducers/theme';
 import connection, {
   ConnectionState,
 } from '@redux-devtools/app/lib/reducers/connection';
-import { StoreActionWithTogglePersist } from '../../stores/windowStore';
+import { StoreAction } from '@redux-devtools/app/lib/actions';
 
 export interface StoreStateWithoutSocket {
   readonly section: SectionState;
@@ -30,17 +30,15 @@ export interface StoreStateWithoutSocket {
   readonly notification: NotificationState;
 }
 
-const rootReducer: Reducer<
+const rootReducer: Reducer<StoreStateWithoutSocket, StoreAction> =
-  StoreStateWithoutSocket,
+  combineReducers<StoreStateWithoutSocket>({
-  StoreActionWithTogglePersist
+    instances,
-> = combineReducers<StoreStateWithoutSocket>({
+    monitor,
-  instances,
+    reports,
-  monitor,
+    notification,
-  reports,
+    section,
-  notification,
+    theme,
-  section,
+    connection,
-  theme,
+  });
-  connection,
-});
 
 export default rootReducer;

extension/src/app/stores/backgroundStore.ts

@@ -45,12 +45,6 @@ export type LiftedActionAction =
   | LiftedActionActionAction
   | LiftedActionExportAction;
 
-interface TogglePersistAction {
-  readonly type: 'TOGGLE_PERSIST';
-  readonly instanceId: string | number;
-  readonly id: string | number | undefined;
-}
-
 interface ConnectedAction {
   readonly type: typeof CONNECTED;
 }
@@ -62,7 +56,6 @@ interface DisconnectedAction {
 export type BackgroundAction =
   | StoreActionWithoutLiftedAction
   | LiftedActionAction
-  | TogglePersistAction
   | ConnectedAction
   | DisconnectedAction;
 

extension/src/app/stores/windowStore.ts

@@ -23,19 +23,12 @@ import { BackgroundState } from '../reducers/background';
 import { BackgroundAction } from './backgroundStore';
 import { EmptyUpdateStateAction, NAAction } from '../middlewares/api';
 
-export interface TogglePersistAction {
-  readonly type: 'TOGGLE_PERSIST';
-}
-
-export type StoreActionWithTogglePersist = StoreAction | TogglePersistAction;
-
 export interface ExpandedUpdateStateAction extends UpdateStateAction {
   readonly instances: InstancesState;
 }
 
 export type WindowStoreAction =
   | StoreActionWithoutUpdateState
-  | TogglePersistAction
   | ExpandedUpdateStateAction
   | NAAction
   | EmptyUpdateStateAction;

extension/src/browser/extension/devpanel/index.tsx

@@ -9,8 +9,8 @@ import getPreloadedState from '../background/getPreloadedState';
 import '../../views/devpanel.pug';
 import { Action, PreloadedState, Store } from 'redux';
 import { StoreState } from '@redux-devtools/app/lib/reducers';
+import { StoreAction } from '@redux-devtools/app/lib/actions';
 import { PanelMessage } from '../../../app/middlewares/api';
-import { StoreActionWithTogglePersist } from '../../../app/stores/windowStore';
 import { StoreStateWithoutSocket } from '../../../app/reducers/panel';
 
 const position = location.hash;
@@ -21,9 +21,7 @@ const messageStyle: CSSProperties = {
 };
 
 let rendered: boolean | undefined;
-let store:
+let store: Store<StoreStateWithoutSocket, StoreAction> | undefined;
-  | Store<StoreStateWithoutSocket, StoreActionWithTogglePersist>
-  | undefined;
 let bgConnection: chrome.runtime.Port;
 let naTimeout: NodeJS.Timeout;
 let preloadedState: PreloadedState<StoreState>;