Update app state to display words

src/components/MainDisplay.jsx

@@ -7,7 +7,7 @@ import {WordForm} from './management/WordForm';
 import {DictionaryDetails} from './display/DictionaryDetails';
 import {WordsList} from './display/WordsList';
 
-export const MainDisplay = ({dictionaryInfo, wordsToDisplayPromise}) => {
+export const MainDisplay = ({dictionaryInfo, wordsToDisplay, updateDisplay, lastRender}) => {
   return (
     <section className='section'>
       <div className='container'>
@@ -15,6 +15,7 @@ export const MainDisplay = ({dictionaryInfo, wordsToDisplayPromise}) => {
           
           <LeftColumn>
             <WordForm
+              updateDisplay={() => updateDisplay()}
               partsOfSpeech={dictionaryInfo.partsOfSpeech}
             />
           </LeftColumn>
@@ -34,7 +35,8 @@ export const MainDisplay = ({dictionaryInfo, wordsToDisplayPromise}) => {
             />
 
             <WordsList
-              wordsPromise={wordsToDisplayPromise} />
+              lastRender={lastRender}
+              words={wordsToDisplay} />
           </RightColumn>
           
         </div>

src/components/display/WordsList.jsx

@@ -15,15 +15,14 @@ export class WordsList extends Component {
     return (
       <div className='box'>
 
-        {this.props.wordsPromise
-          && this.props.wordsPromise.then(words => {
-          words.map(word => {
+        {this.props.words
+          && this.props.words.map(word => {
             return (
               <WordDisplay key={`word_${word.id}`}
                 word={word} />
             );
           })
-        })}
+        }
 
       </div>
     );

src/components/management/WordForm.jsx

@@ -72,6 +72,7 @@ export class WordForm extends Component {
         word.create()
         .then(() => {
           this.clearForm();
+          this.props.updateDisplay();
         });
       }
     }

src/index.jsx

@@ -23,6 +23,7 @@ class App extends Component {
     , specification: dictionary.specification
     , description: dictionary.description
     , partsOfSpeech: dictionary.partsOfSpeech
+    , displayedWords: []
     , searchConfig: null
     }
   }
@@ -39,11 +40,15 @@ class App extends Component {
     return info;
   }
 
-  get wordsToDisplayPromise () {
+  updateDisplayedWords () {
     // const {searchIn, searchTerm, filteredPartsOfSpeech} = this.state.searchConfig;
 
     // TODO: Sort out searching to remove this temporary solution.
-    return dictionary.wordsPromise;
+    dictionary.wordsPromise.then(words => {
+      this.setState({
+        displayedWords: words
+      })
+    });
   }
 
   search (searchConfig) {
@@ -60,7 +65,8 @@ class App extends Component {
 
         <MainDisplay
           dictionaryInfo={this.dictionaryInfo}
-          wordsToDisplay={this.wordsToDisplayPromise} />
+          wordsToDisplay={this.state.displayedWords}
+          updateDisplay={() => this.updateDisplayedWords()} />
 
         <Footer />
       </div>