From e098c2cb7d3fed64fc5af87956e41ffb1e259f8a Mon Sep 17 00:00:00 2001
From: Jonathan Rainville <rainville.jonathan@gmail.com>
Date: Mon, 6 Aug 2018 13:43:11 -0400
Subject: [PATCH] weird

---
 embark-ui/src/components/ExplorerLayout.js    |  62 ---------
 .../src/containers/CommunicationContainer.js  | 127 ++++++++++++++++++
 2 files changed, 127 insertions(+), 62 deletions(-)
 delete mode 100644 embark-ui/src/components/ExplorerLayout.js
 create mode 100644 embark-ui/src/containers/CommunicationContainer.js

diff --git a/embark-ui/src/components/ExplorerLayout.js b/embark-ui/src/components/ExplorerLayout.js
deleted file mode 100644
index bb7299c75..000000000
--- a/embark-ui/src/components/ExplorerLayout.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react';
-import {NavLink, Route, Switch, withRouter} from 'react-router-dom';
-import {
-  Page,
-  Grid,
-  List
-} from "tabler-react";
-
-import AccountsContainer from '../containers/AccountsContainer';
-import AccountContainer from '../containers/AccountContainer';
-import BlocksContainer from '../containers/BlocksContainer';
-import BlockContainer from '../containers/BlockContainer';
-import TransactionsContainer from '../containers/TransactionsContainer';
-import TransactionContainer from '../containers/TransactionContainer';
-
-const ExplorerLayout = () => (
-  <Grid.Row>
-    <Grid.Col md={3}>
-      <Page.Title className="my-5">Explorer</Page.Title>
-      <div>
-        <List.Group transparent={true}>
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to="/embark/explorer/accounts"
-            icon="users"
-            RootComponent={withRouter(NavLink)}
-          >
-            Accounts
-          </List.GroupItem>
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to="/embark/explorer/blocks"
-            icon="book-open"
-            RootComponent={withRouter(NavLink)}
-          >
-            Blocks
-          </List.GroupItem>
-          <List.GroupItem
-            className="d-flex align-items-center"
-            to="/embark/explorer/transactions"
-            icon="activity"
-            RootComponent={withRouter(NavLink)}
-          >
-            Transactions
-          </List.GroupItem>
-        </List.Group>
-      </div>
-    </Grid.Col>
-    <Grid.Col md={9}>
-      <Switch>
-        <Route exact path="/embark/explorer/accounts" component={AccountsContainer} />
-        <Route exact path="/embark/explorer/accounts/:address" component={AccountContainer} />
-        <Route exact path="/embark/explorer/blocks" component={BlocksContainer} />
-        <Route exact path="/embark/explorer/blocks/:blockNumber" component={BlockContainer} />
-        <Route exact path="/embark/explorer/transactions" component={TransactionsContainer} />
-        <Route exact path="/embark/explorer/transactions/:hash" component={TransactionContainer} />
-      </Switch>
-    </Grid.Col>
-  </Grid.Row>
-);
-
-export default ExplorerLayout;
diff --git a/embark-ui/src/containers/CommunicationContainer.js b/embark-ui/src/containers/CommunicationContainer.js
new file mode 100644
index 000000000..e7537b73b
--- /dev/null
+++ b/embark-ui/src/containers/CommunicationContainer.js
@@ -0,0 +1,127 @@
+import React, {Component} from 'react';
+import {Alert, Button, Form, Icon} from 'tabler-react';
+
+class CommunicationContainer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      listenTo: '',
+      channel: '',
+      message: '',
+      subscribedChannels: [],
+      messageList: [],
+      logs: []
+    };
+  }
+
+  handleChange(e, name) {
+    this.setState({
+      [name]: e.target.value
+    });
+  }
+
+  sendMessage(e) {
+    e.preventDefault();
+    // TODO send message via API
+    console.log('Send', 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(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>);
+    this.setState({
+      subscribedChannels
+    });
+
+    console.log('Listen to', this.state.listenTo);
+    // TODO listen to channel via API
+    /*EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]}, (error, message) => {
+      const messageList = this.state.messageList;
+      if (error) {
+        messageList.push(<span className="alert-danger">Error: {error}</span>);
+      } else {
+        messageList.push(<span>Channel: <b>{message.topic}</b> |  Message: <b>{message.data}</b></span>);
+      }
+      this.setState({
+        messageList
+      });
+    });*/
+
+    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() {
+    let isEnabledMessage = '';
+    if (this.enabled === false) {
+      isEnabledMessage = <React.Fragment>
+        <Alert type="warning">The node you are using does not support Whisper</Alert>
+        <Alert type="warning">The node uses an unsupported version of Whisper</Alert>
+      </React.Fragment>;
+    } else if (!this.enabled) {
+      isEnabledMessage = <Alert bsStyle="secondary "><Icon name="refresh-cw" /> Checking Whisper support, please wait</Alert>;
+    }
+
+    return (
+      <React.Fragment>
+        {isEnabledMessage}
+        <h3>Listen To channel</h3>
+        <Form.FieldSet>
+          <Form.Group label="Whisper channel" isRequired>
+            <Form.Input name="text-input"
+                        defaultValue={this.state.listenTo}
+                        placeholder="channel"
+                        onChange={e => this.handleChange(e, 'listenTo')}/>
+          </Form.Group>
+          <Button color="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
+          <div id="subscribeList">
+            {this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)}
+          </div>
+          <p>Messages received:</p>
+          <div id="messagesList">
+            {this.state.messageList.map((item, i) => <p key={i}>{item}</p>)}
+          </div>
+        </Form.FieldSet>
+
+
+        <h3>Send Message</h3>
+
+
+        <Form.FieldSet>
+          <Form.Group label="Whisper channel" isRequired>
+            <Form.Input name="text-input"
+                        defaultValue={this.state.channel}
+                        placeholder="channel"
+                        onChange={e => this.handleChange(e, 'channel')}/>
+          </Form.Group>
+          <Form.Group label="Message" isRequired>
+            <Form.Input name="text-input"
+                        defaultValue={this.state.message}
+                        placeholder="message"
+                        onChange={e => this.handleChange(e, 'message')}/>
+          </Form.Group>
+          <Button color="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
+
+        </Form.FieldSet>
+
+        <p>Javascript calls being made: </p>
+        <div className="logs">
+          <p>EmbarkJS.Messages.setProvider&lpar;&apos;whisper&apos;&rpar;</p>
+          {
+            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+          }
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default CommunicationContainer;