Cleans rest of '/src/forms'. codeforboston#1018

knod · Dec 1, 2018 · 3334471 · 3334471
1 parent befb0ae
commit 3334471
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 129 deletions.
diff --git a/src/forms/Predictions.js b/src/forms/Predictions.js
@@ -1,5 +1,12 @@
 import React from 'react';
-import { Divider, Header, Tab, Message, Button, Menu } from 'semantic-ui-react';
+import {
+  Divider,
+  Header,
+  Tab,
+  Message,
+  Button,
+  Menu,
+} from 'semantic-ui-react';
 
 // PROJECT COMPONENTS
 import { FormPartsContainer } from './FormPartsContainer';
@@ -12,9 +19,7 @@ import { ResourcesColumns } from './output/ResourcesColumns';
 import { StackedResources } from './output/StackedResources';
 import { BenefitsLines } from './output/BenefitsLines';
 
-// ========================================
-// COMPONENTS
-// ========================================
+
 /** @todo Cash flow row for trying out different future incomes.
  *
  * As per Project Hope's input, for the first prototype
@@ -33,30 +38,30 @@ import { BenefitsLines } from './output/BenefitsLines';
  */
 const IncomeForm = function ({ future, time, updateClientValue, translations }) {
 
-  let type = 'income';
+  let type = `income`;
 
   return (
-    <div className='field-aligner two-column'>
+    <div className={ `field-aligner two-column` }>
       <IntervalColumnHeadings type={ type } />
       <CashFlowInputsRow
-        timeState={ future }
-        type={ type }
-        time={ time }
+        timeState         = { future }
+        type              = { type }
+        time              = { time }
         updateClientValue = { updateClientValue }
-        generic='earned'
-        labelInfo='(Weekly pay = hourly wage times average number of work hours per week)'>
+        generic           = { `earned` }
+        labelInfo         = { `(Weekly pay = hourly wage times average number of work hours per week)` }>
         { translations.i_futureIncomeQuestion }
       </CashFlowInputsRow>
     </div>
   );
-};  // End IncomeForm() Component
+};
 
 
 const TabbedVisualizations = ({ client, openFeedback, translations }) => {
   return (
     <Tab
-      menu={{ color: 'teal',  attached: true, tabular: true }}
-      panes={ [
+      menu  = {{ color: `teal`,  attached: true, tabular: true }}
+      panes = { [
         {
           menuItem: (
             <Menu.Item
@@ -85,8 +90,8 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => {
             return (
               <Tab.Pane>
                 <BenefitsTable
-                  client={ client }
-                  translations={ translations } />
+                  client       = { client }
+                  translations = { translations } />
               </Tab.Pane>
             );
           },
@@ -102,8 +107,8 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => {
           render: () => { return (
             <Tab.Pane>
               <GraphHolder
-                client   = { client }
-                Graph    = { ResourcesColumns }
+                client       = { client }
+                Graph        = { ResourcesColumns }
                 translations = { translations } />
             </Tab.Pane>
           );},
@@ -120,8 +125,8 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => {
             return (
               <Tab.Pane>
                 <GraphHolder
-                  client={ client }
-                  Graph={ StackedResources }
+                  client       = { client }
+                  Graph        = { StackedResources }
                   translations = { translations } />
               </Tab.Pane>
             );
@@ -139,16 +144,16 @@ const TabbedVisualizations = ({ client, openFeedback, translations }) => {
             return (
               <Tab.Pane>
                 <GraphHolder
-                  client   = { client }
-                  Graph    = { BenefitsLines }
+                  client       = { client }
+                  Graph        = { BenefitsLines }
                   translations = { translations } />
               </Tab.Pane>
             );
           },
         },
       ] } />
   );
-};
+};  // Ends <TabbedVisualizations>
 
 
 const PredictionsStep = function ({ updateClientValue, navData, client, translations, openFeedback }) {
@@ -159,33 +164,33 @@ const PredictionsStep = function ({ updateClientValue, navData, client, translat
       clarifier = { null }
       navData   = { navData }
       formClass = { `predictions` }>
-      {/* `predictionsForm`: This whole div will be outside
+      {/* `predictions-form`: This whole div will be outside
         the form in the future and then we'll be able to
         access its style that way */}
-      <div id = { `predictionsForm` }>
+      <div id={ `predictions-form` }>
         <IncomeForm
           updateClientValue = { updateClientValue }
           future            = { client.future }
-          time              = { 'future' }
+          time              = { `future` }
           translations      = { translations } />
-        <Divider className='ui section divider hidden' />
+        <Divider className={ `ui section divider hidden` } />
       </div>
-      <div id={ `resultsIntro` }>
+      <div id={ `results-intro` }>
         <Header
-          as        ='h3'
-          className ='ui Header align centered'>
+          as        = { `h3` }
+          className = { `ui Header align centered` }>
           { translations.i_chartsHeader }
         </Header>
         <Message
-          className = { `prediction-message` }
           visible
-          warning>
+          warning
+          className = { `prediction-message` }>
           { translations.i_warningMessage }
           <Button
+            compact
             className = { `feedback-button` }
             size      = { `small` }
             color     = { `teal` }
-            compact
             onClick   = { openFeedback }>
             { translations.i_submitFeedback }
           </Button>
@@ -197,7 +202,7 @@ const PredictionsStep = function ({ updateClientValue, navData, client, translat
         translations = { translations } />
     </FormPartsContainer>
   );
-};  // End FutureIncomeStep() Component
+};  // End <PredictionsStep>
 
-export { PredictionsStep };
 
+export { PredictionsStep };
diff --git a/src/forms/STEP_VALS.js b/src/forms/STEP_VALS.js
@@ -7,27 +7,27 @@ import { CurrentBenefitsStep } from './CurrentBenefits';
 export const STEP_VALS = [
   {
     component: CurrentBenefitsStep,
-    key:       'currentBenefits',
-    time:      'current',
+    key:       `currentBenefits`,
+    time:      `current`,
   },
   {
     component: HouseholdStep,
-    key:       'household',
-    time:      'current',
+    key:       `household`,
+    time:      `current`,
   },
   {
     component: CurrentIncomeStep,
-    key:       'currentIncome',
-    time:      'current',
+    key:       `currentIncome`,
+    time:      `current`,
   },
   {
     component: CurrentExpensesStep,
-    key:       'currentExpenses',
-    time:      'current',
+    key:       `currentExpenses`,
+    time:      `current`,
   },
   {
     component: PredictionsStep,
-    key:       'predictions',
-    time:      'future',
+    key:       `predictions`,
+    time:      `future`,
   },
-]; // end STEP_VALS
+]; // ends STEP_VALS
diff --git a/src/forms/ShowOnYes.js b/src/forms/ShowOnYes.js
@@ -24,15 +24,14 @@ class ShowOnYes extends React.Component {
   constructor (props) {
     super(props);
     this.state = { show: props.showChildrenAtStart || false };
-  }
+  };
 
   handleChange = (evt, inputProps) => {
     if (inputProps.value === true) {
       this.showChildren(evt);
     } else {
       this.hideChildren(evt);
     }
-
   };
 
   showChildren = (evnt) => {
@@ -52,7 +51,7 @@ class ShowOnYes extends React.Component {
   // Instead of a header and children, discuss using
   // a function instead that would return a heading
   // and contents.
-  render() {
+  render () {
 
     const {
       childName,
@@ -64,24 +63,24 @@ class ShowOnYes extends React.Component {
 
     let show = this.state.show;
     return (
-      <div className = { `show-on-yes` }>
+      <div className={ `show-on-yes` }>
 
         <ContentH1>{ heading }</ContentH1>
 
         <Surrounder { ...rest } >
           <ControlledRadioYesNo
             labelText = { question }
             checked   = { show }
-            name      = { 'confirm_' + childName }
+            name      = { `confirm_` + childName }
             onChange  = { this.handleChange } />
         </Surrounder>
 
         { show ? (children) : (null) }
 
       </div>
     );
-  }
-}
+  };
+};  // Ends <ShowOnYes>
 
 
 export { ShowOnYes };