diff --git a/embark-ui/src/components/Communication.js b/embark-ui/src/components/Communication.js index 888364b30..27f974cd0 100644 --- a/embark-ui/src/components/Communication.js +++ b/embark-ui/src/components/Communication.js @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; import React, {Component} from 'react'; -import {Button, Form} from 'tabler-react'; +import {Button, Form, Card, Grid, List} from 'tabler-react'; class Communication extends Component { constructor(props) { @@ -11,8 +11,7 @@ class Communication extends Component { channel: '', message: '', subscribedChannels: [], - messageList: [], - logs: [] + messageList: [] }; } @@ -25,25 +24,18 @@ class Communication extends Component { sendMessage(e) { e.preventDefault(); this.props.sendMessage(this.state.channel, this.state.message); - this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})"); } listenToChannel(e) { e.preventDefault(); const subscribedChannels = this.state.subscribedChannels; - subscribedChannels.push(Subscribed to {this.state.listenTo}. Now try sending a message); + subscribedChannels.push(this.state.listenTo); this.setState({ subscribedChannels }); this.props.listenToMessages(this.state.listenTo); - this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})"); - } - - addToLog(txt) { - this.state.logs.push(txt); - this.setState({logs: this.state.logs}); } render() { @@ -58,26 +50,37 @@ class Communication extends Component { onChange={e => this.handleChange(e, 'listenTo')}/> -
- {this.state.subscribedChannels.map((item, i) =>

{item}

)} -
- {this.props.channels && Boolean(Object.keys(this.props.channels).length) && - -

Messages received:

-
- {Object.keys(this.props.channels).map((channelName, i) => { - return ( -

{channelName}

- {this.props.channels[channelName].messages.map((message, f) => { - return

{message}

; - })} -
); - })} -
-
- } + {this.state.subscribedChannels.length > 0 && +
+

Subscribed channels:

+ + {this.state.subscribedChannels.map((item, i) => {item})} + +
+ } + + {this.props.channels && Boolean(Object.keys(this.props.channels).length) && + +

Messages received:

+ + + {Object.keys(this.props.channels).map((channelName, i) => { + return ( + + + {this.props.channels[channelName].messages.map((message, f) => { + return

{message}

; + })} +
+
+
); + })} +
+
+ } +

Send Message

@@ -96,14 +99,6 @@ class Communication extends Component { - -

Javascript calls being made:

-
-

EmbarkJS.Messages.setProvider('whisper')

- { - this.state.logs.map((item, i) =>

{item}

) - } -
); } diff --git a/embark-ui/src/containers/CommunicationContainer.js b/embark-ui/src/containers/CommunicationContainer.js index d02a55bc6..fc18a8663 100644 --- a/embark-ui/src/containers/CommunicationContainer.js +++ b/embark-ui/src/containers/CommunicationContainer.js @@ -1,7 +1,7 @@ import PropTypes from "prop-types"; import React, {Component} from 'react'; import connect from "react-redux/es/connect/connect"; -import {Alert, Icon} from 'tabler-react'; +import {Alert, Icon, Page} from 'tabler-react'; import {messageSend, messageListen, messageVersion} from "../actions"; import Communication from "../components/Communication"; @@ -30,12 +30,12 @@ class CommunicationContainer extends Component { } return ( - + {isEnabledMessage} this.listenToChannel(channel)} sendMessage={(channel, message) => this.sendMessage(channel, message)} channels={this.props.channels}/> - + ); } }