From 6abb5f1449b582f50796c71bbf20d8e4aac2f4de Mon Sep 17 00:00:00 2001
From: Simon Fondrie-Teitler <simonft@riseup.net>
Date: Thu, 18 May 2017 23:20:16 -0400
Subject: [refactor] refactor and add tests for Center and Confirmation

As a couple of initial, example tests, Center and Confirmation were
refactored and tests were set up and added with mocha, enzyme and
chai. Spinner was also refactored.
---
 ui/app/components/center.js        | 43 +++++++++---------------
 ui/app/components/confirmation.js  | 68 ++++++++++++++++++++------------------
 ui/app/components/spinner/index.js | 19 +++++------
 3 files changed, 59 insertions(+), 71 deletions(-)

(limited to 'ui/app')

diff --git a/ui/app/components/center.js b/ui/app/components/center.js
index 5e47d0cc..e7e074af 100644
--- a/ui/app/components/center.js
+++ b/ui/app/components/center.js
@@ -3,38 +3,27 @@
 //
 
 import React from 'react'
+import PropTypes from 'prop-types'
 
-class Center extends React.Component {
+const Center = props => (
+  <div className={"center-container center-" + props.direction}>
+    <div className="center-item" style={props.width ? {width: props.width + 'px'} : null}>
+      {props.children}
+    </div>
+  </div>
+)
 
-  static get defaultProps() {return{
-    width: null,
-    direction: 'both',
-  }}
-
-  constructor(props) {
-    super(props)
-  }
-
-  render() {
-    let style = null
-    if (this.props.width) {
-      style = {width: this.props.width + 'px'}
-    }
-    let className = "center-container center-" + this.props.direction
-    return (
-      <div className={className}>
-        <div className="center-item" style={style}>
-          {this.props.children}
-        </div>
-      </div>
-    )
-  }
+Center.defaultProps = {
+  width: null,
+  direction: 'both'
 }
 
 Center.propTypes = {
-  children: React.PropTypes.oneOfType([
-    React.PropTypes.element,
-    React.PropTypes.arrayOf(React.PropTypes.element)
+  children: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.arrayOf(
+      PropTypes.element
+    )
   ])
 }
 
diff --git a/ui/app/components/confirmation.js b/ui/app/components/confirmation.js
index 69186162..deceb47b 100644
--- a/ui/app/components/confirmation.js
+++ b/ui/app/components/confirmation.js
@@ -3,41 +3,43 @@
 //
 
 import React from 'react'
-import {Button, ButtonGroup, ButtonToolbar, Glyphicon, Modal}
-  from 'react-bootstrap'
+import {Button, ButtonToolbar, Modal} from 'react-bootstrap'
+import PropTypes from 'prop-types'
 
-export default class Confirmation extends React.Component {
+const Confirmation = props => (
+  <Modal>
+    <Modal.Header closeButton>
+      <Modal.Title>
+        {props.title}
+      </Modal.Title>
+    </Modal.Header>
+    <Modal.Body>
+      <ButtonToolbar>
+        <Button onClick={props.onAccept} bsStyle="success">
+          {props.acceptStr}
+        </Button>
+        <Button onClick={props.onCancel}>
+          {props.cancelStr}
+        </Button>
+      </ButtonToolbar>
+    </Modal.Body>
+  </Modal>
+)
 
-  static get defaultProps() {return{
-    title: "Are you sure?",
-    onCancel: null,
-    onAccept: null,
-    acceptStr: 'Accept',
-    cancelStr: 'Cancel'
-  }}
-
-  constructor(props) {
-    super(props)
-  }
+Confirmation.defaultProps = {
+  title: "Are you sure?",
+  onCancel: null,
+  onAccept: null,
+  acceptStr: 'Accept',
+  cancelStr: 'Cancel'
+}
 
-  render() {
-    return (
-      <Modal show={true} onHide={this.props.onCancel}>
-        <Modal.Header closeButton>
-          <Modal.Title>{this.props.title}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <ButtonToolbar>
-            <Button onClick={this.props.onAccept} bsStyle="success">
-              {this.props.acceptStr}
-            </Button>
-            <Button onClick={this.props.onCancel}>
-              {this.props.cancelStr}
-            </Button>
-          </ButtonToolbar>
-        </Modal.Body>
-      </Modal>
-    )
-  }
+Confirmation.propTypes = {
+  className: PropTypes.string,
+  onCancel: PropTypes.func.isRequired,
+  onAccept: PropTypes.func.isRequired,
+  acceptStr: PropTypes.string,
+  cancelStr:  PropTypes.string
 }
 
+export default Confirmation
diff --git a/ui/app/components/spinner/index.js b/ui/app/components/spinner/index.js
index ffc32850..6cd34770 100644
--- a/ui/app/components/spinner/index.js
+++ b/ui/app/components/spinner/index.js
@@ -1,15 +1,12 @@
 import React from 'react';
 import './spinner.css';
 
-class Spinner extends React.Component {
-  render() {
-    let props = {}
-    return <div className="spinner">
-      <div className="spin1"></div>
-      <div className="spin2"></div>
-      <div className="spin3"></div>
-    </div>
-  }
-}
+const Spinner = props => (
+  <div className="spinner">
+    <div className="spin1"></div>
+    <div className="spin2"></div>
+    <div className="spin3"></div>
+  </div>
+)
 
-export default Spinner
\ No newline at end of file
+export default Spinner
-- 
cgit v1.2.3