diff --git a/app/DevTools.js b/app/DevTools.js new file mode 100644 index 0000000..229cea9 --- /dev/null +++ b/app/DevTools.js @@ -0,0 +1,164 @@ +import React, { Component, PropTypes } from 'react'; +import { + saveToStorage, getSettings, getSelectMonitor, saveSelectMonitor, +} from 'remotedev-app/lib/utils/localStorage'; +import styles from 'remotedev-app/lib/styles'; +import enhance from 'remotedev-app/lib/hoc'; +import DevTools from 'remotedev-app/lib/containers/DevTools'; +import { + createRemoteStore, updateStoreInstance, enableSync, startMonitoring, +} from 'remotedev-app/lib/store/createRemoteStore'; +import Instances from 'remotedev-app/lib/components/Instances'; +import MonitorSelector from 'remotedev-app/lib/components/MonitorSelector'; +import SyncToggle from 'remotedev-app/lib/components/SyncToggle'; + +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'; + +class App extends Component { + static propTypes = { + selectMonitor: PropTypes.string, + socketOptions: PropTypes.shape({ + hostname: PropTypes.string, + port: PropTypes.number, + autoReconnect: PropTypes.bool, + secure: PropTypes.bool, + }), + }; + + constructor() { + super(); + this.openModal = this.openModal.bind(this); + this.closeModal = this.closeModal.bind(this); + this.toggleDispatcher = this.toggleDispatcher.bind(this); + this.toggleSlider = this.toggleSlider.bind(this); + this.saveSettings = this.saveSettings.bind(this); + } + + componentWillMount() { + this.state = { + monitor: getSelectMonitor() || this.props.selectMonitor || 'default', + modalIsOpen: false, + dispatcherIsOpen: false, + sliderIsOpen: true, + instances: {}, + instance: 'auto', + shouldSync: false, + }; + this.socketOptions = getSettings() || this.props.socketOptions; + this.store = this.createStore(); + } + + handleInstancesChanged = (instance, name, toRemove) => { + const instances = this.state.instances; + if (toRemove) { + delete instances[instance]; + this.store.liftedStore.deleteInstance(instance); + if (this.state.instance === instance) { + updateStoreInstance('auto'); + this.setState({ instance: 'auto', shouldSync: false, instances }); + return; + } + } else { + instances[instance] = name || instance; + startMonitoring(instance); + } + this.setState({ instances }); + }; + + handleSelectInstance = (event, index, instance) => { + updateStoreInstance(instance); + this.setState({ instance, shouldSync: false }); + }; + + handleSelectMonitor = (event, index, value) => { + this.setState({ monitor: saveSelectMonitor(value) }); + }; + + handleSyncToggle = () => { + const shouldSync = !this.state.shouldSync; + enableSync(shouldSync); + this.setState({ shouldSync }); + }; + + createStore() { + return createRemoteStore( + this.socketOptions, + this.handleInstancesChanged, + this.state.instance + ); + } + + saveSettings(isLocal, options) { + this.socketOptions = saveToStorage( + !isLocal, ['hostname', 'port', 'secure'], options + ) || undefined; + this.store = this.createStore(); + this.closeModal(); + } + + toggleDispatcher() { + this.setState({ dispatcherIsOpen: !this.state.dispatcherIsOpen }); + } + + toggleSlider() { + this.setState({ sliderIsOpen: !this.state.sliderIsOpen }); + } + + openModal(content) { + this.modalContent = content; + this.setState({ modal: this.modal, modalIsOpen: true }); + } + closeModal() { + this.modalContent = null; + this.setState({ modalIsOpen: false }); + } + + render() { + const { monitor } = this.state; + const key = (this.socketOptions ? this.socketOptions.hostname : '') + this.state.instance; + return ( +