diff --git a/src/components/display/WordDisplay.jsx b/src/components/display/WordDisplay.jsx index 10fee1c..eab6abc 100644 --- a/src/components/display/WordDisplay.jsx +++ b/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 ( { + this.setState({ + menuIsOpen: false, + isEditing: false, + }) + }} /> ); } diff --git a/src/components/management/WordForm.jsx b/src/components/management/WordForm.jsx index d95ba7d..74abbf7 100644 --- a/src/components/management/WordForm.jsx +++ b/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(); + }) } } diff --git a/src/managers/Word.js b/src/managers/Word.js index 711528a..7ee412e 100644 --- a/src/managers/Word.js +++ b/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'); })