From 185e760ec36b0ce21759adc5bbde2444209de042 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Fri, 16 Oct 2020 09:38:18 -0400
Subject: [PATCH] stash

---
 .../src/app/actions/index.ts                  | 38 ++++++++++++++++---
 .../src/app/components/InstanceSelector.tsx   |  1 +
 .../app/components/buttons/ImportButton.tsx   | 18 ++++-----
 .../monitors/ChartMonitorWrapper.tsx          | 21 +++++-----
 .../monitors/InspectorWrapper/ChartTab.tsx    | 20 +++++-----
 .../monitors/InspectorWrapper/SubTabs.tsx     | 36 +++++++++---------
 .../src/app/reducers/instances.ts             | 13 ++++---
 7 files changed, 87 insertions(+), 60 deletions(-)

diff --git a/packages/redux-devtools-core/src/app/actions/index.ts b/packages/redux-devtools-core/src/app/actions/index.ts
index 9b46f24c..2fe76c0e 100644
--- a/packages/redux-devtools-core/src/app/actions/index.ts
+++ b/packages/redux-devtools-core/src/app/actions/index.ts
@@ -18,6 +18,7 @@ import {
   CLEAR_NOTIFICATION,
   UPDATE_STATE,
   UPDATE_REPORTS,
+  REMOVE_INSTANCE,
 } from '../constants/actionTypes';
 import {
   AUTH_ERROR,
@@ -75,19 +76,37 @@ export function liftedDispatch(action) {
   return { type: LIFTED_ACTION, message: 'DISPATCH', action };
 }
 
-export function selectInstance(selected) {
+interface SelectInstanceAction {
+  type: typeof SELECT_INSTANCE;
+  selected: string;
+}
+export function selectInstance(selected: string): SelectInstanceAction {
   return { type: SELECT_INSTANCE, selected };
 }
 
-export function selectMonitor(monitor) {
+interface SelectMonitorAction {
+  type: typeof SELECT_MONITOR;
+  monitor: string;
+  monitorState?: unknown;
+}
+export function selectMonitor(monitor: string): SelectMonitorAction {
   return { type: SELECT_MONITOR, monitor };
 }
-
-export function selectMonitorWithState(value, monitorState) {
+export function selectMonitorWithState(
+  value: string,
+  monitorState: unknown
+): SelectMonitorAction {
   return { type: SELECT_MONITOR, monitor: value, monitorState };
 }
 
-export function selectMonitorTab(subTabName) {
+interface NextState {
+  subTabName: string;
+}
+interface UpdateMonitorStateAction {
+  type: typeof UPDATE_MONITOR_STATE;
+  nextState: NextState;
+}
+export function selectMonitorTab(subTabName: string): UpdateMonitorStateAction {
   return { type: UPDATE_MONITOR_STATE, nextState: { subTabName } };
 }
 
@@ -196,6 +215,11 @@ export function getReport(report) {
   return { type: GET_REPORT_REQUEST, report };
 }
 
+interface RemoveInstanceAction {
+  type: typeof REMOVE_INSTANCE;
+  id: string;
+}
+
 interface ConnectRequestAction {
   type: typeof CONNECT_REQUEST;
   options: ConnectionOptions;
@@ -265,6 +289,9 @@ interface UnsubscribeAction {
 export type StoreAction =
   | ChangeSectionAction
   | ChangeThemeAction
+  | SelectInstanceAction
+  | SelectMonitorAction
+  | UpdateMonitorStateAction
   | ExportAction
   | TogglePersistAction
   | ToggleSyncAction
@@ -273,6 +300,7 @@ export type StoreAction =
   | ReconnectAction
   | ShowNotificationAction
   | ClearNotificationAction
+  | RemoveInstanceAction
   | ConnectRequestAction
   | ConnectSuccessAction
   | ConnectErrorAction
diff --git a/packages/redux-devtools-core/src/app/components/InstanceSelector.tsx b/packages/redux-devtools-core/src/app/components/InstanceSelector.tsx
index d9bb6991..a6bb864f 100644
--- a/packages/redux-devtools-core/src/app/components/InstanceSelector.tsx
+++ b/packages/redux-devtools-core/src/app/components/InstanceSelector.tsx
@@ -31,6 +31,7 @@ class InstanceSelector extends Component<Props> {
     return (
       <Select
         options={this.select}
+        // TODO Where's the type-checking?
         onChange={this.props.onSelect}
         value={this.props.selected || ''}
       />
diff --git a/packages/redux-devtools-core/src/app/components/buttons/ImportButton.tsx b/packages/redux-devtools-core/src/app/components/buttons/ImportButton.tsx
index 89cd7d70..c4674d6f 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/ImportButton.tsx
+++ b/packages/redux-devtools-core/src/app/components/buttons/ImportButton.tsx
@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { connect, ResolveThunks } from 'react-redux';
 import { Button } from 'devui';
 import { TiUpload } from 'react-icons/ti';
 import { importState } from '../../actions';
 
-class ImportButton extends Component {
+type DispatchProps = ResolveThunks<typeof actionCreators>;
+type Props = DispatchProps;
+
+class ImportButton extends Component<Props> {
   static propTypes = {
     importState: PropTypes.func.isRequired,
   };
@@ -55,10 +57,8 @@ class ImportButton extends Component {
   }
 }
 
-function mapDispatchToProps(dispatch) {
-  return {
-    importState: bindActionCreators(importState, dispatch),
-  };
-}
+const actionCreators = {
+  importState,
+};
 
-export default connect(null, mapDispatchToProps)(ImportButton);
+export default connect(null, actionCreators)(ImportButton);
diff --git a/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.tsx b/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.tsx
index c0ffb988..bccf9ad0 100644
--- a/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.tsx
+++ b/packages/redux-devtools-core/src/app/containers/monitors/ChartMonitorWrapper.tsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { connect, ResolveThunks } from 'react-redux';
 import ChartMonitor from 'redux-devtools-chart-monitor';
 import { selectMonitorWithState } from '../../actions';
 
@@ -15,7 +14,10 @@ export function getPath(obj, inspectedStatePath) {
   inspectedStatePath.push(name);
 }
 
-class ChartMonitorWrapper extends Component {
+type DispatchProps = ResolveThunks<typeof actionCreators>;
+type Props = DispatchProps;
+
+class ChartMonitorWrapper extends Component<Props> {
   static update = ChartMonitor.update;
 
   onClickText = (data) => {
@@ -47,13 +49,8 @@ ChartMonitorWrapper.propTypes = {
   selectMonitorWithState: PropTypes.func.isRequired,
 };
 
-function mapDispatchToProps(dispatch) {
-  return {
-    selectMonitorWithState: bindActionCreators(
-      selectMonitorWithState,
-      dispatch
-    ),
-  };
-}
+const actionCreators = {
+  selectMonitorWithState: selectMonitorWithState,
+};
 
-export default connect(null, mapDispatchToProps)(ChartMonitorWrapper);
+export default connect(null, actionCreators)(ChartMonitorWrapper);
diff --git a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.tsx b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.tsx
index d3e4ff49..6e6a429f 100644
--- a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.tsx
+++ b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/ChartTab.tsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { connect, ResolveThunks } from 'react-redux';
 import { withTheme } from 'styled-components';
 import { tree } from 'd3-state-visualizer';
 import { getPath } from '../ChartMonitorWrapper';
@@ -12,7 +11,10 @@ const style = {
   height: '100%',
 };
 
-class ChartTab extends Component {
+type DispatchProps = ResolveThunks<typeof actionCreators>;
+type Props = DispatchProps;
+
+class ChartTab extends Component<Props> {
   shouldComponentUpdate() {
     return false;
   }
@@ -21,7 +23,7 @@ class ChartTab extends Component {
     this.createChart(this.props);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (
       this.props.theme.scheme !== nextProps.theme.scheme ||
       nextProps.theme.light !== this.props.theme.light
@@ -99,11 +101,9 @@ ChartTab.propTypes = {
   theme: PropTypes.object.isRequired,
 };
 
-function mapDispatchToProps(dispatch) {
-  return {
-    updateMonitorState: bindActionCreators(updateMonitorState, dispatch),
-  };
-}
+const actionCreators = {
+  updateMonitorState,
+};
 
-const ConnectedChartTab = connect(null, mapDispatchToProps)(ChartTab);
+const ConnectedChartTab = connect(null, actionCreators)(ChartTab);
 export default withTheme(ConnectedChartTab);
diff --git a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.tsx b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.tsx
index f5d31cde..927d950e 100644
--- a/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.tsx
+++ b/packages/redux-devtools-core/src/app/containers/monitors/InspectorWrapper/SubTabs.tsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import { connect, ResolveThunks } from 'react-redux';
 import { Tabs } from 'devui';
 import StateTree from 'redux-devtools-inspector-monitor/lib/tabs/StateTab';
 import ActionTree from 'redux-devtools-inspector-monitor/lib/tabs/ActionTab';
@@ -10,14 +9,19 @@ import { selectMonitorTab } from '../../../actions';
 import RawTab from './RawTab';
 import ChartTab from './ChartTab';
 import VisualDiffTab from './VisualDiffTab';
+import { StoreState } from '../../../reducers';
 
-class SubTabs extends Component {
-  constructor(props) {
+type StateProps = ReturnType<typeof mapStateToProps>;
+type DispatchProps = ResolveThunks<typeof actionCreators>;
+type Props = StateProps & DispatchProps;
+
+class SubTabs extends Component<Props> {
+  constructor(props: Props) {
     super(props);
     this.updateTabs(props);
   }
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.parentTab !== this.props.parentTab) {
       this.updateTabs(nextProps);
     }
@@ -34,7 +38,7 @@ class SubTabs extends Component {
     }
   };
 
-  updateTabs(props) {
+  updateTabs(props: Props) {
     const parentTab = props.parentTab;
 
     if (parentTab === 'Diff') {
@@ -96,17 +100,13 @@ SubTabs.propTypes = {
   nextState: PropTypes.object,
 };
 
-function mapStateToProps(state) {
-  return {
-    parentTab: state.monitor.monitorState.tabName,
-    selected: state.monitor.monitorState.subTabName,
-  };
-}
+const mapStateToProps = (state: StoreState) => ({
+  parentTab: state.monitor.monitorState.tabName,
+  selected: state.monitor.monitorState.subTabName,
+});
 
-function mapDispatchToProps(dispatch) {
-  return {
-    selectMonitorTab: bindActionCreators(selectMonitorTab, dispatch),
-  };
-}
+const actionCreators = {
+  selectMonitorTab,
+};
 
-export default connect(mapStateToProps, mapDispatchToProps)(SubTabs);
+export default connect(mapStateToProps, actionCreators)(SubTabs);
diff --git a/packages/redux-devtools-core/src/app/reducers/instances.ts b/packages/redux-devtools-core/src/app/reducers/instances.ts
index f2303f47..5904d68c 100644
--- a/packages/redux-devtools-core/src/app/reducers/instances.ts
+++ b/packages/redux-devtools-core/src/app/reducers/instances.ts
@@ -12,9 +12,12 @@ import parseJSON from '../utils/parseJSON';
 import { recompute } from '../utils/updateState';
 import { StoreAction } from '../actions';
 
-interface InstancesState {}
+interface InstancesState {
+  sync: boolean;
+  persisted?: boolean;
+}
 
-export const initialState = {
+export const initialState: InstancesState = {
   selected: null,
   current: 'default',
   sync: false,
@@ -170,7 +173,7 @@ export function dispatchAction(state, { action }) {
   return state;
 }
 
-function removeState(state, connectionId) {
+function removeState(state: InstancesState, connectionId: string) {
   const instanceIds = state.connections[connectionId];
   if (!instanceIds) return state;
 
@@ -310,7 +313,5 @@ export default function instances(state = initialState, action: StoreAction) {
   }
 }
 
-/* eslint-disable no-shadow */
-export const getActiveInstance = (instances) =>
+export const getActiveInstance = (instances: InstancesState) =>
   instances.selected || instances.current;
-/* eslint-enable */