Add WordsList and WordDisplay for displaying words

Need to figure out how to properly trigger a re-render of the list after
a word is added or updated.

src/components/MainDisplay.jsx

@@ -5,8 +5,9 @@ import {RightColumn} from './structure/RightColumn';
 
 import {WordForm} from './management/WordForm';
 import {DictionaryDetails} from './display/DictionaryDetails';
+import {WordsList} from './display/WordsList';
 
-export const MainDisplay = ({dictionaryInfo}) => {
+export const MainDisplay = ({dictionaryInfo, wordsToDisplayPromise}) => {
   return (
     <section className='section'>
       <div className='container'>
@@ -31,6 +32,9 @@ export const MainDisplay = ({dictionaryInfo}) => {
                 ]
               }}
             />
+
+            <WordsList
+              wordsPromise={wordsToDisplayPromise} />
           </RightColumn>
           
         </div>

src/components/display/WordDisplay.jsx

@@ -0,0 +1,66 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+import marked from 'marked';
+
+import idManager from '../../managers/IDManager';
+import {Word} from '../../managers/Word';
+
+import {WordForm} from '../management/WordForm';
+
+export class WordDisplay extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      isEditing: false
+    }
+  }
+
+  render () {
+    return (
+      <div className='card'>
+
+        <header className='card-header'>
+          <h3 className='card-header-title'>
+            {this.props.word.name}
+          </h3>
+        </header>
+
+        <section className='card-content'>
+          <div className='content'>
+            {(this.props.word.pronunciation || this.props.word.partOfSpeech)
+              && (<p>
+                    {(this.props.word.partOfSpeech)
+                      ? (<small>this.props.word.partOfSpeech</small>)
+                      : ''}
+                  
+                    {(this.props.word.partOfSpeech && this.props.word.pronunciation)
+                      ? ' | '
+                      : ''}
+                  
+                    {(this.props.word.pronunciation)
+                      ? (<small>this.props.word.pronunciation</small>)
+                      : ''}
+                  </p>
+                )}
+
+            {(this.props.word.definition)
+              && (
+                <p>
+                  {this.props.word.definition}
+                </p>
+                )}
+
+            {(this.props.word.details)
+              && (
+                <p>
+                  {this.props.word.details}
+                </p>
+                )}
+          </div>
+        </section>
+
+      </div>
+    );
+  }
+}

src/components/display/WordsList.jsx

@@ -0,0 +1,31 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+import marked from 'marked';
+
+import idManager from '../../managers/IDManager';
+
+import {WordDisplay} from './WordDisplay';
+
+export class WordsList extends Component {
+  constructor (props) {
+    super(props);
+  }
+
+  render () {
+    return (
+      <div className='box'>
+
+        {this.props.wordsPromise
+          && this.props.wordsPromise.then(words => {
+          words.map(word => {
+            return (
+              <WordDisplay key={`word_${word.id}`}
+                word={word} />
+            );
+          })
+        })}
+
+      </div>
+    );
+  }
+}

src/components/management/WordForm.jsx

@@ -51,7 +51,7 @@ export class WordForm extends Component {
     return nameIsValid == true && definitionIsValid == true && detailsIsValid == true;
   }
 
-  createWord () {
+  submitWord () {
     const word = new Word({
       name: this.state.wordName
     , pronunciation: this.state.wordPronunciation
@@ -62,10 +62,18 @@ export class WordForm extends Component {
 
 
     if (this.isValidWord()) {
-      word.create()
+      // Need to trigger a WordsList re-render after success.
-      .then(() => {
+      if (this.props.wordId) {
-        this.clearForm();
+        word.update(this.props.wordId)
-      });
+        .then(() => {
+          this.props.callback();
+        })
+      } else {
+        word.create()
+        .then(() => {
+          this.clearForm();
+        });
+      }
     }
   }
 
@@ -160,7 +168,7 @@ export class WordForm extends Component {
           <p className='control'>
             <a className='button is-primary'
               onClick={() => {
-                this.createWord();
+                this.submitWord();
               }}>
               Create
             </a>

src/index.jsx

@@ -39,11 +39,11 @@ class App extends Component {
     return info;
   }
 
-  get wordsToDisplay () {
+  get wordsToDisplayPromise () {
     // const {searchIn, searchTerm, filteredPartsOfSpeech} = this.state.searchConfig;
 
     // TODO: Sort out searching to remove this temporary solution.
-    return dictionary.words;
+    return dictionary.wordsPromise;
   }
 
   search (searchConfig) {
@@ -60,7 +60,7 @@ class App extends Component {
 
         <MainDisplay
           dictionaryInfo={this.dictionaryInfo}
-          wordsToDisplay={this.wordsToDisplay} />
+          wordsToDisplay={this.wordsToDisplayPromise} />
 
         <Footer />
       </div>

src/managers/DictionaryData.js

@@ -70,7 +70,7 @@ class DictionaryData {
     return store.set('Lexiconga', { partsOfSpeech: array });
   }
 
-  get words () {
+  get wordsPromise () {
     return wordDb.words.toArray();
   }
 

src/managers/Word.js

@@ -2,13 +2,6 @@ import assert from 'assert';
 import store from 'store';
 import wordDb from './WordDatabase';
 
-const defaultDictionary = {
-  name: 'New'
-, specification: 'Dictionary'
-, description: 'A new dictionary.'
-, partsOfSpeech: ['Noun', 'Adjective', 'Verb']
-}
-
 export class Word {
   constructor ({name = '', pronunciation = '', partOfSpeech = '', definition = '', details = ''}) {
     this.name = name;
@@ -33,13 +26,16 @@ export class Word {
     });
   }
 
-  update (wordObject, wordId) {
+  update (wordId) {
     const timestampInSeconds = Math.round(Date.now() / 1000);
     this.modifiedTime = timestampInSeconds;
 
-    wordDb.words.put(wordObject, wordId)
+    return wordDb.words.put(this, wordId)
+    .then(id => {
+      console.log('Word modified successfully');
+    })
     .catch(error => {
-
+      console.error(error);
     });
   }
 }