Merge branch 'dev' of github.com:codeforboston/cliff-effects into cod…

…e-style-10

src/App.js

@@ -13,8 +13,8 @@ import { Confirmer } from './utils/getUserConfirmation';
 import HomePage from './containers/HomePage';
 import AboutPage from './containers/AboutPage';
 import VisitPage from './containers/VisitPage';
-import Footer from './components/Footer';
-import Header from './components/Header';
+import { Footer } from './components/Footer';
+import { Header } from './components/Header';
 
 // Development HUD
 import { DevSwitch } from './containers/DevSwitch';

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/Footer.js

@@ -1,49 +1,54 @@
 import React from 'react';
-import logo from '../images/logo.svg';
-
 import {
   Grid,
   Header,
   Segment,
   Image,
 } from 'semantic-ui-react';
 
-const Footer = ({ translations }) => {
+import logo from '../images/logo.svg';
+
+
+const Footer = function ({ translations }) {
   return (
     <Segment
       className = { `footer_segment` }
+      color     = { `teal` }
       inverted
-      vertical
-      color='teal'>
+      vertical>
       <Grid
         container
         divided
         inverted
         stackable>
         <Grid.Row>
+
           <Grid.Column
-            width={ 4 }
-            floated='left'>
+            width   = { 4 }
+            floated = { `left` }>
             <Header
-              as='h4'
+              as = { `h4` }
               inverted>
               { translations.i_header }
             </Header>
             <p>{ translations.i_cfbCredit }</p>
           </Grid.Column>
-          <a
 
-            href="http://www.codeforboston.org"
-            target="_blank"
-            rel="noopener noreferrer"><Image
-              src={ logo }
-              size='small'
-              floated='right' />
+          <a
+            href   = { `http://www.codeforboston.org` }
+            target = { `_blank` }
+            rel    = { `noopener noreferrer` }>
+            <Image
+              src     = { logo }
+              size    = { `small` }
+              floated = { `right` } />
           </a>
+
         </Grid.Row>
       </Grid>
     </Segment>
   );
-};
+};  // Ends <Footer>
+
 
-export default Footer;
+export { Footer };

src/components/GraphTimeButtons.js

@@ -1,13 +1,14 @@
 import { Button } from 'semantic-ui-react';
 import React from 'react';
 
+
 const GraphButton = function ({ id, activeID, onClick }) {
   return (
     <Button
-      id={ id }
-      active={ activeID === id }
-      onClick={ onClick }>
-      {id}
+      id      = { id }
+      active  = { activeID === id }
+      onClick = { onClick }>
+      { id }
     </Button>
   );
 };
@@ -16,21 +17,25 @@ const GraphTimeButtons = function ({ activeID, onClick }) {
   return (
     <Button.Group
       basic
-      className='graph-time-options'>
+      className = { `graph-time-options` }>
       <GraphButton
-        id={ 'Weekly' }
-        activeID={ activeID }
-        onClick={ onClick } />
+        id       = { `Weekly` }
+        activeID = { activeID }
+        onClick  = { onClick } />
       <GraphButton
-        id={ 'Monthly' }
-        activeID={ activeID }
-        onClick={ onClick } />
+        id       = { `Monthly` }
+        activeID = { activeID }
+        onClick  = { onClick } />
       <GraphButton
-        id={ 'Yearly' }
-        activeID={ activeID }
-        onClick={ onClick } />
+        id       = { `Yearly` }
+        activeID = { activeID }
+        onClick  = { onClick } />
     </Button.Group>
   );
 };
 
-export { GraphTimeButtons };
+
+export {
+  GraphButton,
+  GraphTimeButtons,
+};

src/components/Header.js

@@ -1,25 +1,26 @@
 import React from 'react';
-
 import { Segment } from 'semantic-ui-react';
 
 import { MainMenu } from './MainMenu';
 import { BetaWarning } from './BetaWarning';
 
+
 class Header extends React.Component {
   render() {
     return (
       <Segment
-        id={ `appHeader` }
-        className="header-segment"
+        id        = { `appHeader` }
+        className = { `header-segment` }
+        textAlign = { `center` }
+        color     = { `teal` }
         inverted
-        textAlign='center'
-        vertical
-        color='teal'>
+        vertical>
         <MainMenu translations={ this.props.translations } />
         <BetaWarning translations={ this.props.translations } />
       </Segment>
     );
-  }
-}
+  };
+};
+
 
-export default Header;
+export { Header };

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 {