Update how words are created and updated

Modify constructor of Word, modify WordForm to accept words differently,
update WordDisplay to pass data to new WordForm correctly.

src/components/display/WordDisplay.jsx

@@ -67,16 +67,19 @@ export class WordDisplay extends Component {
 
   render () {
     const { menuIsOpen, isEditing } = this.state;
-    const { word } = this.props;
+    const { word, updateDisplay } = this.props;
 
     if (isEditing) {
       return (
         <WordForm
-          name={word.name}
-          pronunciation={word.pronunciation}
-          partOfSpeech={word.partOfSpeech}
-          definition={word.definition}
-          details={word.details}
+          word={word}
+          updateDisplay={updateDisplay}
+          callback={() => {
+            this.setState({
+              menuIsOpen: false,
+              isEditing: false,
+            })
+          }}
         />
       );
     }

src/components/management/WordForm.jsx

@@ -10,11 +10,11 @@ export class WordForm extends Component {
     super(props);
 
     this.state = {
-      wordName: this.props.name || '',
-      wordPronunciation: this.props.pronunciation || '',
-      wordPartOfSpeech: this.props.partOfSpeech || '',
-      wordDefinition: this.props.definition || '',
-      wordDetails: this.props.details || '',
+      wordName: props.word ? props.word.name : '',
+      wordPronunciation: props.word ? props.word.pronunciation : '',
+      wordPartOfSpeech: props.word ? props.word.partOfSpeech : '',
+      wordDefinition: props.word ? props.word.definition : '',
+      wordDetails: props.word ? props.word.details : '',
 
       nameIsValid: true,
       pronunciationIsValid: true,
@@ -53,29 +53,32 @@ export class WordForm extends Component {
   }
 
   submitWord () {
-    const word = new Word({
+    const word = new Word(Object.assign((this.props.word ? this.props.word : {}), {
       name: this.state.wordName,
       pronunciation: this.state.wordPronunciation,
       partOfSpeech: this.state.wordPartOfSpeech,
       definition: this.state.wordDefinition,
       details: this.state.wordDetails,
-    });
-
+    }));
 
     if (this.isValidWord()) {
       // Need to trigger a WordsList re-render after success.
-      if (this.props.wordId) {
-        word.update(this.props.wordId)
+      let wordAction;
+      if (this.props.word) {
+        wordAction = word.update()
         .then(() => {
           this.props.callback();
         })
       } else {
-        word.create()
+        wordAction = word.create()
         .then(() => {
           this.clearForm();
-          this.props.updateDisplay();
         });
       }
+
+      wordAction.then(() => {
+        this.props.updateDisplay();
+      })
     }
   }
 

src/managers/Word.js

@@ -3,18 +3,36 @@ import store from 'store';
 import wordDb from './WordDatabase';
 
 export class Word {
-  constructor ({ name = '', pronunciation = '', partOfSpeech = '', definition = '', details = '' }) {
+  constructor (values = {}) {
+    const {
+      id = false,
+      name = '',
+      pronunciation = '',
+      partOfSpeech = '',
+      definition = '',
+      details = '',
+      createdTime = null,
+      modifiedTime = null,
+    } = values;
+
     this.name = name;
     this.pronunciation = pronunciation;
     this.partOfSpeech = partOfSpeech;
     this.definition = definition;
     this.details = details;
+    this.createdTime = createdTime;
+    this.modifiedTime = modifiedTime;
+
+    // Only create an id property if an ID exists.
+    if (id) this.id = id;
   }
 
   create () {
     const timestampInSeconds = Math.round(Date.now() / 1000);
     this.createdTime = timestampInSeconds;
-    this.modifiedTime = null;
+
+    // Delete id if it exists to allow creation of new word.
+    if (this.hasOwnProperty('id')) delete this.id;
 
     return wordDb.words.add(this)
     .then((id) => {
@@ -26,11 +44,11 @@ export class Word {
     });
   }
 
-  update (wordId) {
+  update () {
     const timestampInSeconds = Math.round(Date.now() / 1000);
     this.modifiedTime = timestampInSeconds;
 
-    return wordDb.words.put(this, wordId)
+    return wordDb.words.put(this)
     .then((id) => {
       console.log('Word modified successfully');
     })