diff --git a/src/components/MainDisplay.jsx b/src/components/MainDisplay.jsx index 4756814..6534e79 100644 --- a/src/components/MainDisplay.jsx +++ b/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 (
@@ -31,6 +32,9 @@ export const MainDisplay = ({dictionaryInfo}) => { ] }} /> + +
diff --git a/src/components/display/WordDisplay.jsx b/src/components/display/WordDisplay.jsx new file mode 100644 index 0000000..e02e546 --- /dev/null +++ b/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 ( +
+ +
+

+ {this.props.word.name} +

+
+ +
+
+ {(this.props.word.pronunciation || this.props.word.partOfSpeech) + && (

+ {(this.props.word.partOfSpeech) + ? (this.props.word.partOfSpeech) + : ''} + + {(this.props.word.partOfSpeech && this.props.word.pronunciation) + ? ' | ' + : ''} + + {(this.props.word.pronunciation) + ? (this.props.word.pronunciation) + : ''} +

+ )} + + {(this.props.word.definition) + && ( +

+ {this.props.word.definition} +

+ )} + + {(this.props.word.details) + && ( +

+ {this.props.word.details} +

+ )} +
+
+ +
+ ); + } +} diff --git a/src/components/display/WordsList.jsx b/src/components/display/WordsList.jsx new file mode 100644 index 0000000..7392d80 --- /dev/null +++ b/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 ( +
+ + {this.props.wordsPromise + && this.props.wordsPromise.then(words => { + words.map(word => { + return ( + + ); + }) + })} + +
+ ); + } +} diff --git a/src/components/management/WordForm.jsx b/src/components/management/WordForm.jsx index ff1d72a..96960e8 100644 --- a/src/components/management/WordForm.jsx +++ b/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() - .then(() => { - this.clearForm(); - }); + // Need to trigger a WordsList re-render after success. + if (this.props.wordId) { + word.update(this.props.wordId) + .then(() => { + this.props.callback(); + }) + } else { + word.create() + .then(() => { + this.clearForm(); + }); + } } } @@ -160,7 +168,7 @@ export class WordForm extends Component {

{ - this.createWord(); + this.submitWord(); }}> Create diff --git a/src/index.jsx b/src/index.jsx index f1ff6be..cca5360 100644 --- a/src/index.jsx +++ b/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 { + wordsToDisplay={this.wordsToDisplayPromise} />