From afebd152f27acc6096bc5cda14d4ff861e69e253 Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sat, 19 Jun 2021 10:40:16 -0400 Subject: [PATCH] Work --- extension/src/app/api/importState.js | 2 +- extension/src/app/api/index.js | 4 +- extension/src/app/containers/App.js | 194 ++++-------------- extension/src/app/middlewares/api.js | 6 +- .../src/app/middlewares/instanceSelector.js | 2 +- extension/src/app/middlewares/panelSync.js | 4 +- extension/src/app/middlewares/windowSync.js | 4 +- .../src/app/reducers/background/index.js | 2 +- extension/src/app/reducers/panel/index.js | 14 +- extension/src/app/reducers/window/index.js | 14 +- .../src/app/reducers/window/instances.js | 4 +- extension/src/app/stores/enhancerStore.js | 4 +- extension/src/app/stores/panelStore.js | 9 +- extension/src/app/stores/windowStore.js | 14 +- .../browser/extension/background/logging.js | 2 +- .../src/browser/extension/devpanel/index.js | 3 +- .../browser/extension/inject/pageScript.js | 2 +- .../src/browser/extension/window/index.js | 3 +- .../src/browser/extension/window/remote.js | 2 +- 19 files changed, 79 insertions(+), 210 deletions(-) diff --git a/extension/src/app/api/importState.js b/extension/src/app/api/importState.js index de5a6db0..02ae7447 100644 --- a/extension/src/app/api/importState.js +++ b/extension/src/app/api/importState.js @@ -1,6 +1,6 @@ import mapValues from 'lodash/mapValues'; import jsan from 'jsan'; -import seralizeImmutable from 'remotedev-serialize/immutable/serialize'; +import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize'; function deprecate(param) { // eslint-disable-next-line no-console diff --git a/extension/src/app/api/index.js b/extension/src/app/api/index.js index 5c3e94ce..5590dbfb 100644 --- a/extension/src/app/api/index.js +++ b/extension/src/app/api/index.js @@ -1,7 +1,7 @@ import jsan from 'jsan'; import throttle from 'lodash/throttle'; -import seralizeImmutable from 'remotedev-serialize/immutable/serialize'; -import { getActionsArray } from 'remotedev-utils'; +import seralizeImmutable from '@redux-devtools/serialize/lib/immutable/serialize'; +import { getActionsArray } from '@redux-devtools/utils'; import { getLocalFilter, isFiltered } from './filters'; import importState from './importState'; import generateId from './generateInstanceId'; diff --git a/extension/src/app/containers/App.js b/extension/src/app/containers/App.js index a12d9c49..df23bcee 100644 --- a/extension/src/app/containers/App.js +++ b/extension/src/app/containers/App.js @@ -1,33 +1,12 @@ -import React, { Component, PropTypes } from 'react'; -import { bindActionCreators } from 'redux'; +import React, { Component } from 'react'; import { connect } from 'react-redux'; -import SliderMonitor from 'remotedev-slider/lib/Slider'; -import { liftedDispatch, getReport } from 'remotedev-app/lib/actions'; -import { getActiveInstance } from 'remotedev-app/lib/reducers/instances'; -import styles from 'remotedev-app/lib/styles'; -import enhance from 'remotedev-app/lib/hoc'; -import DevTools from 'remotedev-app/lib/containers/DevTools'; -import Dispatcher from 'remotedev-app/lib/containers/monitors/Dispatcher'; -import MonitorSelector from 'remotedev-app/lib/components/MonitorSelector'; -import Notification from 'remotedev-app/lib/components/Notification'; -import Instances from 'remotedev-app/lib/components/Instances'; -import Button from 'remotedev-app/lib/components/Button'; -import RecordButton from 'remotedev-app/lib/components/buttons/RecordButton'; -import LockButton from 'remotedev-app/lib/components/buttons/LockButton'; -import DispatcherButton from 'remotedev-app/lib/components/buttons/DispatcherButton'; -import SliderButton from 'remotedev-app/lib/components/buttons/SliderButton'; -import ImportButton from 'remotedev-app/lib/components/buttons/ImportButton'; -import ExportButton from 'remotedev-app/lib/components/buttons/ExportButton'; -import PrintButton from 'remotedev-app/lib/components/buttons/PrintButton'; -import { - MdSettings, - MdBorderLeft, - MdBorderRight, - MdBorderBottom, -} from 'react-icons/md'; -import { GoRadioTower, GoPin } from 'react-icons/go'; +import { Container, Notification } from 'devui'; +import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; +import Settings from '@redux-devtools/app/lib/components/Settings'; +import Actions from '@redux-devtools/app/lib/containers/Actions'; +import Header from '@redux-devtools/app/lib/components/Header'; +import { clearNotification } from '@redux-devtools/app/lib/actions'; -@enhance class App extends Component { openWindow = (position) => { chrome.runtime.sendMessage({ type: 'OPEN', position }); @@ -41,15 +20,7 @@ class App extends Component { }; render() { - const { - monitor, - position, - togglePersist, - dispatcherIsOpen, - sliderIsOpen, - options, - liftedState, - } = this.props; + const { position, options, section, theme, notification } = this.props; if (!position && (!options || !options.features)) { return (
@@ -64,139 +35,46 @@ class App extends Component {
); } - const features = options.features || {}; + + let body; + switch (section) { + case 'Settings': + body = ; + break; + default: + body = ; + } + return ( -
-
- - -
- - - {sliderIsOpen && options.connectionId && options.features.jump && ( - + +
+ {body} + {notification && ( + + {notification.message} + )} - {dispatcherIsOpen && - options.connectionId && - options.features.dispatch && } -
- {!window.isElectron && position !== '#left' && ( - - )} - {features.dispatch && ( - - )} - {features.jump && } - {features.import && } - {features.export && } - {position && - (position !== '#popup' || - navigator.userAgent.indexOf('Firefox') !== -1) && } - {!window.isElectron && ( - - )} - {(chrome.runtime.openOptionsPage || - navigator.userAgent.indexOf('Firefox') !== -1) && ( - - )} -
-
+ ); } } -App.propTypes = { - bgStore: PropTypes.object, - liftedDispatch: PropTypes.func.isRequired, - getReport: PropTypes.func.isRequired, - togglePersist: PropTypes.func.isRequired, - selected: PropTypes.string, - liftedState: PropTypes.object.isRequired, - monitorState: PropTypes.object, - options: PropTypes.object.isRequired, - monitor: PropTypes.string, - position: PropTypes.string, - reports: PropTypes.array.isRequired, - dispatcherIsOpen: PropTypes.bool, - sliderIsOpen: PropTypes.bool, -}; - function mapStateToProps(state) { const instances = state.instances; const id = getActiveInstance(instances); return { - selected: instances.selected, - liftedState: instances.states[id], - monitorState: state.monitor.monitorState, options: instances.options[id], - monitor: state.monitor.selected, - dispatcherIsOpen: state.monitor.dispatcherIsOpen, - sliderIsOpen: state.monitor.sliderIsOpen, - reports: state.reports.data, - shouldSync: state.instances.sync, + section: state.section, + theme: state.theme, + notification: state.notification, }; } -function mapDispatchToProps(dispatch) { - return { - liftedDispatch: bindActionCreators(liftedDispatch, dispatch), - getReport: bindActionCreators(getReport, dispatch), - togglePersist: () => { - dispatch({ type: 'TOGGLE_PERSIST' }); - }, - }; -} +const actionCreators = { + clearNotification, +}; -export default connect(mapStateToProps, mapDispatchToProps)(App); +export default connect(mapStateToProps, actionCreators)(App); diff --git a/extension/src/app/middlewares/api.js b/extension/src/app/middlewares/api.js index 6da750f4..785056d4 100644 --- a/extension/src/app/middlewares/api.js +++ b/extension/src/app/middlewares/api.js @@ -1,10 +1,10 @@ -import stringifyJSON from 'remotedev-app/lib/utils/stringifyJSON'; +import stringifyJSON from '@redux-devtools/app/lib/utils/stringifyJSON'; import { UPDATE_STATE, REMOVE_INSTANCE, LIFTED_ACTION, -} from 'remotedev-app/lib/constants/actionTypes'; -import { nonReduxDispatch } from 'remotedev-app/lib/utils/monitorActions'; +} from '@redux-devtools/app/lib/constants/actionTypes'; +import { nonReduxDispatch } from '@redux-devtools/app/lib/utils/monitorActions'; import syncOptions from '../../browser/extension/options/syncOptions'; import openDevToolsWindow from '../../browser/extension/background/openWindow'; import { getReport } from '../../browser/extension/background/logging'; diff --git a/extension/src/app/middlewares/instanceSelector.js b/extension/src/app/middlewares/instanceSelector.js index 6b300549..72c6d03d 100644 --- a/extension/src/app/middlewares/instanceSelector.js +++ b/extension/src/app/middlewares/instanceSelector.js @@ -1,7 +1,7 @@ import { SELECT_INSTANCE, UPDATE_STATE, -} from 'remotedev-app/lib/constants/actionTypes'; +} from '@redux-devtools/app/lib/constants/actionTypes'; function selectInstance(tabId, store, next) { const instances = store.getState().instances; diff --git a/extension/src/app/middlewares/panelSync.js b/extension/src/app/middlewares/panelSync.js index 3f7a2691..f88f421d 100644 --- a/extension/src/app/middlewares/panelSync.js +++ b/extension/src/app/middlewares/panelSync.js @@ -2,8 +2,8 @@ import { LIFTED_ACTION, UPDATE_STATE, SELECT_INSTANCE, -} from 'remotedev-app/lib/constants/actionTypes'; -import { getActiveInstance } from 'remotedev-app/lib/reducers/instances'; +} from '@redux-devtools/app/lib/constants/actionTypes'; +import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; function panelDispatcher(bgConnection) { let autoselected = false; diff --git a/extension/src/app/middlewares/windowSync.js b/extension/src/app/middlewares/windowSync.js index ba6f3249..442d3162 100644 --- a/extension/src/app/middlewares/windowSync.js +++ b/extension/src/app/middlewares/windowSync.js @@ -1,8 +1,8 @@ import { UPDATE_STATE, LIFTED_ACTION, -} from 'remotedev-app/lib/constants/actionTypes'; -import { getActiveInstance } from 'remotedev-app/lib/reducers/instances'; +} from '@redux-devtools/app/lib/constants/actionTypes'; +import { getActiveInstance } from '@redux-devtools/app/lib/reducers/instances'; const syncStores = (baseStore) => (store) => (next) => (action) => { if (action.type === UPDATE_STATE) { diff --git a/extension/src/app/reducers/background/index.js b/extension/src/app/reducers/background/index.js index 8b3e1af6..81bd41c6 100644 --- a/extension/src/app/reducers/background/index.js +++ b/extension/src/app/reducers/background/index.js @@ -1,5 +1,5 @@ import { combineReducers } from 'redux'; -import instances from 'remotedev-app/lib/reducers/instances'; +import instances from '@redux-devtools/app/lib/reducers/instances'; import persistStates from './persistStates'; const rootReducer = combineReducers({ diff --git a/extension/src/app/reducers/panel/index.js b/extension/src/app/reducers/panel/index.js index c39dd110..42cc531f 100644 --- a/extension/src/app/reducers/panel/index.js +++ b/extension/src/app/reducers/panel/index.js @@ -1,16 +1,18 @@ import { combineReducers } from 'redux'; -import instances from 'remotedev-app/lib/reducers/instances'; -import monitor from 'remotedev-app/lib/reducers/monitor'; -import notification from 'remotedev-app/lib/reducers/notification'; -import test from 'remotedev-app/lib/reducers/test'; -import reports from 'remotedev-app/lib/reducers/reports'; +import instances from '@redux-devtools/app/lib/reducers/instances'; +import monitor from '@redux-devtools/app/lib/reducers/monitor'; +import notification from '@redux-devtools/app/lib/reducers/notification'; +import reports from '@redux-devtools/app/lib/reducers/reports'; +import section from '@redux-devtools/app/lib/reducers/section'; +import theme from '@redux-devtools/app/lib/reducers/theme'; const rootReducer = combineReducers({ instances, monitor, - test, reports, notification, + section, + theme, }); export default rootReducer; diff --git a/extension/src/app/reducers/window/index.js b/extension/src/app/reducers/window/index.js index 7eec07c2..5420e736 100644 --- a/extension/src/app/reducers/window/index.js +++ b/extension/src/app/reducers/window/index.js @@ -1,18 +1,20 @@ import { combineReducers } from 'redux'; import instances from './instances'; -import monitor from 'remotedev-app/lib/reducers/monitor'; -import notification from 'remotedev-app/lib/reducers/notification'; -import socket from 'remotedev-app/lib/reducers/socket'; -import reports from 'remotedev-app/lib/reducers/reports'; -import test from 'remotedev-app/lib/reducers/test'; +import monitor from '@redux-devtools/app/lib/reducers/monitor'; +import notification from '@redux-devtools/app/lib/reducers/notification'; +import socket from '@redux-devtools/app/lib/reducers/socket'; +import reports from '@redux-devtools/app/lib/reducers/reports'; +import section from '@redux-devtools/app/lib/reducers/section'; +import theme from '@redux-devtools/app/lib/reducers/theme'; const rootReducer = combineReducers({ instances, monitor, - test, socket, reports, notification, + section, + theme, }); export default rootReducer; diff --git a/extension/src/app/reducers/window/instances.js b/extension/src/app/reducers/window/instances.js index 3969367f..7454eb90 100644 --- a/extension/src/app/reducers/window/instances.js +++ b/extension/src/app/reducers/window/instances.js @@ -1,12 +1,12 @@ import { initialState, dispatchAction, -} from 'remotedev-app/lib/reducers/instances'; +} from '@redux-devtools/app/lib/reducers/instances'; import { UPDATE_STATE, SELECT_INSTANCE, LIFTED_ACTION, -} from 'remotedev-app/lib/constants/actionTypes'; +} from '@redux-devtools/app/lib/constants/actionTypes'; export default function instances(state = initialState, action) { switch (action.type) { diff --git a/extension/src/app/stores/enhancerStore.js b/extension/src/app/stores/enhancerStore.js index e09d1737..fdf2a850 100644 --- a/extension/src/app/stores/enhancerStore.js +++ b/extension/src/app/stores/enhancerStore.js @@ -1,6 +1,6 @@ import { compose } from 'redux'; -import instrument from 'redux-devtools-instrument'; -import persistState from 'redux-devtools/lib/persistState'; +import instrument from '@redux-devtools/instrument'; +import persistState from '@redux-devtools/core/lib/persistState'; export function getUrlParam(key) { const matches = window.location.href.match( diff --git a/extension/src/app/stores/panelStore.js b/extension/src/app/stores/panelStore.js index cbd3b806..2255bc22 100644 --- a/extension/src/app/stores/panelStore.js +++ b/extension/src/app/stores/panelStore.js @@ -1,14 +1,9 @@ import { createStore, applyMiddleware } from 'redux'; -import persist from 'remotedev-app/lib/middlewares/persist'; -import exportState from 'remotedev-app/lib/middlewares/exportState'; +import exportState from '@redux-devtools/app/lib/middlewares/exportState'; import panelDispatcher from '../middlewares/panelSync'; import rootReducer from '../reducers/panel'; export default function configureStore(position, bgConnection, preloadedState) { - const enhancer = applyMiddleware( - exportState, - panelDispatcher(bgConnection), - persist(position) - ); + const enhancer = applyMiddleware(exportState, panelDispatcher(bgConnection)); return createStore(rootReducer, preloadedState, enhancer); } diff --git a/extension/src/app/stores/windowStore.js b/extension/src/app/stores/windowStore.js index e9eb22c8..2e67ef96 100644 --- a/extension/src/app/stores/windowStore.js +++ b/extension/src/app/stores/windowStore.js @@ -1,20 +1,14 @@ import { createStore, compose, applyMiddleware } from 'redux'; -import persist from 'remotedev-app/lib/middlewares/persist'; -import exportState from 'remotedev-app/lib/middlewares/exportState'; -import api from 'remotedev-app/lib/middlewares/api'; -import { CONNECT_REQUEST } from 'remotedev-app/lib/constants/socketActionTypes'; +import exportState from '@redux-devtools/app/lib/middlewares/exportState'; +import api from '@redux-devtools/app/lib/middlewares/api'; +import { CONNECT_REQUEST } from '@redux-devtools/app/lib/constants/socketActionTypes'; import syncStores from '../middlewares/windowSync'; import instanceSelector from '../middlewares/instanceSelector'; import rootReducer from '../reducers/window'; export default function configureStore(baseStore, position, preloadedState) { let enhancer; - const middlewares = [ - exportState, - api, - syncStores(baseStore), - persist(position), - ]; + const middlewares = [exportState, api, syncStores(baseStore)]; if (!position || position === '#popup') { // select current tab instance for devPanel and pageAction middlewares.push(instanceSelector); diff --git a/extension/src/browser/extension/background/logging.js b/extension/src/browser/extension/background/logging.js index ed937e9a..bc5a231c 100644 --- a/extension/src/browser/extension/background/logging.js +++ b/extension/src/browser/extension/background/logging.js @@ -1,4 +1,4 @@ -import { LIFTED_ACTION } from 'remotedev-app/lib/constants/actionTypes'; +import { LIFTED_ACTION } from '@redux-devtools/app/lib/constants/actionTypes'; export function getReport(reportId, tabId, instanceId) { chrome.storage.local.get(['s:hostname', 's:port', 's:secure'], (options) => { diff --git a/extension/src/browser/extension/devpanel/index.js b/extension/src/browser/extension/devpanel/index.js index 4d346054..b9957d1c 100644 --- a/extension/src/browser/extension/devpanel/index.js +++ b/extension/src/browser/extension/devpanel/index.js @@ -1,8 +1,7 @@ -import 'remotedev-monitor-components/lib/presets'; import React from 'react'; import { render, unmountComponentAtNode } from 'react-dom'; import { Provider } from 'react-redux'; -import { REMOVE_INSTANCE } from 'remotedev-app/lib/constants/actionTypes'; +import { REMOVE_INSTANCE } from '@redux-devtools/app/lib/constants/actionTypes'; import App from '../../../app/containers/App'; import configureStore from '../../../app/stores/panelStore'; import getPreloadedState from '../background/getPreloadedState'; diff --git a/extension/src/browser/extension/inject/pageScript.js b/extension/src/browser/extension/inject/pageScript.js index 52046ae6..a2b6d5a1 100644 --- a/extension/src/browser/extension/inject/pageScript.js +++ b/extension/src/browser/extension/inject/pageScript.js @@ -1,4 +1,4 @@ -import { getActionsArray, evalAction } from 'remotedev-utils'; +import { getActionsArray, evalAction } from '@redux-devtools/utils'; import throttle from 'lodash/throttle'; import createStore from '../../../app/stores/createStore'; import configureStore, { getUrlParam } from '../../../app/stores/enhancerStore'; diff --git a/extension/src/browser/extension/window/index.js b/extension/src/browser/extension/window/index.js index 3071b27c..e1f1260f 100644 --- a/extension/src/browser/extension/window/index.js +++ b/extension/src/browser/extension/window/index.js @@ -1,8 +1,7 @@ -import 'remotedev-monitor-components/lib/presets'; import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; -import { UPDATE_STATE } from 'remotedev-app/lib/constants/actionTypes'; +import { UPDATE_STATE } from '@redux-devtools/app/lib/constants/actionTypes'; import App from '../../../app/containers/App'; import configureStore from '../../../app/stores/windowStore'; import getPreloadedState from '../background/getPreloadedState'; diff --git a/extension/src/browser/extension/window/remote.js b/extension/src/browser/extension/window/remote.js index 41e354f6..e4e271e6 100644 --- a/extension/src/browser/extension/window/remote.js +++ b/extension/src/browser/extension/window/remote.js @@ -1,6 +1,6 @@ import React from 'react'; import { render } from 'react-dom'; -import App from 'remotedev-app'; +import App from '@redux-devtools/app'; import '../../views/remote.pug';