From b52b2d7696b7c3bd3ca6c219b700657fbceb287f Mon Sep 17 00:00:00 2001 From: Thomas Nordquist Date: Fri, 11 Jan 2019 18:52:12 +0100 Subject: [PATCH] Refactor --- app/src/actions/Settings.ts | 8 +-- app/src/actions/Sidebar.ts | 15 +++++ app/src/actions/Tree.ts | 4 +- app/src/actions/index.ts | 3 +- app/src/components/Settings.tsx | 16 ++--- .../Sidebar/Publish/HistoryEntry.tsx | 39 +++++++++++ .../Sidebar/Publish/Model/Message.ts | 7 ++ .../{Publisher.tsx => Publish/Publish.tsx} | 65 ++++++++++--------- app/src/components/Sidebar/Sidebar.tsx | 4 +- app/src/index.tsx | 10 ++- app/src/reducers/index.ts | 36 ++++++---- 11 files changed, 143 insertions(+), 64 deletions(-) create mode 100644 app/src/actions/Sidebar.ts create mode 100644 app/src/components/Sidebar/Publish/HistoryEntry.tsx create mode 100644 app/src/components/Sidebar/Publish/Model/Message.ts rename app/src/components/Sidebar/{Publisher.tsx => Publish/Publish.tsx} (79%) diff --git a/app/src/actions/Settings.ts b/app/src/actions/Settings.ts index 3fdfc4a..a620ead 100644 --- a/app/src/actions/Settings.ts +++ b/app/src/actions/Settings.ts @@ -1,19 +1,19 @@ -import { ActionTypes, NodeOrder } from '../reducers' +import { ActionTypes, NodeOrder, CustomAction } from '../reducers' -export const setAutoExpandLimit = (autoExpandLimit: number = 0) => { +export const setAutoExpandLimit = (autoExpandLimit: number = 0): CustomAction => { return { autoExpandLimit, type: ActionTypes.setAutoExpandLimit, } } -export const toggleSettingsVisibility = () => { +export const toggleSettingsVisibility = (): CustomAction => { return { type: ActionTypes.toggleSettingsVisibility, } } -export const setNodeOrder = (nodeOrder: NodeOrder = NodeOrder.none) => { +export const setNodeOrder = (nodeOrder: NodeOrder = NodeOrder.none): CustomAction => { return { nodeOrder, type: ActionTypes.setNodeOrder, diff --git a/app/src/actions/Sidebar.ts b/app/src/actions/Sidebar.ts new file mode 100644 index 0000000..bbaaff4 --- /dev/null +++ b/app/src/actions/Sidebar.ts @@ -0,0 +1,15 @@ +import { ActionTypes, CustomAction } from '../reducers' + +export const setPublishTopic = (topic: string): CustomAction => { + return { + publishTopic: topic, + type: ActionTypes.setPublishTopic, + } +} + +export const setPublishPayload = (payload: string): CustomAction => { + return { + publishPayload: payload, + type: ActionTypes.setPublishPayload, + } +} diff --git a/app/src/actions/Tree.ts b/app/src/actions/Tree.ts index eff6247..6fe8149 100644 --- a/app/src/actions/Tree.ts +++ b/app/src/actions/Tree.ts @@ -1,7 +1,7 @@ -import { ActionTypes } from '../reducers' +import { ActionTypes, CustomAction } from '../reducers' import * as q from '../../../backend/src/Model' -export const selectTopic = (topic: q.TreeNode) => { +export const selectTopic = (topic: q.TreeNode): CustomAction => { return { selectedTopic: topic, type: ActionTypes.selectTopic, diff --git a/app/src/actions/index.ts b/app/src/actions/index.ts index a3c5db6..d17ba68 100644 --- a/app/src/actions/index.ts +++ b/app/src/actions/index.ts @@ -1,4 +1,5 @@ import * as settingsActions from './Settings' import * as treeActions from './Tree' +import * as sidebarActions from './Sidebar' -export { settingsActions, treeActions } +export { settingsActions, treeActions, sidebarActions } diff --git a/app/src/components/Settings.tsx b/app/src/components/Settings.tsx index 639c32b..f29ff57 100644 --- a/app/src/components/Settings.tsx +++ b/app/src/components/Settings.tsx @@ -66,11 +66,9 @@ class Settings extends React.Component { className={classes.paper} tabIndex={0} role="button" - onClick={(e: React.MouseEvent) => e.stopPropagation()} - onKeyDown={(e: React.KeyboardEvent) => e.stopPropagation()} > - + @@ -93,7 +91,7 @@ class Settings extends React.Component { Auto Expand } displayEmpty={true} name="auto-expand" @@ -110,16 +108,14 @@ class Settings extends React.Component { } private renderNodeOrder() { - const { classes, actions, nodeOrder } = this.props + const { classes, nodeOrder } = this.props return (
Topic order } displayEmpty={true} name="node-order" @@ -132,6 +128,10 @@ class Settings extends React.Component {
) } + + private onChangeSorting = (e: React.ChangeEvent) => { + this.props.actions.setNodeOrder(e.target.value) + } } const mapStateToProps = (state: AppState) => { diff --git a/app/src/components/Sidebar/Publish/HistoryEntry.tsx b/app/src/components/Sidebar/Publish/HistoryEntry.tsx new file mode 100644 index 0000000..42e6917 --- /dev/null +++ b/app/src/components/Sidebar/Publish/HistoryEntry.tsx @@ -0,0 +1,39 @@ +import * as React from 'react' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import { sidebarActions } from '../../../actions' +import { Typography } from '@material-ui/core' +import Message from './Model/Message' + +interface Props { + message: Message + actions: any +} + +class HystoryEntry extends React.Component { + public render() { + const { message } = this.props + return ( + +
+
{message.topic}
+
{message.payload}
+
+ + ) + } + + private setPublishPreset = (e: React.MouseEvent) => { + e.stopPropagation() + this.props.actions.setPublishTopic(this.props.message.topic) + this.props.actions.setPublishPayload(this.props.message.payload) + } +} + +const mapDispatchToProps = (dispatch: any) => { + return { + actions: bindActionCreators(sidebarActions, dispatch), + } +} + +export default connect(null, mapDispatchToProps)(HystoryEntry) diff --git a/app/src/components/Sidebar/Publish/Model/Message.ts b/app/src/components/Sidebar/Publish/Model/Message.ts new file mode 100644 index 0000000..8b88dfe --- /dev/null +++ b/app/src/components/Sidebar/Publish/Model/Message.ts @@ -0,0 +1,7 @@ +interface Message { + topic: string + payload?: string + sent: Date +} + +export default Message diff --git a/app/src/components/Sidebar/Publisher.tsx b/app/src/components/Sidebar/Publish/Publish.tsx similarity index 79% rename from app/src/components/Sidebar/Publisher.tsx rename to app/src/components/Sidebar/Publish/Publish.tsx index 0d27b7c..5766d33 100644 --- a/app/src/components/Sidebar/Publisher.tsx +++ b/app/src/components/Sidebar/Publish/Publish.tsx @@ -1,11 +1,17 @@ import * as React from 'react' -import * as q from '../../../../backend/src/Model' -import { makePublishEvent, rendererEvents } from '../../../../events' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' +import * as q from '../../../../../backend/src/Model' +import { AppState } from '../../../reducers' +import { rendererEvents, makePublishEvent } from '../../../../../events' +import { sidebarActions } from '../../../actions' import Navigation from '@material-ui/icons/Navigation' import { Button, Fab, InputAdornment, FormControlLabel, Radio, RadioGroup, TextField, Typography, } from '@material-ui/core' +import Message from './Model/Message' +import HistoryEntry from './HistoryEntry' import * as brace from 'brace' import { default as AceEditor } from 'react-ace' @@ -19,17 +25,12 @@ import 'brace/theme/monokai' interface Props { node?: q.TreeNode connectionId?: string -} - -interface Message { - topic: string + topic?: string payload?: string - sent: Date + actions: any } interface State { - customTopic?: string - payload?: string mode: string history: Message[] } @@ -41,11 +42,12 @@ class Publisher extends React.Component { } private updatePayload = (value: string, event?: any) => { - this.setState({ payload: value }) + this.props.actions.setPublishPayload(value) } private updateTopic = (e: React.ChangeEvent) => { - this.setState({ customTopic: e.target.value }) + console.log(e.target.value) + this.props.actions.setPublishTopic(e.target.value) } private updateMode = (e: React.ChangeEvent<{}>, value: string) => { @@ -55,7 +57,7 @@ class Publisher extends React.Component { private publish = (e: React.MouseEvent) => { e.stopPropagation() const topic = this.currentTopic() || '' - const payload = this.state.payload + const payload = this.props.payload if (this.props.connectionId && topic) { rendererEvents.emit(makePublishEvent(this.props.connectionId), { topic, payload }) @@ -82,8 +84,10 @@ class Publisher extends React.Component { } private currentTopic(): string | undefined { - const { node } = this.props - return (this.state.customTopic !== undefined) ? this.state.customTopic : (node ? node.path() : undefined) + const { node, topic } = this.props + const selectedNodePath = (node ? node.path() : undefined) + + return (topic !== undefined) ? topic : selectedNodePath } private topic() { @@ -107,7 +111,7 @@ class Publisher extends React.Component { private onTopicBlur = (e: React.FocusEvent) => { if (!e.target.value) { - this.setState({ customTopic: undefined }) + this.props.actions.setPublishTopic(undefined) } } @@ -173,21 +177,9 @@ class Publisher extends React.Component { ) } - private loadHistoryEntry(entry: Message) { - this.setState({ - customTopic: entry.topic, - payload: entry.payload, - }) - } - private history() { const entries = this.state.history.map(message => ( - this.loadHistoryEntry(message)}> -
-
{message.topic}
-
{message.payload}
-
- + )) return ( @@ -209,7 +201,7 @@ class Publisher extends React.Component { width="100%" height="200px" showGutter={true} - value={this.state.payload} + value={this.props.payload} onChange={this.updatePayload} setOptions={this.editorOptions} editorProps={{ $blockScrolling: true }} @@ -219,4 +211,17 @@ class Publisher extends React.Component { } } -export default Publisher +const mapDispatchToProps = (dispatch: any) => { + return { + actions: bindActionCreators(sidebarActions, dispatch), + } +} + +const mapStateToProps = (state: AppState) => { + return { + topic: state.sidebar.publishTopic, + payload: state.sidebar.publishPayload, + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(Publisher) diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx index 0c941a7..d685821 100644 --- a/app/src/components/Sidebar/Sidebar.tsx +++ b/app/src/components/Sidebar/Sidebar.tsx @@ -5,7 +5,7 @@ import * as q from '../../../../backend/src/Model' import { ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary, Typography } from '@material-ui/core' import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles' import ExpandMore from '@material-ui/icons/ExpandMore' -import Publisher from './Publisher' +import Publish from './Publish/Publish' import Copy from '../Copy' import ValueRenderer from './ValueRenderer' @@ -104,7 +104,7 @@ class Sidebar extends React.Component { Publish - + diff --git a/app/src/index.tsx b/app/src/index.tsx index e864c1a..658b168 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -3,19 +3,17 @@ import * as ReactDOM from 'react-dom' import { Provider } from 'react-redux' import { createStore } from 'redux' import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles' - -import reducers, { NodeOrder } from './reducers' +import reducers, { NodeOrder, AppState } from './reducers' import App from './App' -declare var document: any - -const initialAppState = { +const initialAppState: AppState = { settings: { autoExpandLimit: 0, nodeOrder: NodeOrder.none, visible: false, }, - selectedNode: undefined, + sidebar: {}, + selectedTopic: undefined, } const store = createStore(reducers, initialAppState) diff --git a/app/src/reducers/index.ts b/app/src/reducers/index.ts index 0419b80..f7d4bf5 100644 --- a/app/src/reducers/index.ts +++ b/app/src/reducers/index.ts @@ -6,18 +6,28 @@ export enum ActionTypes { toggleSettingsVisibility = 'TOGGLE_SETTINGS_VISIBILITY', setNodeOrder = 'SET_NODE_ORDER', selectTopic = 'SELECT_TOPIC', + setPublishTopic = 'SET_PUBLISH_TOPIC', + setPublishPayload = 'SET_PUBLISH_PAYLOAD', } -interface CustomAction extends Action { +export interface CustomAction extends Action { type: ActionTypes, autoExpandLimit?: number nodeOrder?: NodeOrder selectedTopic?: q.TreeNode + publishTopic?: string + publishPayload?: string +} + +export interface SidebarState { + publishTopic?: string + publishPayload?: string } export interface AppState { settings: SettingsState, selectedTopic?: q.TreeNode + sidebar: SidebarState } export interface SettingsState { @@ -47,18 +57,27 @@ const reducer: Reducer = (state, action) => return { ...state, settings: { - visible: state.settings.visible, + ...state.settings, autoExpandLimit: action.autoExpandLimit, - nodeOrder: state.settings.nodeOrder, }, } + case ActionTypes.setPublishTopic: + console.log(state) + return { + ...state, + sidebar: { ...state.sidebar, publishTopic: action.publishTopic }, + } + case ActionTypes.setPublishPayload: + return { + ...state, + sidebar: { ...state.sidebar, publishPayload: action.publishPayload }, + } case ActionTypes.toggleSettingsVisibility: return { ...state, settings: { + ...state.settings, visible: !state.settings.visible, - autoExpandLimit: state.settings.autoExpandLimit, - nodeOrder: state.settings.nodeOrder, }, } case ActionTypes.selectTopic: @@ -67,7 +86,6 @@ const reducer: Reducer = (state, action) => } return { ...state, - settings: state.settings, selectedTopic: action.selectedTopic, } case ActionTypes.setNodeOrder: @@ -76,11 +94,7 @@ const reducer: Reducer = (state, action) => } return { ...state, - settings: { - visible: state.settings.visible, - autoExpandLimit: state.settings.autoExpandLimit, - nodeOrder: action.nodeOrder, - }, + settings: { ...state.settings, autoExpandLimit: state.settings.autoExpandLimit }, } default: return state