Got words displaying and sorting correctly! Editing words works, working on editing individual word fields.

src/components/Dictionary.jsx

@@ -1,53 +1,56 @@
 import React from 'react';
 
+import {Word} from './Word';
 import {Button} from './Button';
 
 export class Dictionary extends React.Component {
   constructor(props) {
     super(props);
+  }
 
-    this.state = {
+  showWords() {
-      // name: this.props.reference.name,
+    let words = this.props.words.map((word, index) => {
-      // description: this.props.reference.description,
+      return <Word key={'dictionaryEntry' + index.toString()} isEditing={true}
-      // createdBy: this.props.reference.createdBy,
+        name={word.name}
-      // nextWordId: this.props.reference.nextWordId,
+        pronunciation={word.pronunciation}
-      // externalID: this.props.reference.externalID,
+        partOfSpeech={word.partOfSpeech}
-      // allowDuplicates: this.props.reference.settings.allowDuplicates,
+        simpleDefinition={word.simpleDefinition}
-      // caseSensitive: this.props.reference.settings.caseSensitive,
+        longDefinition={word.longDefinition}
-      // partsOfSpeech: this.props.reference.settings.partOfSpeech,
+        wordId={word.wordId}
-      // sortByEquivalent: this.props.reference.settings.sortByEquivalent,
+        index={index}
-      // isComplete: this.props.reference.settings.isComplete,
+        passWordAndUpdate={(index, wordObject) => this.passWordAndUpdate(index, wordObject)} />;
-      // isPublic: this.props.reference.settings.isPublic
+    });
-      dictionary: this.props.parent.state.details,
+
-      settings: this.props.parent.state.settings
+    if (this.showConsoleMessages) {
+      console.log('Showing these words:');
+      console.log(words);
     }
+
+    return <div>{words}</div>;
+  }
+
+  passWordAndUpdate(index, wordObject) {
+    console.log('Passing edited up: ' + wordObject.name);
+    this.props.updateWord(index, wordObject);
   }
 
   render() {
     return (
       <div>
         <h1 id="dictionaryName">
-          {this.state.dictionary.name}
+          {this.props.details.name}
         </h1>
         
         <h4 id="dictionaryBy">
-          {this.state.dictionary.createdBy}
+          {this.props.details.createdBy}
         </h4>
         <div id="incompleteNotice">
-          Dictionary is complete: {this.state.settings.isComplete.toString()}
+          Dictionary is complete: {this.props.settings.isComplete.toString()}
         </div>
 
         <div id="theDictionary">
-          {this.props.children}
+          {this.showWords()}
         </div>
-
-        <Button
-          action={() => {
-            let tempSettings = this.state.settings;
-            tempSettings.isComplete = !tempSettings.isComplete;
-            this.setState({settings: tempSettings})
-          }}
-          label='Toggle State' />
       </div>
     );
   }

src/components/Input.jsx

@@ -56,6 +56,6 @@ export class Input extends React.Component {
 }
 
 Input.defaultProps = {
-  name: 'Field',
+  name: '',
   doValidate: true
 };

src/components/Word.jsx

@@ -1,18 +1,24 @@
 import React from 'react';
 
+import {Input} from './Input';
+import {TextArea} from './TextArea';
 import {Button} from './Button';
 
+const saveIcon = <i>&#128190;</i>;
+const editIcon = <i>&#128393;</i>;
+
 export class Word extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      name: this.props.name,
+      editWord: false,
-      pronunciation: this.props.pronunciation,
+      editName: false,
-      partOfSpeech: ((this.props.partOfSpeech.length > 0) ? this.props.partOfSpeech : " "),
+      editPronunciation: false,
-      simpleDefinition: this.props.simpleDefinition,
+      editPartOfSpeech: false,
-      longDefinition: this.props.longDefinition
+      editSimpleDefinition: false,
-    }
+      editLongDefinition: false
+    };
   }
 
   /*
@@ -26,65 +32,210 @@ export class Word extends React.Component {
   }
   */
 
+  showName() {
+    let editButton;
+    if (this.state.editName) {
+      if (this.state.editWord) {
+        editButton = (
+          <Button
+            action={() => {
+              let value = this.nameField.state.value;
+              this.setState({editName: false}, () => {
+                this.updateWord({name: value});
+              });
+            }}
+            label={saveIcon} />
+        );
+      }
+      return (
+        <div>
+          <Input value={this.props.name} ref={(inputComponent) => this.nameField = inputComponent} />
+          {editButton}
+        </div>
+      );
+    } else {
+      if (this.state.editWord) {
+        <Button
+          action={() => {
+            this.setState({editName: true});
+          }}
+          label={editIcon} />
+      }
+      return (
+        <div className='name'>
+          {this.props.name}
+          {editButton}
+        </div>
+      );
+    }
+  }
+
   showPronunciation() {
-    if (this.state.pronunciation !== '') {
+    if (this.state.editPronunciation) {
-      return <div className='pronunciation'>{this.state.pronunciation}</div>;
+      return (
+        <div>
+          <Input value={this.props.pronunciation} ref={(inputComponent) => this.pronunciationField = inputComponent} />
+          <Button
+            action={() => {
+              let value = this.pronunciationField.state.value;
+              this.setState({editPronunciation: false}, () => {
+                this.updateWord({pronunciation: value});
+              });
+            }}
+            label={saveIcon} />
+        </div>
+      );
+    } else {
+      if (this.props.pronunciation !== '') {
+        return (
+          <div className='pronunciation'>
+            {this.props.pronunciation}
+            <Button
+              action={() => {
+                this.setState({editPronunciation: true});
+              }}
+              label={editIcon} />
+          </div>
+        );
+      }
     }
   }
 
   showPartOfSpeech() {
-    if (this.state.partOfSpeech !== '') {
+    if (this.state.editPartOfSpeech) {
-      return <div className='part-of-speech'>{this.state.partOfSpeech}</div>;
+      return (
+        <div>
+          <Input value={this.props.partOfSpeech} ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
+          <Button
+            action={() => {
+              let value = this.partOfSpeechField.state.value;
+              this.setState({editPartOfSpeech: false}, () => {
+                this.updateWord({partOfSpeech: value});
+              });
+            }}
+            label={saveIcon} />
+        </div>
+      );
+    } else {
+      if (this.props.partOfSpeech !== '') {
+        return (
+          <div className='part-of-speech'>
+            {this.props.partOfSpeech}
+            <Button
+              action={() => {
+                this.setState({editPartOfSpeech: true});
+              }}
+              label={editIcon} />
+          </div>
+        );
+      }
     }
   }
 
   showSimpleDefinition() {
-    if (this.state.simpleDefinition !== '') {
+    if (this.state.editSimpleDefinition) {
-      return <div className='simple-definition'>{this.state.simpleDefinition}</div>;
+      return (
+        <div>
+          <Input value={this.props.simpleDefinition} ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
+          <Button
+            action={() => {
+              let value = this.simpleDefinitionField.state.value;
+              this.setState({editSimpleDefinition: false}, () => {
+                this.updateWord({simpleDefinition: value});
+              });
+            }}
+            label={saveIcon} />
+        </div>
+      );
+    } else {
+      if (this.props.simpleDefinition !== '') {
+        return (
+          <div className='simple-definition'>
+            {this.props.simpleDefinition}
+            <Button
+              action={() => {
+                this.setState({editSimpleDefinition: true});
+              }}
+              label={editIcon} />
+          </div>
+        );
+      }
     }
   }
 
   showLongDefinition() {
-    if (this.state.longDefinition !== '') {
+    if (this.state.editLongDefinition) {
-      return <div className='long-definition'>{this.state.longDefinition}</div>;
+      return (
+        <div>
+          <Input value={this.props.longDefinition} ref={(inputComponent) => this.longDefinitionField = inputComponent} />
+          <Button
+            action={() => {
+              let value = this.longDefinitionField.state.value;
+              this.setState({editLongDefinition: false}, () => {
+                this.updateWord({longDefinition: value});
+              });
+            }}
+            label={saveIcon} />
+        </div>
+      );
+    } else {
+      if (this.props.longDefinition !== '') {
+        return (
+          <div className='long-definition'>
+            {this.props.longDefinition}
+            <Button
+              action={() => {
+                this.setState({editLongDefinition: true});
+              }}
+              label={editIcon} />
+          </div>
+        );
+      }
     }
   }
 
   showManagementArea() {
     if (this.props.isEditing) {
-      return (
+      if (this.state.editWord) {
-        <Button
+        return (
-          action={() => this.updateWord()}
+          <Button
-          label='Save Edits' />
+            action={() => {
-      );
+              this.setState({editWord: false});
+            }}
+            label='Stop Editing' />
+        );
+      } else {
+        return (
+          <Button
+            action={() => this.setState({editWord: true})}
+            label='Edit Word' />
+        );
+      }
     }
   }
 
-  updateWord() {
+  updateWord(wordObject) {
-    this.setState({
+    this.props.passWordAndUpdate(this.props.index, {
-      name: 'this.state.name',
+      name: wordObject.name || this.props.name,
-      pronunciation: 'this.state.pronunciation',
+      pronunciation: wordObject.pronunciation || this.props.pronunciation,
-      partOfSpeech: 'this.state.partOfSpeech',
+      partOfSpeech: wordObject.partOfSpeech || this.props.partOfSpeech,
-      simpleDefinition: 'this.state.simpleDefinition',
+      simpleDefinition: wordObject.simpleDefinition || this.props.simpleDefinition,
-      longDefinition: 'this.state.longDefinition'
+      longDefinition: wordObject.longDefinition || this.props.longDefinition
-    }, () => {
-      this.props.updateWord(this.props.index, {
-        name: this.state.name,
-        pronunciation: this.state.pronunciation,
-        partOfSpeech: this.state.partOfSpeech,
-        simpleDefinition: this.state.simpleDefinition,
-        longDefinition: this.state.longDefinition
-      });
     });
   }
 
+  editProperty(property) {
+
+  }
+
   render() {
     return (
       <div id={'entry' + this.props.index} className='word'>
+
         <a name={'entry' + this.props.wordId}></a>
-        <div className='name'>
+
-          {this.state.name}
+        {this.showName()}
-        </div>
+
         {this.showPronunciation()}
 
         {this.showPartOfSpeech()}
@@ -92,9 +243,11 @@ export class Word extends React.Component {
         <br />
 
         {this.showSimpleDefinition()}
+
         {this.showLongDefinition()}
 
         {this.showManagementArea()}
+
       </div>
     );
   }

src/index.jsx

@@ -8,7 +8,6 @@ import {Header} from './components/Header';
 import {NewWordForm} from './components/NewWordForm';
 import {Button} from './components/Button';
 import {Dictionary} from './components/Dictionary';
-import {Word} from './components/Word';
 
 import {dynamicSort} from './js/helpers';
 
@@ -39,7 +38,7 @@ class Lexiconga extends React.Component {
         sortByEquivalent: false,
         isComplete: false,
         isPublic: false
-      },
+      }
     };
 
     this.defaultDictionaryJSON = JSON.stringify(this.state.dictionaryDetails);  //Saves a stringifyed default dictionary.
@@ -57,6 +56,17 @@ class Lexiconga extends React.Component {
     })
   }
 
+  sortWords(array) {
+    let sortMethod;
+    if (this.state.settings.sortByEquivalent) {
+        sortMethod = ['simpleDefinition', 'partOfSpeech'];
+    } else {
+        sortMethod = ['name', 'partOfSpeech'];
+    }
+
+    return array.sort(dynamicSort(sortMethod));
+  }
+
   addWord(wordObject) {
     let newWord = {
       name: wordObject.name || 'errorWord',
@@ -67,15 +77,8 @@ class Lexiconga extends React.Component {
       wordId: this.state.details.nextWordId
     }
 
-    let sortMethod;
-    if (this.state.settings.sortByEquivalent) {
-        sortMethod = ['simpleDefinition', 'partOfSpeech'];
-    } else {
-        sortMethod = ['name', 'partOfSpeech'];
-    }
-
     let updatedWords = this.state.words.concat([newWord]);
-    updatedWords.sort(dynamicSort(sortMethod));
+    updatedWords = this.sortWords(updatedWords);
 
     let updatedDetails = this.state.details;
     updatedDetails.nextwordid += 1;
@@ -91,13 +94,22 @@ class Lexiconga extends React.Component {
   }
 
   updateWord(index, wordObject) {
+    if (this.showConsoleMessages) console.log('Updating ' + this.state.words[index].name + ' to ' + wordObject.name);
+
     let updatedWords = this.state.words;
     updatedWords[index].name = wordObject.name;
     updatedWords[index].pronunciation = wordObject.pronunciation;
     updatedWords[index].partOfSpeech = wordObject.partOfSpeech;
     updatedWords[index].simpledefinition = wordObject.simpledefinition;
     updatedWords[index].longDefinition = wordObject.longDefinition;
-    this.setState({words: updatedWords});
+
+    updatedWords = this.sortWords(updatedWords);
+
+    this.setState({words: updatedWords}, () => {
+      if (this.showConsoleMessages) {
+        console.log('Updated successfully');
+      }
+    });
   }
 
   showWords() {
@@ -113,6 +125,11 @@ class Lexiconga extends React.Component {
         updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />;
     });
 
+    if (this.showConsoleMessages) {
+      console.log('Showing these words:');
+      console.log(words);
+    }
+
     return <div>{words}</div>;
   }
 
@@ -128,9 +145,11 @@ class Lexiconga extends React.Component {
         <div id="incompleteNotice">
           Dictionary is complete: {this.state.settings.isComplete.toString()}
         </div>
-        <Dictionary parent={this}>
+        <Dictionary
-          {this.showWords()}
+          details={this.state.details}
-        </Dictionary>
+          words={this.state.words}
+          settings={this.state.settings}
+          updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />
       </div>
     );
   }