Merge pull request codeforboston#1017 from knod/clean-style-1

Code style cleaning in '/src/components/dev',  codeforboston#1018

src/components/dev/DevHud.js

@@ -40,7 +40,7 @@ const DevMenu = function ({ devProps, funcs, data, state }) {
         <Button
           compact
           negative
-          size = { `tiny` }
+          size      = { `tiny` }
           className = { `off` }
           onClick   = { funcs.turnOff }>
           HUD Off
@@ -177,4 +177,7 @@ class DevHud extends Component {
 };
 
 
-export { DevHud, DevMenu };
+export {
+  DevHud,
+  DevMenu,
+};

src/components/dev/LocalizationReport.js

@@ -7,21 +7,31 @@ import {
   List,
   Modal,
 } from 'semantic-ui-react';
+
 import _ from 'lodash';
 import { getKeyPathsArray, getKeyPathStrings } from '../../utils/objectKeyPaths';
 import { getLocalizationData } from '../../localization/all';
 
+
 // Get copy of localization data
 const localizations = getLocalizationData();
 
 const ReportItem = function ({ keyPath, test, locKey, pass }) {
+
+  let iconName = `check square`,
+      color    = `green`;
+  if (!pass) {
+    iconName = `window close`;
+    color    = `red`;
+  }
+
   return (
     <List.Item>
       <List.Icon
-        name={ pass ? 'check square' : 'window close' }
-        size='large'
-        color={ pass ? 'green' : 'red' }
-        verticalAlign='middle' />
+        name          = { iconName }
+        color         = { color }
+        size          = { `large` }
+        verticalAlign = { `middle` } />
       <List.Content>
         { keyPath } { test } '{ locKey }'.
       </List.Content>
@@ -30,31 +40,25 @@ const ReportItem = function ({ keyPath, test, locKey, pass }) {
 };
 
 
-const ReportListItems = function ({ keyPath, test, locKey, pass }) {
-  return (
-    <ReportItem
-      key     = { keyPath }
-      keyPath = { keyPath }
-      test    = { test }
-      locKey  = { locKey }
-      pass    = { pass } />
-  );
-};
+const ReportList = function ({ results }) {
 
+  let items = [];
+  for (let result of results) {
+
+    let item = (
+      <ReportItem
+        key     = { result.keyPath }
+        keyPath = { result.keyPath }
+        test    = { result.test }
+        locKey  = { result.locKey }
+        pass    = { result.pass } />
+    );
+
+    items.push(item);
+  }
 
-const ReportList = function ({ results }) {
   return (
-    <List>
-      { 
-        results.map((filteredResult) => {
-          return (
-            <ReportListItems
-              key={ filteredResult.keyPath }
-              { ...filteredResult } />
-          );
-        })
-      }
-    </List>
+    <List>{ items }</List>
   );
 };
 
@@ -65,22 +69,27 @@ class LocalizationReport extends Component {
     modalOpen:        false,
     modelLocKey:      null,
     compareLocKey:    null,
-    filter:           'false',
+    filter:           `false`,
     localizationKeys: [],
   };
 
+  // @todo Why not do this at the top before this
+  // component is even created? Then there wouldn't
+  // have to be a check for null in the comparison function.
+  // Or do it when constructing the component. I don't think
+  // there's anything that would preclude that in here.
   componentDidMount() {
     // Get the list of non-EN localizations for testing
     let localizationKeys = Object.keys(localizations);
-    const enIndex = localizationKeys.indexOf('en');
+    const enIndex        = localizationKeys.indexOf(`en`);
 
     // Initilize our state if EN localization exists
     if (enIndex !== -1) {
       // Remove EN from our keys to loop over
       localizationKeys.splice(enIndex, 1);
 
       this.setState({
-        modelLocKey:   'en',
+        modelLocKey:   `en`,
         compareLocKey: localizationKeys[ 0 ],
         localizationKeys,
       });
@@ -96,17 +105,18 @@ class LocalizationReport extends Component {
 
   setFilter = (e, { value }) => { this.setState({ filter: value }); };
 
-  filterResults = (results, filter) => {
-    if (filter === 'all') { 
+  filterResults (results, filter) {
+    if (filter === `all`) { 
       return results;
     }
-    let pass = filter === 'true' ? true : false;
+
+    let pass = filter === `true`;
     return results.filter((result) => {
       return result.pass === pass;
     });
   };
 
-  compareLocalizations = (modelLocKey, compareLocKey) => {
+  compareLocalizations (modelLocKey, compareLocKey) {
     let results = [];
 
     if (modelLocKey !== null && compareLocKey !== null) {
@@ -115,12 +125,12 @@ class LocalizationReport extends Component {
 
       // Loop through all model (EN) key paths
       let requiredKeyPathResults = modelKeyPaths.map((keyPath) => {
-        let keyPathAsStr = keyPath.join('.');
-        let keyExistsInLoc = _.has(localizations[ compareLocKey ], keyPath);
+        let keyPathAsStr   = keyPath.join(`.`),
+            keyExistsInLoc = _.has(localizations[ compareLocKey ], keyPath);
 
         return {
           keyPath: keyPathAsStr,
-          test:    'should exist in',
+          test:    `should exist in`,
           locKey:  compareLocKey,
           pass:    keyExistsInLoc,
         };
@@ -143,31 +153,39 @@ class LocalizationReport extends Component {
 
       // Get the key paths from the localization we're comparing against EN
       const compareKeyPaths = getKeyPathsArray(localizations[ compareLocKey ], false);
-      
+
       // Find any keys paths that shouldn't be in the localization we're comparing to our model 
       // We won't return passing checks, since requiredKeyPathResults effectively includes those
-      let extraKeyPathResults = compareKeyPaths.reduce((extraKeyPaths, keyPath) => {
-        let keyPathAsStr = keyPath.join('.');
+      const accumulateExtraKeyPaths = function (extraKeyPaths, keyPath) {
+        let keyPathAsStr = keyPath.join(`.`);
 
         // If this keyPath has a version number, remove it so we can compare against the model key 
         // paths which have had their versions removed
-        let keyPathAsStrNoVer = keyPathAsStr.split('_v')[ 0 ];
-        let keyExistsInLoc = _.findIndex(modelKeyPathStringsNoVer, (modelKeyPath) => {
-          return modelKeyPath === keyPathAsStrNoVer ? true : false;
-        }) === -1 ? false : true ;
+        let keyPathAsStrNoVer = keyPathAsStr.split(`_v`)[ 0 ];
+
+        const matchesKeyPath = function (modelKeyPath) {
+          return modelKeyPath === keyPathAsStrNoVer;
+        };
+
+        let keyIndex       = _.findIndex(modelKeyPathStringsNoVer, matchesKeyPath),
+            keyExistsInLoc = keyIndex > -1;
 
         if (!keyExistsInLoc) {
           extraKeyPaths.push({
             keyPath: keyPathAsStr,
-            test:    'should not exist in',
+            test:    `should not exist in`,
             locKey:  compareLocKey,
             pass:    keyExistsInLoc,
           });
         }
+
         return extraKeyPaths;
-      }, []);
+      };  // Ends accumulateExtraKeyPaths()
+
+      let extraKeyPathResults = compareKeyPaths.reduce(accumulateExtraKeyPaths, []);
       results = requiredKeyPathResults.concat(extraKeyPathResults);
-    }
+    }  // ends if (need to get any results)
+
     return results;
   };
 
@@ -184,36 +202,36 @@ class LocalizationReport extends Component {
     });
 
     const filterOptions = [
-      { text: 'All', value: 'all' },
-      { text: 'Passing', value: 'true' },
-      { text: 'Failing', value: 'false' },
+      { text: `All`,     value: `all` },
+      { text: `Passing`, value: `true` },
+      { text: `Failing`, value: `false` },
     ];
 
     return (
       <Modal
-        trigger={ <Button onClick={ this.toggleModalOpen }>Localization Report</Button> }
-        open={ this.state.modalOpen }
-        onClose={ this.toggleModalOpen }
+        trigger = { <Button onClick={ this.toggleModalOpen }>Localization Report</Button> }
+        open    = { this.state.modalOpen }
+        onClose = { this.toggleModalOpen }
         closeIcon>
-        <Modal.Header>
-          Localization Report
-        </Modal.Header>
+
+        <Modal.Header>Localization Report</Modal.Header>
+
         <Modal.Content>
           <Modal.Description>
             <p>
               This report indicates whether keys in the 'en' localization file are present in 
-              your chosen localization.  It will also list any keys in your chosen localization 
+              your chosen localization. It will also list any keys in your chosen localization 
               which should be removed.
 
               <Icon
-                name='check square'
-                size='large'
-                color='green' />indicates a check passed.
+                name  = { `check square` }
+                size  = { `large` }
+                color = { `green` } />indicates a check passed.
 
               <Icon
-                name='window close'
-                size='large'
-                color='red' />indicates a check failed and action is needed.
+                name  = { `window close` }
+                size  = { `large` }
+                color = { `red` } />indicates a check failed and action is needed.
             </p>
             <Form>
               <Form.Group>
@@ -252,7 +270,7 @@ class LocalizationReport extends Component {
         <Modal.Actions>
           <Button
             primary
-            onClick={ this.toggleModalOpen }>
+            onClick = { this.toggleModalOpen }>
             Close
           </Button>
         </Modal.Actions>
@@ -261,4 +279,8 @@ class LocalizationReport extends Component {
   }
 };
 
-export { LocalizationReport };
+export {
+  LocalizationReport,
+  ReportItem,
+  ReportList,
+};