From 4a769da9676b052609143ec4df306dbde7fee45d Mon Sep 17 00:00:00 2001
From: knod <knodding@gmail.com>
Date: Sat, 24 Nov 2018 13:24:16 -0500
Subject: [PATCH 1/3] Code style cleaning in '/src/components/dev'

---
 src/components/dev/DevHud.js             |   7 +-
 src/components/dev/LocalizationReport.js | 152 +++++++++++++----------
 2 files changed, 93 insertions(+), 66 deletions(-)

diff --git a/src/components/dev/DevHud.js b/src/components/dev/DevHud.js
index 089b4def..039a7e90 100644
--- a/src/components/dev/DevHud.js
+++ b/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,
+};
diff --git a/src/components/dev/LocalizationReport.js b/src/components/dev/LocalizationReport.js
index 48a119e4..fd7fd076 100644
--- a/src/components/dev/LocalizationReport.js
+++ b/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,14 +69,17 @@ 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.
   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) {
@@ -80,7 +87,7 @@ class LocalizationReport extends Component {
       localizationKeys.splice(enIndex, 1);
 
       this.setState({
-        modelLocKey:   'en',
+        modelLocKey:   `en`,
         compareLocKey: localizationKeys[ 0 ],
         localizationKeys,
       });
@@ -96,17 +103,22 @@ 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 = true;
+    if (filter !== `true`) {
+      pass = false;
+    }
+
     return results.filter((result) => {
       return result.pass === pass;
     });
   };
 
-  compareLocalizations = (modelLocKey, compareLocKey) => {
+  compareLocalizations (modelLocKey, compareLocKey) {
     let results = [];
 
     if (modelLocKey !== null && compareLocKey !== null) {
@@ -115,12 +127,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 +155,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 +204,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 +272,7 @@ class LocalizationReport extends Component {
         <Modal.Actions>
           <Button
             primary
-            onClick={ this.toggleModalOpen }>
+            onClick = { this.toggleModalOpen }>
             Close
           </Button>
         </Modal.Actions>
@@ -261,4 +281,8 @@ class LocalizationReport extends Component {
   }
 };
 
-export { LocalizationReport };
+export {
+  LocalizationReport,
+  ReportItem,
+  ReportList,
+};

From 6d9b0423efccc5fb2d89af6eb3f5ed925ae8e241 Mon Sep 17 00:00:00 2001
From: knod <knodding@gmail.com>
Date: Sat, 24 Nov 2018 13:32:59 -0500
Subject: [PATCH 2/3] Adds to existing comment

---
 src/components/dev/LocalizationReport.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/dev/LocalizationReport.js b/src/components/dev/LocalizationReport.js
index fd7fd076..7df8ca57 100644
--- a/src/components/dev/LocalizationReport.js
+++ b/src/components/dev/LocalizationReport.js
@@ -76,6 +76,8 @@ class LocalizationReport extends Component {
   // @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);

From f4e27a01ef11695d3c1e0e345f28de1dabe0203d Mon Sep 17 00:00:00 2001
From: knod <knodding@gmail.com>
Date: Sat, 24 Nov 2018 21:19:58 -0500
Subject: [PATCH 3/3] Simplifies logic

---
 src/components/dev/LocalizationReport.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/dev/LocalizationReport.js b/src/components/dev/LocalizationReport.js
index 7df8ca57..becf7dba 100644
--- a/src/components/dev/LocalizationReport.js
+++ b/src/components/dev/LocalizationReport.js
@@ -110,11 +110,7 @@ class LocalizationReport extends Component {
       return results;
     }
 
-    let pass = true;
-    if (filter !== `true`) {
-      pass = false;
-    }
-
+    let pass = filter === `true`;
     return results.filter((result) => {
       return result.pass === pass;
     });