From df3bce145d3ca72e5bb006c5b29c45978a0319b8 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Fri, 12 Oct 2018 12:23:02 +0200
Subject: [PATCH] refactor(components/Ens): move ENS components to Utilities

---
 embark-ui/src/components/EnsLookup.js    | 32 +++++++++------
 embark-ui/src/components/EnsRegister.js  | 50 ++++++++++++++----------
 embark-ui/src/components/EnsResolve.js   | 30 ++++++++------
 embark-ui/src/containers/EnsContainer.js | 20 +++++-----
 4 files changed, 77 insertions(+), 55 deletions(-)

diff --git a/embark-ui/src/components/EnsLookup.js b/embark-ui/src/components/EnsLookup.js
index b8446b7f3..1fcf8c44f 100644
--- a/embark-ui/src/components/EnsLookup.js
+++ b/embark-ui/src/components/EnsLookup.js
@@ -1,10 +1,14 @@
 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {
   Alert,
+  FormGroup,
+  Input,
   Button,
-  Form
-} from "tabler-react";
-import PropTypes from 'prop-types';
+  Card,
+  CardHeader,
+  CardBody
+} from 'reactstrap';
 
 class EnsLookup extends Component {
   constructor(props) {
@@ -28,24 +32,26 @@ class EnsLookup extends Component {
   showResult() {
     let ensRecord = this.props.ensRecords.find((record) => record.address === this.state.address);
     if (ensRecord) {
-      return <Alert type="success">The name is: {ensRecord.name}</Alert>;
+      return <Alert className="mt-3" color="success">The name is: {ensRecord.name}</Alert>;
     } else {
-      return <Alert type="danger">We could not find a name for this address</Alert>;
+      return <Alert className="mt-3" color="danger">We could not find a name for this address</Alert>;
     }
   }
 
   render(){
     return (
-      <React.Fragment>
-        <h3>Lookup</h3>
-        <Form.FieldSet>
-          <Form.Group>
-            <Form.Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/>
-          </Form.Group>
+      <Card>
+        <CardHeader>
+          <strong>ENS Lookup</strong>
+        </CardHeader>
+        <CardBody>
+          <FormGroup>
+            <Input placeholder="Enter an address" onChange={e => this.handleChange(e)}/>
+          </FormGroup>
           <Button color="primary" onClick={() => this.handleLookup()}>Lookup</Button>
           {this.state.showResult && this.showResult()}
-        </Form.FieldSet>
-      </React.Fragment>
+        </CardBody>
+      </Card>
     );
   }
 }
diff --git a/embark-ui/src/components/EnsRegister.js b/embark-ui/src/components/EnsRegister.js
index 5024dc0a4..7e309fbdb 100644
--- a/embark-ui/src/components/EnsRegister.js
+++ b/embark-ui/src/components/EnsRegister.js
@@ -2,8 +2,14 @@ import React, {Component} from 'react';
 import {
   Alert,
   Button,
-  Form, Grid
-} from "tabler-react";
+  FormGroup,
+  Input,
+  Row,
+  Col,
+  Card,
+  CardHeader,
+  CardBody
+} from "reactstrap";
 import PropTypes from 'prop-types';
 
 class EnsRegister extends Component {
@@ -31,33 +37,35 @@ class EnsRegister extends Component {
 
   showResult() {
     if (this.props.ensErrors) {
-      return <Alert type="danger">An error happened: {this.props.ensErrors}</Alert>;
+      return <Alert className="mt-3" color="danger">An error happened: {this.props.ensErrors}</Alert>;
     } else {
-      return <Alert type="success">Successfully registered</Alert>;
+      return <Alert className="mt-3" color="success">Successfully registered</Alert>;
     }
   }
 
   render(){
     return (
-      <React.Fragment>
-        <h3>Register</h3>
-        <Form.FieldSet>
-          <Grid.Row>
-            <Grid.Col md={6}>
-              <Form.Group>
-                <Form.Input placeholder="Enter a subdomain" onChange={e => this.handleChange(e, "subdomain")}/>
-              </Form.Group>
-            </Grid.Col>
-            <Grid.Col md={6}>
-              <Form.Group>
-                <Form.Input placeholder="Enter an address" onChange={e => this.handleChange(e, "address")}/>
-              </Form.Group>
-            </Grid.Col>
-          </Grid.Row>
+      <Card>
+        <CardHeader>
+          <strong>ENS Register</strong>
+        </CardHeader>
+        <CardBody>
+          <Row>
+            <Col md={6}>
+              <FormGroup>
+                <Input placeholder="Enter a subdomain" onChange={e => this.handleChange(e, "subdomain")}/>
+              </FormGroup>
+            </Col>
+            <Col md={6}>
+              <FormGroup>
+                <Input placeholder="Enter an address" onChange={e => this.handleChange(e, "address")}/>
+              </FormGroup>
+            </Col>
+          </Row>
           <Button color="primary" onClick={() => this.handleRegister()}>Register</Button>
-        </Form.FieldSet>
         {this.state.showResult && this.showResult()}
-      </React.Fragment>
+        </CardBody>
+      </Card>
     );
   }
 }
diff --git a/embark-ui/src/components/EnsResolve.js b/embark-ui/src/components/EnsResolve.js
index 879bacbde..4d8c4b882 100644
--- a/embark-ui/src/components/EnsResolve.js
+++ b/embark-ui/src/components/EnsResolve.js
@@ -2,8 +2,12 @@ import React, {Component} from 'react';
 import {
   Alert,
   Button,
-  Form
-} from "tabler-react";
+  FormGroup,
+  Input,
+  Card,
+  CardHeader,
+  CardBody
+} from "reactstrap";
 import PropTypes from 'prop-types';
 
 class EnsResolve extends Component {
@@ -28,24 +32,26 @@ class EnsResolve extends Component {
   showResult() {
     let ensRecord = this.props.ensRecords.find((record) => record.name === this.state.name);
     if (ensRecord) {
-      return <Alert type="success">The address is: {ensRecord.address}</Alert>;
+      return <Alert className="mt-3" color="success">The address is: {ensRecord.address}</Alert>;
     } else {
-      return <Alert type="danger">We could not find an address for this name</Alert>;
+      return <Alert className="mt-3" color="danger">We could not find an address for this name</Alert>;
     }
   }
 
   render(){
     return (
-      <React.Fragment>
-        <h3>Resolve</h3>
-        <Form.FieldSet>
-          <Form.Group>
-            <Form.Input placeholder="Enter a name" onChange={e => this.handleChange(e)}/>
-          </Form.Group>
+      <Card>
+        <CardHeader>
+          <strong>ENS Resolver</strong>
+        </CardHeader>
+        <CardBody>
+          <FormGroup>
+            <Input placeholder="Enter a name" onChange={e => this.handleChange(e)}/>
+          </FormGroup>
           <Button color="primary" onClick={() => this.handleResolve()}>Resolve</Button>
           {this.state.showResult && this.showResult()}
-        </Form.FieldSet>
-      </React.Fragment>
+        </CardBody>
+      </Card>
     );
   }
 }
diff --git a/embark-ui/src/containers/EnsContainer.js b/embark-ui/src/containers/EnsContainer.js
index 630991f85..68a7e0d6b 100644
--- a/embark-ui/src/containers/EnsContainer.js
+++ b/embark-ui/src/containers/EnsContainer.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, Row, Col} from 'reactstrap';
 import {ensRecord, ensRecords} from "../actions";
 import EnsRegister from "../components/EnsRegister";
 import EnsLookup from "../components/EnsLookup";
@@ -12,23 +12,25 @@ class EnsContainer extends Component {
 
   showEns() {
     return (
-      <React.Fragment>
-        <EnsLookup lookup={this.props.lookup} ensRecords={this.props.ensRecords}/>
-        <EnsResolve resolve={this.props.resolve} ensRecords={this.props.ensRecords}/>
-        <EnsRegister register={this.props.register} ensRecords={this.props.ensRecords} ensErrors={this.props.ensErrors}/>
-      </React.Fragment>
+      <Row className="mt-3 justify-content-md-center">
+        <Col xs="12" sm="9" lg="6">
+          <EnsLookup lookup={this.props.lookup} ensRecords={this.props.ensRecords}/>
+          <EnsResolve resolve={this.props.resolve} ensRecords={this.props.ensRecords}/>
+          <EnsRegister register={this.props.register} ensRecords={this.props.ensRecords} ensErrors={this.props.ensErrors}/>
+        </Col>
+      </Row>
     );
   }
 
   showWarning() {
-    return <Alert type="warning">Please enable Ens in Embark first</Alert>;
+    return <Alert color="warning">Please enable Ens in Embark first</Alert>;
   }
 
   render() {
     return (
-      <Page.Content title="Ens">
+      <React.Fragment>
         {this.props.isEnsEnabled ? this.showEns() : this.showWarning()}
-      </Page.Content>
+      </React.Fragment>
     );
   }
 }