You can now add a word while editing a word, allowing the edit word form to stay open and reorganize! Cool stuff!

Also fixed a small styling thing.

src/components/Dictionary.jsx

@@ -9,31 +9,20 @@ export class Dictionary extends React.Component {
   }
 
   showWords() {
-    let words = this.props.words.map((word, index) => {
-      return <Word key={'dictionaryEntry' + index.toString()} isEditing={true}
+    let words = this.props.words.map((word) => {
+      return <Word key={'dictionaryEntry' + word.wordId.toString()} isEditing={true}
         name={word.name}
         pronunciation={word.pronunciation}
         partOfSpeech={word.partOfSpeech}
         simpleDefinition={word.simpleDefinition}
         longDefinition={word.longDefinition}
         wordId={word.wordId}
-        index={index}
-        passWordAndUpdate={(index, wordObject) => this.passWordAndUpdate(index, wordObject)} />;
+        updateWord={(wordId, wordObject) => this.props.updateWord(wordId, wordObject)} />;
     });
 
-    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>

src/components/Input.jsx

@@ -18,6 +18,7 @@ export class Input extends React.Component {
 
     // Bind listeners
     this.handleOnChange = this.handleOnChange.bind(this);
+    this.handleOnKeyDown = this.handleOnKeyDown.bind(this);
   }
   
   // Whenever the input changes we update the value state of this component
@@ -28,6 +29,12 @@ export class Input extends React.Component {
     });
   }
 
+  handleOnKeyDown(event) {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(event);
+    }
+  }
+
   showHelperLink() {
     if (this.props.helperLink) {
       return (
@@ -49,7 +56,7 @@ export class Input extends React.Component {
           {this.props.name}
           {this.showHelperLink()}
         </span>
-        <input type="text" onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
+        <input type="text" onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
       </label>
     );
   }

src/components/TextArea.jsx

@@ -36,7 +36,7 @@ export class TextArea extends Input {
             action={() => this.handleMaximizeClick()}
             label='Maximize' />
         </span>
-        <textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
+        <textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={this.handleOnKeyDown} value={this.state.value} />
       </label>
     );
   }

src/components/Word.jsx

@@ -125,7 +125,7 @@ export class Word extends React.Component {
   }
 
   updateWord(wordObject) {
-    this.props.passWordAndUpdate(this.props.index, {
+    this.props.updateWord(this.props.wordId, {
       name: wordObject.name || this.props.name,
       pronunciation: wordObject.pronunciation || this.props.pronunciation,
       partOfSpeech: wordObject.partOfSpeech || this.props.partOfSpeech,
@@ -148,13 +148,13 @@ export class Word extends React.Component {
 
   render() {
     return (
-      <div id={'entry' + this.props.index} className='word'>
-
-        <a name={'entry' + this.props.wordId}></a>
+      <div id={'entry' + this.props.wordId} className='word'>
 
         {this.showWordOrEdit()}
 
-        {this.showManagementArea()}
+        <div className='management'>
+          {this.showManagementArea()}
+        </div>
 
       </div>
     );

src/components/WordForm.jsx

@@ -124,7 +124,7 @@ export class WordForm extends React.Component {
 
         <span id="errorMessage">{this.state.errorMessage}</span>
         
-        <Button action={() => this.handleSubmit()} label={this.props.submitLabel} />
+        <Button classes={(this.props.updateWord) ? 'edit-button' : 'add-button'} action={() => this.handleSubmit()} label={this.props.submitLabel} />
 
         <div id="updateConflict">{this.state.updateConflictMessage}</div>
       </form>

src/index.jsx

@@ -81,7 +81,7 @@ class Lexiconga extends React.Component {
     updatedWords = this.sortWords(updatedWords);
 
     let updatedDetails = this.state.details;
-    updatedDetails.nextwordid += 1;
+    updatedDetails.nextWordId += 1;
 
     this.setState({
       words: updatedWords,
@@ -93,44 +93,44 @@ class Lexiconga extends React.Component {
     });
   }
 
-  updateWord(index, wordObject) {
-    if (this.showConsoleMessages) console.log('Updating ' + this.state.words[index].name + ' to ' + wordObject.name);
+  firstIndexWordWithId(id) {
+    let resultIndex = -1;
 
-    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;
+    for (let i = 0; i < this.state.words.length; i++) {
+      let word = this.state.words[i];
 
-    updatedWords = this.sortWords(updatedWords);
-
-    this.setState({words: updatedWords}, () => {
-      if (this.showConsoleMessages) {
-        console.log('Updated successfully');
+      if (word.wordId === id) {
+        resultIndex = i;
+        break;
       }
-    });
-  }
-
-  showWords() {
-    let words = this.state.words.map((word, index) => {
-      return <Word key={'dictionaryEntry' + index.toString()} isEditing={true}
-        name={word.name}
-        pronunciation={word.pronunciation}
-        partOfSpeech={word.partOfSpeech}
-        simpleDefinition={word.simpleDefinition}
-        longDefinition={word.longDefinition}
-        wordId={word.wordId}
-        index={index}
-        updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />;
-    });
-
-    if (this.showConsoleMessages) {
-      console.log('Showing these words:');
-      console.log(words);
     }
 
-    return <div>{words}</div>;
+    return resultIndex;
+  }
+
+  updateWord(wordId, wordObject) {
+    let index = this.firstIndexWordWithId(wordId);
+
+    if (index >= 0) {
+      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;
+
+      updatedWords = this.sortWords(updatedWords);
+
+      this.setState({words: updatedWords}, () => {
+        if (this.showConsoleMessages) {
+          console.log('Updated successfully');
+        }
+      });
+    } else {
+      console.log('Could not update. No word with id of ' + wordId.toString());
+    }
   }
 
   render() {
@@ -149,7 +149,7 @@ class Lexiconga extends React.Component {
           details={this.state.details}
           words={this.state.words}
           settings={this.state.settings}
-          updateWord={(index, wordObject) => this.updateWord(index, wordObject)} />
+          updateWord={(wordId, wordObject) => this.updateWord(wordId, wordObject)} />
       </div>
     );
   }

src/sass/_lexiconga.scss

@@ -124,20 +124,20 @@ input, textarea, select, option {
 	background: #dcb078;
 }
 
-entry {
+.word {
 	background: #d7ad7d;
 	border: none;
 	-webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
 	-moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
 	box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-}
 
-.editButton {
-	background: #86ac41;
-}
+	.edit-button {
+		background: #86ac41;
+	}
 
-.deleteButton {
-	background: #ba5536;
+	.delete-button {
+		background: #ba5536;
+	}
 }
 
 footer {

src/sass/_styles.scss

@@ -362,7 +362,7 @@ searchTerm {
     margin: 10px;
 }
 
-.editButton, .deleteButton, .deleteConfirmButton, .deleteCancelButton {
+.edit-button, .delete-button, .deleteConfirmButton, .deleteCancelButton {
     display: inline;
     font-size: 10px;
     margin: 5px;