Merge pull request #1023 from knod/clean-style-3

Style cleans '/src/components' through 'ExternalLink.js'. #1018

src/components/BetaWarning.js

@@ -1,22 +1,26 @@
 import React from 'react';
-import { Menu, Responsive } from 'semantic-ui-react';
+import {
+  Menu,
+  Responsive,
+} from 'semantic-ui-react';
 
-const BetaWarning = function (props) {
+
+const BetaWarning = function () {
   return (
     <Menu.Item>
       <Responsive
-        as='strong'
+        as = { `strong` }
         { ...Responsive.onlyTablet }>
         This tool is a prototype.
       </Responsive>
       <Responsive
-        as='strong'
+        as = { `strong` }
         { ...Responsive.onlyComputer }>
         This tool is a prototype and should not be used to make financial decisions.
       </Responsive>
     </Menu.Item>
   );
-};  // End BetaWarning(<>)
+};
 
 
 export { BetaWarning };

src/components/CustomClient.js

@@ -1,5 +1,8 @@
 import React from 'react';
-import { Form, Message } from 'semantic-ui-react';
+import {
+  Form,
+  Message,
+} from 'semantic-ui-react';
 
 
 /**
@@ -8,11 +11,11 @@ import { Form, Message } from 'semantic-ui-react';
  * @param {object} toLoad Parsed JSON object.
  */
 
+// @todo Change this component to a more generic `<LoadJSON>`
+
 /** Accept data from a user's JSON object and send it to `load`
  *     callback. Currently for development only.
  *
- * @todo Change this component to a more generic `<LoadJSON>`
- * 
  * @param {object} props
  * @param {load} props.load
  * @param {object} props.toRestore Data to use to reset
@@ -24,7 +27,7 @@ class CustomClient extends React.Component {
   state = {
     toLoad: null,  // parsed json
     error:  null,
-    json:   '',
+    json:   ``,
   };
 
   load = (toLoad) => {
@@ -35,7 +38,7 @@ class CustomClient extends React.Component {
     this.setState({
       toLoad: null,
       error:  null,
-      json:   '',
+      json:   ``,
     });
 
     this.props.load({ toLoad: toLoad });
@@ -52,9 +55,9 @@ class CustomClient extends React.Component {
   };
 
   handleChange = (_event, inputProps) => {
-    const { value } = inputProps;
+    let { value } = inputProps;
     try {
-      const newClient = JSON.parse(value);
+      let newClient = JSON.parse(value);
       this.setState({
         toLoad: newClient,
         error:  null,
@@ -74,33 +77,34 @@ class CustomClient extends React.Component {
 
     return (
       <Form
-        error={ error !== null }
-        onSubmit={ this.submit }>
+        error    = { error !== null }
+        onSubmit = { this.submit }>
+
         <Form.Field>
           <label>Client JSON</label>
           <Form.Input
-            type={ 'text' }
-            value={ json }
-            onChange={ this.handleChange } />
+            type     = { `text` }
+            value    = { json }
+            onChange = { this.handleChange } />
         </Form.Field>
+
         <Message 
           error
-          header={ 'JSON Parse Failed!' }
-          content={ error && error.message } />
-        <div className = { `load-buttons` }>
+          header  = { `JSON Parse Failed!` }
+          content = { error && error.message } />
+
+        <div className={ `load-buttons` }>
           <Form.Button
-            type={ 'submit' }
-            disabled={ toLoad === null }>
+            type     = { `submit` }
+            disabled = { toLoad === null }>
             Import Data
           </Form.Button>
-          <Form.Button
-            onClick = { this.reset }>
-            Reset
-          </Form.Button>
+          <Form.Button onClick={ this.reset }>Reset</Form.Button>
         </div>
+
       </Form>
     );
-  }
-}
+  };
+};  // Ends <CustomClient>
 
 export { CustomClient };

src/components/ExternalLink.js

@@ -1,14 +1,15 @@
 import React from 'react';
-/**
- * Link that opens new tab
- */
+
+/** Link that opens new tab */
 const ExternalLink = function ({ href, children, ...otherProps }) {
   return (
     <a
       href   = { href }
       target = { `_blank` }
       { ...otherProps }>
-      {children}
+
+      { children }
+
     </a>
   );
 };

src/components/details.js

@@ -46,6 +46,7 @@ class HeadingWithDetail extends Component {
       return null;
     }
 
+    // @todo This always has two children now, so this can be simplified
     let top       = children[ 0 ] || children,
         details   = children[ 1 ] || null,
         // Has a green question mark icon by default
@@ -59,11 +60,11 @@ class HeadingWithDetail extends Component {
     }
 
     return (
-      <div className = { `heading-with-detail` }>
+      <div className={ `heading-with-detail` }>
 
         <Surrounder
           Right = {
-            <span onKeyDown = { this.onKeyDown } >
+            <span onKeyDown={ this.onKeyDown } >
               <Icon
                 tabIndex  = { 0 }
                 name      = { iconName }
@@ -79,16 +80,18 @@ class HeadingWithDetail extends Component {
               <Message>{ details }</Message>
             </Transition>
           }>
+
           <div className={ `has-details` }>{ top }</div>
+
         </Surrounder>
       </div>
     );
   };
-};  // End <HeadingWithDetail>
+};  // Ends <HeadingWithDetail>
 
 
-/** @todo Have rows that can have details. Maybe other things too. */
-class RowWithDetail extends Component {};  // <End RowWithDetail>
+/* @todo Have rows that can have details. Maybe other things too. */
+class RowWithDetail extends Component {};
 
 
 export {