Add number of word stats and stat section to DictionaryDetails

src/Helpers.js

@@ -108,3 +108,29 @@ export function addHelpfulPrototypes () {
 export function characterIsUppercase (character) {
   return character === character.toUpperCase();
 }
+
+export function getWordsStats (words, partsOfSpeech) {
+  const wordStats = {
+    numberOfWords: [
+      {
+        name: 'Total',
+        value: words.length,
+      },
+    ],
+  };
+
+  partsOfSpeech.forEach(partOfSpeech => {
+    const wordsWithPartOfSpeech = words.filter(word => word.partOfSpeech === partOfSpeech);
+    wordStats.numberOfWords.push({
+      name: partOfSpeech,
+      value: wordsWithPartOfSpeech.length,
+    });
+  });
+
+  wordStats.numberOfWords.push({
+    name: 'Unclassified',
+    value: words.filter(word => !partsOfSpeech.includes(word.partOfSpeech)).length,
+  });
+
+  return wordStats;
+}

src/components/MainDisplay.jsx

@@ -77,6 +77,7 @@ export class MainDisplay extends Component {
                 partsOfSpeech={ dictionaryInfo.partsOfSpeech }
                 details={ dictionaryInfo.details }
                 settings={ dictionaryInfo.settings }
+                stats={ dictionaryInfo.stats }
                 alphabeticalOrder={ dictionaryInfo.alphabeticalOrder }
                 updateDisplay={ updateDisplay }
               />

src/components/display/DictionaryDetails/index.jsx

@@ -28,6 +28,7 @@ export class DictionaryDetails extends Component {
       alphabeticalOrder: PropTypes.array,
       details: PropTypes.object,
       settings: PropTypes.object,
+      stats: PropTypes.array,
       updater: PropTypes.object,
       updateDisplay: PropTypes.func,
     }, props, 'prop', 'DictionaryDetails');
@@ -87,8 +88,26 @@ export class DictionaryDetails extends Component {
 
         case DISPLAY.STATS : {
           displayJSX = (
-            <div className="content">
+            <div className='columns'>
-              <p>Stats!</p>
+              <div className='column'>
+                <strong>Number of Words</strong>
+                <div className='field is-grouped is-grouped-multiline'>
+                  {this.props.stats.numberOfWords.map(stat => {
+                    return (
+                      <div className='control'>
+                        <div className='tags has-addons'>
+                          <span className='tag'>
+                            { stat.name }
+                          </span>
+                          <span className='tag is-white'>
+                            { stat.value }
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
             </div>
           );
           break;

src/index.jsx

@@ -4,7 +4,7 @@ import './sass/main.scss';
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
-import { addHelpfulPrototypes } from './Helpers';
+import { addHelpfulPrototypes, getWordsStats } from './Helpers';
 addHelpfulPrototypes();
 
 import dictionary from './managers/DictionaryData';
@@ -29,6 +29,7 @@ class App extends Component {
       partsOfSpeech: dictionary.partsOfSpeech,
       details: dictionary.details,
       settings: dictionary.settings,
+      stats: [],
       alphabeticalOrder: dictionary.alphabeticalOrder,
 
       displayedWords: [],
@@ -48,6 +49,7 @@ class App extends Component {
       partsOfSpeech,
       details,
       settings,
+      stats,
       alphabeticalOrder,
     } = this.state;
 
@@ -58,6 +60,7 @@ class App extends Component {
       partsOfSpeech,
       details,
       settings,
+      stats,
       alphabeticalOrder,
     };
   }
@@ -72,10 +75,11 @@ class App extends Component {
     // const {searchIn, searchTerm, filteredPartsOfSpeech} = this.state.searchConfig;
 
     // TODO: Sort out searching to remove this temporary solution.
-    dictionary.wordsPromise.then((words) => {
+    dictionary.wordsPromise.then(words => {
       this.setState({
         displayedWords: words,
-      })
+        stats: getWordsStats(words, this.state.partsOfSpeech),
+      });
     });
   }