refactor(components/Communications): move component to Utilities

embark-ui/src/components/Communication.js

@@ -1,6 +1,18 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
-import {Button, Form, Card, Grid, List} from 'tabler-react';
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Col,
+  FormGroup,
+  Input,
+  Row,
+  Label,
+  ListGroup,
+  ListGroupItem
+} from 'reactstrap';
 
 class Communication extends Component {
   constructor(props) {
@@ -32,66 +44,77 @@ class Communication extends Component {
 
   render() {
     return (
-      <React.Fragment>
-        <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>
-        </Form.FieldSet>
+      <Row className="mt-3 justify-content-md-center">
+        <Col xs="12" sm="9" lg="9">
+          <Card>
+            <CardHeader>
+              <strong>Listen to channel</strong>
+            </CardHeader>
+            <CardBody>
+              <FormGroup>
+                <Label htmlFor="listenTo">Whisper channel</Label>
+                <Input id="listenTo" placeholder="Channel" value={this.state.listenTo} onChange={e => this.handleChange(e, 'listenTo')} />
+              </FormGroup>
+              <Button color="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
 
-        {this.props.subscriptions && this.props.subscriptions.length > 0 &&
-        <div id="subscribeList">
-          <h4>Subscribed channels:</h4>
-          <List>
-            {this.props.subscriptions.map((item, i) => <List.Item key={i}>{item}</List.Item>)}
-          </List>
-        </div>
-        }
+              {this.props.subscriptions && this.props.subscriptions.length > 0 &&
+              <React.Fragment>
+                <h4>Subscribed channels:</h4>
+                <ListGroup>
+                  {this.props.subscriptions.map((item, i) => <ListGroupItem key={i}>{item}</ListGroupItem>)}
+                </ListGroup>
+              </React.Fragment>
+              }
 
-        {this.props.channels && Boolean(Object.keys(this.props.channels).length) &&
-        <React.Fragment>
-          <h4>Messages received:</h4>
+              {this.props.channels && Boolean(Object.keys(this.props.channels).length) &&
+              <React.Fragment>
+                <h4>Messages received:</h4>
 
-          <Grid.Row messagesList>
-            {Object.keys(this.props.channels).map((channelName, i) => {
-              return (<Grid.Col md={4} key={`message-${i}`}>
-                <Card title={channelName}>
-                  <Card.Body>
-                    {this.props.channels[channelName].map((data, f) => {
-                      return <p key={`message-${i}-${f}`}>{data.message}</p>;
-                    })}
-                  </Card.Body>
-                </Card>
-              </Grid.Col>);
-            })}
-          </Grid.Row>
-        </React.Fragment>
-        }
+                <Row>
+                  {Object.keys(this.props.channels).map((channelName, i) => {
+                    return (<Col md={4} key={`message-${i}`}>
+                      <Card>
+                        <CardHeader>
+                          <strong>{channelName}</strong>
+                        </CardHeader>
+                        <CardBody>
+                          {this.props.channels[channelName].map((data, f) => {
+                            return <p key={`message-${i}-${f}`}>{data.message}</p>;
+                          })}
+                        </CardBody>
+                      </Card>
+                    </Col>);
+                  })}
+                </Row>
+              </React.Fragment>
+              }
+            </CardBody>
+          </Card>
+          <Card>
+            <CardHeader>
+              <strong>Send message</strong>
+            </CardHeader>
+            <CardBody>
+              <FormGroup label="Whisper channel">
+                <Label htmlFor="sendChannel">Whisper channel</Label>
+                <Input value={this.state.channel}
+                      id="sendChannel"
+                      placeholder="Channel"
+                      onChange={e => this.handleChange(e, 'channel')}/>
+              </FormGroup>
+              <FormGroup label="Message">
+                <Label htmlFor="message">Message</Label>
+                <Input value={this.state.message}
+                      placeholder="Message"
+                      id="message"
+                      onChange={e => this.handleChange(e, 'message')}/>
+              </FormGroup>
+              <Button color="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
 
-        <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>
-      </React.Fragment>
+            </CardBody>
+          </Card>
+        </Col>
+      </Row>
     );
   }
 }

embark-ui/src/components/Converter.js

@@ -37,7 +37,7 @@ class Converter extends React.Component {
   render() {
     return(
       <Row className="mt-3 justify-content-md-center">
-        <Col xs="12" sm="9" lg="6">
+        <Col xs="12" sm="9" lg="9">
           <Card>
             <CardHeader>
               <strong>Ether Converter</strong>

embark-ui/src/components/ExplorerLayout.js

@@ -12,15 +12,11 @@ import BlocksContainer from '../containers/BlocksContainer';
 import BlockContainer from '../containers/BlockContainer';
 import TransactionsContainer from '../containers/TransactionsContainer';
 import TransactionContainer from '../containers/TransactionContainer';
-import CommunicationContainer from '../containers/CommunicationContainer';
-import EnsContainer from '../containers/EnsContainer';
 
 const groupItems = [
   {to: "/embark/explorer/accounts", icon: "users", value: "Accounts"},
   {to: "/embark/explorer/blocks", icon: "book-open", value: "Blocks"},
-  {to: "/embark/explorer/transactions", icon: "activity", value: "Transactions"},
-  {to: "/embark/explorer/communication", icon: "phone-call", value: "Communication"},
-  {to: "/embark/explorer/ens", icon: "disc", value: "ENS"}
+  {to: "/embark/explorer/transactions", icon: "activity", value: "Transactions"}
 ];
 
 const className = "d-flex align-items-center";
@@ -53,8 +49,6 @@ const ExplorerLayout = () => (
         <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} />
-        <Route exact path="/embark/explorer/communication" component={CommunicationContainer} />
-        <Route exact path="/embark/explorer/ens" component={EnsContainer} />
       </Switch>
     </Grid.Col>
   </Grid.Row>

embark-ui/src/components/Layout.js

@@ -27,13 +27,13 @@ const sidebarNavItems = {items: [
     {url: "/embark/explorer/accounts", icon: "fa fa-users", name: "Accounts"},
     {url: "/embark/explorer/blocks", icon: "fa fa-stop", name: "Blocks"},
     {url: "/embark/explorer/transactions", icon: "fa fa-tree", name: "Transactions"},
-    {url: "/embark/explorer/communication", icon: "fa fa-phone", name: "Communication"},
-    {url: "/embark/explorer/ens", icon: "fa fa-circle", name: "ENS"}
   ]},
   {name: "Fiddle", url: "/embark/fiddle", icon: "fa fa-codepen"},
   {name: "Documentation", url: "/embark/documentation", icon: "fa fa-book"},
   {name: "Utils", url: "/embark/utilities/converter", icon: "fa fa-cog", children: [
-    {url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"}
+    {url: "/embark/utilities/converter", icon: "fa fa-plug", name: "Converter"},
+    {url: "/embark/utilities/communication", icon: "fa fa-phone", name: "Communication"},
+    {url: "/embark/utilities/ens", icon: "fa fa-circle", name: "ENS"}
   ]},
 ]};
 

embark-ui/src/components/UtilsLayout.js

@@ -2,10 +2,14 @@ import React from 'react';
 import {Route, Switch} from 'react-router-dom';
 
 import ConverterContainer from '../containers/ConverterContainer';
+import CommunicationContainer from '../containers/CommunicationContainer';
+import EnsContainer from '../containers/EnsContainer';
 
 const UtilsLayout = () => (
   <Switch>
     <Route exact path="/embark/utilities/converter" component={ConverterContainer} />
+    <Route exact path="/embark/utilities/communication" component={CommunicationContainer} />
+    <Route exact path="/embark/utilities/ens" component={EnsContainer} />
   </Switch>
 );
 

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, Page} from 'tabler-react';
+import { Alert } from 'reactstrap';
 import {messageSend, messageListen} from "../actions";
 import Communication from "../components/Communication";
 import {getMessages, getMessageChannels, isOldWeb3, isWeb3Enabled} from "../reducers/selectors";
@@ -16,7 +16,7 @@ class CommunicationContainer extends Component {
   }
 
   web3DisabledWarning() {
-    return <Alert type="warning">The node you are using does not support Whisper</Alert>;
+    return <Alert color="danger">The node you are using does not support Whisper</Alert>;
   }
 
   web3Enabled() {
@@ -24,7 +24,7 @@ class CommunicationContainer extends Component {
   }
 
   web3OldWarning() {
-    return <Alert type="warning">The node uses an unsupported version of Whisper</Alert>;
+    return <Alert color="danger">The node uses an unsupported version of Whisper</Alert>;
   }
 
   showCommunication() {
@@ -36,9 +36,9 @@ class CommunicationContainer extends Component {
 
   render() {
     return (
-      <Page.Content title="Communication explorer">
+      <React.Fragment>
         {this.props.isWeb3Enabled ? this.web3Enabled() : this.web3DisabledWarning()}
-      </Page.Content>
+      </React.Fragment>
     );
   }
 }