Got dictionary and words displaying by reference.

Need to decide where the dictionary will be stored so all components needed to reference it will be able to.

src/components/Dictionary.jsx

@@ -8,18 +8,18 @@ export class Dictionary extends React.Component {
     super(props);
 
     this.state = {
-      name: "New",
-      description: "A new dictionary.",
-      createdBy: 'Someone',
-      words: [],
-      nextWordId: 1,
-      externalID: 0,
-      allowDuplicates: false,
-      caseSensitive: false,
-      partsOfSpeech: "Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction",
-      sortByEquivalent: false,
-      isComplete: false,
-      isPublic: false
+      name: this.props.reference.name,
+      description: this.props.reference.description,
+      createdBy: this.props.reference.createdBy,
+      words: this.props.reference.words,
+      nextWordId: this.props.reference.nextWordId,
+      externalID: this.props.reference.externalID,
+      allowDuplicates: this.props.reference.settings.allowDuplicates,
+      caseSensitive: this.props.reference.settings.caseSensitive,
+      partsOfSpeech: this.props.reference.settings.partOfSpeech,
+      sortByEquivalent: this.props.reference.settings.sortByEquivalent,
+      isComplete: this.props.reference.settings.isComplete,
+      isPublic: this.props.reference.settings.isPublic
     }
 
     // this.addTestWord();
@@ -28,13 +28,16 @@ export class Dictionary extends React.Component {
   showWords() {
     let words = this.state.words.map((word, index) => {
       return <Word key={'dictionaryEntry' + index.toString()}
-        name={word.name}
-        wordId={word.wordId}
-        pronunciation={word.pronunciation}
-        partOfSpeech={word.partOfSpeech}
-        simpleDefinition={word.simpleDefinition}
-        longDefinition={word.longDefinition}
-        initialPosition={index} />
+        reference={word}
+        initialPosition={index} />;
+      // return <Word key={'dictionaryEntry' + index.toString()}
+      //   name={word.name}
+      //   wordId={word.wordId}
+      //   pronunciation={word.pronunciation}
+      //   partOfSpeech={word.partOfSpeech}
+      //   simpleDefinition={word.simpleDefinition}
+      //   longDefinition={word.longDefinition}
+      //   initialPosition={index} />;
     });
 
     return <div>{words}</div>;

src/components/Word.jsx

@@ -5,12 +5,13 @@ export class Word extends React.Component {
     super(props);
 
     this.state = {
-      name: this.props.name,
-      wordId: this.props.wordId,
-      pronunciation: this.props.pronunciation || '',
-      partOfSpeech: this.props.partOfSpeech || '',
-      simpleDefinition: this.props.simpleDefinition || '',
-      longDefinition: this.props.longDefinition || '',
+      word: this.props.reference,
+      // name: this.props.name,
+      // wordId: this.props.wordId,
+      // pronunciation: this.props.pronunciation || '',
+      // partOfSpeech: this.props.partOfSpeech || '',
+      // simpleDefinition: this.props.simpleDefinition || '',
+      // longDefinition: this.props.longDefinition || '',
       sortPosition: this.props.initialPosition
     }
   }
@@ -27,35 +28,35 @@ export class Word extends React.Component {
   */
 
   showPronunciation() {
-    if (this.state.pronunciation !== '') {
-      return <div className='pronunciation'>{this.state.pronunciation}</div>;
+    if (this.state.word.pronunciation !== '') {
+      return <div className='pronunciation'>{this.state.word.pronunciation}</div>;
     }
   }
 
   showPartOfSpeech() {
-    if (this.state.partOfSpeech !== '') {
-      return <div className='part-of-speech'>{this.state.partOfSpeech}</div>;
+    if (this.state.word.partOfSpeech !== '') {
+      return <div className='part-of-speech'>{this.state.word.partOfSpeech}</div>;
     }
   }
 
   showSimpleDefinition() {
-    if (this.state.simpleDefinition !== '') {
-      return <div className='simple-definition'>{this.state.simpleDefinition}</div>;
+    if (this.state.word.simpleDefinition !== '') {
+      return <div className='simple-definition'>{this.state.word.simpleDefinition}</div>;
     }
   }
 
   showLongDefinition() {
-    if (this.state.longDefinition !== '') {
-      return <div className='long-definition'>{this.state.longDefinition}</div>;
+    if (this.state.word.longDefinition !== '') {
+      return <div className='long-definition'>{this.state.word.longDefinition}</div>;
     }
   }
 
   render() {
     return (
       <div id={'entry' + this.state.sortPosition} className='word'>
-        <a name={'entry' + this.state.wordId}></a>
+        <a name={'entry' + this.state.word.wordId}></a>
         <div className='name'>
-          {this.state.name}
+          {this.state.word.name}
         </div>
         {this.showPronunciation()}
 

src/index.jsx

@@ -16,10 +16,27 @@ class Lexiconga extends React.Component {
       scroll: {
         x: 0,
         y: 0
-      }
-    }
+      },
 
-    // this.defaultDictionaryJSON = JSON.stringify(this.state.dictionaryDetails);  //Saves a stringifyed default dictionary.
+      currentDictionary: {
+        name: "New",
+        description: "A new dictionary.",
+        createdBy: 'Someone',
+        words: [],
+        settings: {
+          allowDuplicates: false,
+          caseSensitive: false,
+          partsOfSpeech: "Noun,Adjective,Verb,Adverb,Preposition,Pronoun,Conjunction",
+          sortByEquivalent: false,
+          isComplete: false,
+          isPublic: false
+        },
+        nextWordId: 1,
+        externalID: 0
+      }
+    };
+
+    this.defaultDictionaryJSON = JSON.stringify(this.state.dictionaryDetails);  //Saves a stringifyed default dictionary.
     this.previousDictionary = {};
 
     // this.addTestWord();
@@ -29,8 +46,8 @@ class Lexiconga extends React.Component {
     return (
       <div>
         <Header />
-        <NewWordForm />
-        <Dictionary />
+        <NewWordForm reference={this.state.currentDictionary} />
+        <Dictionary reference={this.state.currentDictionary} />
       </div>
     );
   }