fix listen to channels

embark-ui/src/actions/index.js

@@ -97,6 +97,27 @@ export const contractProfile = {
   failure: (error) => action(CONTRACT_PROFILE[FAILURE], {error})
 };
 
+export const MESSAGE_VERSION = createRequestTypes('MESSAGE_VERSION');
+export const messageVersion = {
+  request: () => action(MESSAGE_VERSION[REQUEST]),
+  success: (messageVersion) => action(MESSAGE_VERSION[SUCCESS], {messageVersion}),
+  failure: (error) => action(MESSAGE_VERSION[FAILURE], {error})
+};
+
+export const MESSAGE_SEND = createRequestTypes('MESSAGE_SEND');
+export const messageSend = {
+  request: (body) => action(MESSAGE_SEND[REQUEST], {body}),
+  success: () => action(MESSAGE_SEND[SUCCESS]),
+  failure: (error) => action(MESSAGE_SEND[FAILURE], {error})
+};
+
+export const MESSAGE_LISTEN = createRequestTypes('MESSAGE_LISTEN');
+export const messageListen = {
+  request: (channel) => action(MESSAGE_LISTEN[REQUEST], {channel}),
+  success: (messages) => action(MESSAGE_LISTEN[SUCCESS], {messages}),
+  failure: (error) => action(MESSAGE_LISTEN[FAILURE], {error})
+};
+
 // Web Socket
 export const WATCH_NEW_PROCESS_LOGS = 'WATCH_NEW_PROCESS_LOGS';
 export const INIT_BLOCK_HEADER = 'INIT_BLOCK_HEADER';
@@ -113,25 +134,3 @@ export function initBlockHeader(){
     type: INIT_BLOCK_HEADER
   };
 }
-
-export const MESSAGE_VERSION = createRequestTypes('MESSAGE_VERSION');
-export const messageVersion = {
-  request: () => action(MESSAGE_VERSION[REQUEST]),
-  success: (version) => action(MESSAGE_VERSION[SUCCESS], {version}),
-  failure: (error) => action(MESSAGE_VERSION[FAILURE], {error})
-};
-
-
-export const MESSAGE_SEND = createRequestTypes('MESSAGE_SEND');
-export const messageSend = {
-  request: (body) => action(MESSAGE_SEND[REQUEST], {body}),
-  success: () => action(MESSAGE_SEND[SUCCESS]),
-  failure: (error) => action(MESSAGE_SEND[FAILURE], {error})
-};
-
-export const MESSAGE_LISTEN = createRequestTypes('MESSAGE_LISTEN');
-export const messageListen = {
-  request: (channel) => action(MESSAGE_LISTEN[REQUEST], {channel}),
-  success: (message) => action(MESSAGE_LISTEN[SUCCESS], {message}),
-  failure: (error) => action(MESSAGE_LISTEN[FAILURE], {error})
-};

embark-ui/src/components/Communication.js

@@ -62,8 +62,8 @@ class Communication extends Component {
               return (<Grid.Col md={4} key={`message-${i}`}>
                 <Card title={channelName}>
                   <Card.Body>
-                    {this.props.channels[channelName].messages.map((message, f) => {
-                      return <p key={`message-${i}-${f}`}>{message}</p>;
+                    {this.props.channels[channelName].map((data, f) => {
+                      return <p key={`message-${i}-${f}`}>{data.message}</p>;
                     })}
                   </Card.Body>
                 </Card>

embark-ui/src/containers/CommunicationContainer.js

@@ -4,6 +4,8 @@ import connect from "react-redux/es/connect/connect";
 import {Alert, Loader, Page} from 'tabler-react';
 import {messageSend, messageListen, messageVersion} from "../actions";
 import Communication from "../components/Communication";
+import Loading from "../components/Loading";
+import {getMessageVersion, getMessages} from "../reducers/selectors";
 
 class CommunicationContainer extends Component {
   componentDidMount() {
@@ -20,21 +22,24 @@ class CommunicationContainer extends Component {
 
   render() {
     let isEnabledMessage = '';
-    if (this.props.messages.version === undefined || this.props.messages.version === null) {
+    if (this.props.messageVersion === undefined || this.props.messageVersion === null) {
       isEnabledMessage =
         <Alert bsStyle="secondary "><Loader/> Checking Whisper support, please wait</Alert>;
-    } else if (!this.props.messages.version) {
+    } else if (!this.props.messageVersion) {
       isEnabledMessage = <Alert type="warning">The node you are using does not support Whisper</Alert>;
-    } else if (this.props.messages.version === -1) {
+    } else if (this.props.messageVersion === -1) {
       isEnabledMessage = <Alert type="warning">The node uses an unsupported version of Whisper</Alert>;
     }
 
+    if (!this.props.messages) {
+      return <Loading/>;
+    }
     return (
       <Page.Content title="Communication explorer">
         {isEnabledMessage}
         <Communication listenToMessages={(channel) => this.listenToChannel(channel)}
                        sendMessage={(channel, message) => this.sendMessage(channel, message)}
-                       channels={this.props.messages.channels}
+                       channels={this.props.messages}
                        subscriptions={this.props.messages.subscriptions}/>
       </Page.Content>
     );
@@ -45,12 +50,14 @@ CommunicationContainer.propTypes = {
   messageSend: PropTypes.func,
   messageListen: PropTypes.func,
   communicationVersion: PropTypes.func,
+  messageVersion: PropTypes.number,
   messages: PropTypes.object
 };
 
 function mapStateToProps(state) {
   return {
-    messages: state.messages
+    messages: getMessages(state),
+    messageVersion: getMessageVersion(state)
   };
 }
 

embark-ui/src/reducers/index.js

@@ -11,7 +11,10 @@ const entitiesDefaultState = {
   processLogs: [],
   contracts: [],
   contractProfiles: [],
-  commands: []
+  commands: [],
+  messages: [],
+  subscriptions: [],
+  messageVersion: null
 };
 
 const sorter = {
@@ -23,6 +26,9 @@ const sorter = {
   },
   processLogs: function(a, b) {
     return a.timestamp - b.timestamp;
+  },
+  messages: function(a, b) {
+    return a.time - b.time;
   }
 };
 
@@ -50,7 +56,10 @@ function entities(state = entitiesDefaultState, action) {
   for (let name of Object.keys(state)) {
     let filter = filtrer[name] || (() => true);
     let sort = sorter[name] || (() => true);
-    if (action[name] && action[name].length > 1) {
+    if (action[name] && !Array.isArray(action[name])) {
+      return {...state, [name]: action[name]};
+    }
+    if (action[name] && (!Array.isArray(action[name]) || action[name].length > 1)) {
       return {...state, [name]: [...action[name], ...state[name]].filter(filter).sort(sort)};
     }
     if (action[name] && action[name].length === 1) {

embark-ui/src/reducers/selectors.js

@@ -57,3 +57,18 @@ export function getContract(state, contractName) {
 export function getContractProfile(state, contractName) {
   return state.entities.contractProfiles.find((contractProfile => contractProfile.name === contractName));
 }
+
+export function getMessageVersion(state) {
+  return state.entities.messageVersion;
+}
+
+export function getMessages(state) {
+  const messages = {};
+  state.entities.messages.forEach(message => {
+    if (!messages[message.channel]) {
+      messages[message.channel] = []
+    }
+    messages[message.channel].push(message);
+  });
+  return messages;
+}

embark-ui/src/sagas/index.js

@@ -4,7 +4,7 @@ import {eventChannel} from 'redux-saga';
 import {all, call, fork, put, takeEvery, take} from 'redux-saga/effects';
 
 const {account, accounts, block, blocks, transaction, transactions, processes, commands, processLogs,
-       contracts, contract, contractProfile, messageSend, messageVersion} = actions;
+       contracts, contract, contractProfile, messageSend, messageVersion, messageListen} = actions;
 
 function *doRequest(entity, apiFn, payload) {
   const {response, error} = yield call(apiFn, payload);
@@ -125,7 +125,7 @@ export function *listenToMessages(action) {
   const channel = yield call(createChannel, socket);
   while (true) {
     const message = yield take(channel);
-    yield put({type: actions.MESSAGE_LISTEN[actions.SUCCESS], channel: action.channel, message});
+    yield put(messageListen.success([{channel: action.channel, message: message.data, time: message.time}]));
   }
 }