Made word form component able to edit and add words for better reusability, fixed submit on enter.

src/components/Input.jsx

@@ -49,7 +49,7 @@ export class Input extends React.Component {
           {this.props.name}
           {this.showHelperLink()}
         </span>
-        <input type="text" onChange={this.handleOnChange} value={this.state.value} />
+        <input type="text" onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
       </label>
     );
   }

src/components/TextArea.jsx

@@ -12,11 +12,7 @@ export class TextArea extends Input {
     this.handleMaximizeClick = this.handleMaximizeClick.bind(this);
   }
 
-  handleMaximizeClick(event) {
+  handleMaximizeClick() {
-    this.showFullScreenTextbox();
-  }
-
-  showFullScreenTextbox() {
     var sourceTextboxElement = document.getElementById(this.props.id);
     var targetTextboxElement = document.getElementById("fullScreenTextbox");
     document.getElementById("fullScreenTextboxLabel").innerHTML = this.props.name;
@@ -40,7 +36,7 @@ export class TextArea extends Input {
             action={() => this.handleMaximizeClick()}
             label='Maximize' />
         </span>
-        <textarea id={this.props.id} onChange={this.handleOnChange} value={this.state.value} />
+        <textarea id={this.props.id} onChange={this.handleOnChange} onKeyDown={(event) => this.props.onKeyDown(event)} value={this.state.value} />
       </label>
     );
   }

src/components/Word.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import {Input} from './Input';
+import {WordForm} from './WordForm';
-import {TextArea} from './TextArea';
 import {Button} from './Button';
 
 const saveIcon = <i>&#128190;</i>;
@@ -33,30 +32,14 @@ export class Word extends React.Component {
   */
 
   showName() {
-    let editButton;
-    if (this.state.editWord) {
-      return (
-        <div>
-          <Input value={this.props.name} ref={(inputComponent) => this.nameField = inputComponent} />
-        </div>
-      );
-    } else {
     return (
       <div className='name'>
         {this.props.name}
       </div>
     );
   }
-  }
 
   showPronunciation() {
-    if (this.state.editWord) {
-      return (
-        <div>
-          <Input value={this.props.pronunciation} ref={(inputComponent) => this.pronunciationField = inputComponent} />
-        </div>
-      );
-    } else {
     if (this.props.pronunciation !== '') {
       return (
         <div className='pronunciation'>
@@ -65,16 +48,8 @@ export class Word extends React.Component {
       );
     }
   }
-  }
 
   showPartOfSpeech() {
-    if (this.state.editWord) {
-      return (
-        <div>
-          <Input value={this.props.partOfSpeech} ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
-        </div>
-      );
-    } else {
     if (this.props.partOfSpeech !== '') {
       return (
         <div className='part-of-speech'>
@@ -83,16 +58,8 @@ export class Word extends React.Component {
       );
     }
   }
-  }
 
   showSimpleDefinition() {
-    if (this.state.editWord) {
-      return (
-        <div>
-          <Input value={this.props.simpleDefinition} ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
-        </div>
-      );
-    } else {
     if (this.props.simpleDefinition !== '') {
       return (
         <div className='simple-definition'>
@@ -101,16 +68,8 @@ export class Word extends React.Component {
       );
     }
   }
-  }
 
   showLongDefinition() {
-    if (this.state.editWord) {
-      return (
-        <div>
-          <Input value={this.props.longDefinition} ref={(inputComponent) => this.longDefinitionField = inputComponent} />
-        </div>
-      );
-    } else {
     if (this.props.longDefinition !== '') {
       return (
         <div className='long-definition'>
@@ -119,29 +78,41 @@ export class Word extends React.Component {
       );
     }
   }
+
+  showWordOrEdit() {
+    if (this.state.editWord) {
+      return (
+        <WordForm
+          updateWord={(wordObject) => this.updateWord(wordObject)}
+          wordValues={this.packageThisWordIntoObject()}
+          submitLabel='Update' />
+      );
+    } else {
+      return (
+        <div>
+          {this.showName()}
+
+          {this.showPronunciation()}
+
+          {this.showPartOfSpeech()}
+
+          <br />
+
+          {this.showSimpleDefinition()}
+
+          {this.showLongDefinition()}
+        </div>
+      );
+    }
   }
 
   showManagementArea() {
     if (this.props.isEditing) {
       if (this.state.editWord) {
         return (
-          <div>
-            <Button
-              action={() => {
-                let values = {
-                  name: this.nameField.state.value,
-                  pronunciation: this.pronunciationField.state.value,
-                  partOfSpeech: this.partOfSpeechField.state.value,
-                  simpleDefinition: this.simpleDefinitionField.state.value,
-                  longDefinition: this.longDefinitionField.state.value
-                }
-                this.setState({editWord: false}, () => this.updateWord(values));
-              }}
-              label='Save' />
           <Button
             action={() => this.setState({editWord: false})}
             label='Cancel' />
-          </div>
         );
       } else {
         return (
@@ -161,10 +132,18 @@ export class Word extends React.Component {
       simpleDefinition: wordObject.simpleDefinition || this.props.simpleDefinition,
       longDefinition: wordObject.longDefinition || this.props.longDefinition
     });
+
+    this.setState({editWord: false});
   }
 
-  editProperty(property) {
+  packageThisWordIntoObject() {
-
+    return {
+      name: this.props.name,
+      pronunciation: this.props.pronunciation,
+      partOfSpeech: this.props.partOfSpeech,
+      simpleDefinition: this.props.simpleDefinition,
+      longDefinition: this.props.longDefinition
+    };
   }
 
   render() {
@@ -173,17 +152,7 @@ export class Word extends React.Component {
 
         <a name={'entry' + this.props.wordId}></a>
 
-        {this.showName()}
+        {this.showWordOrEdit()}
-
-        {this.showPronunciation()}
-
-        {this.showPartOfSpeech()}
-
-        <br />
-
-        {this.showSimpleDefinition()}
-
-        {this.showLongDefinition()}
 
         {this.showManagementArea()}
 

src/components/WordForm.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
+import {keyCodeFor} from '../js/helpers'
+
 import {Input} from './Input';
 import {TextArea} from './TextArea';
 import {Button} from './Button';
 
-export class NewWordForm extends React.Component {
+export class WordForm extends React.Component {
   constructor(props) {
     super(props);
 
@@ -21,7 +23,7 @@ export class NewWordForm extends React.Component {
     this.longDefinitionField = null;
   }
 
-  submitWordOnCtrlEnter() {
+  submitWordOnCtrlEnter(event) {
     var keyCode = (event.which ? event.which : event.keyCode);
 
     //Windows and Linux Chrome accept ctrl+enter as keyCode 10.
@@ -34,15 +36,21 @@ export class NewWordForm extends React.Component {
 
   handleSubmit() {
     if (this.formIsValid()) {
-      this.props.addWord({
+      let word = {
         name: this.wordField.state.value,
         pronunciation: this.pronunciationField.state.value,
         partOfSpeech: this.partOfSpeechField.state.value,
         simpleDefinition: this.simpleDefinitionField.state.value,
         longDefinition: this.longDefinitionField.state.value
-      });
+      };
 
-      this.clearForm()
+      if (this.props.updateWord) {
+        this.props.updateWord(word);
+      } else {
+        this.props.addWord(word);
+      }
+
+      this.clearForm();
     }
   }
 
@@ -77,9 +85,17 @@ export class NewWordForm extends React.Component {
   }
 
   render() {
+    let nameDefaultValue = (this.props.wordValues) ? this.props.wordValues.name : '';
+    let pronunciationDefaultValue = (this.props.wordValues) ? this.props.wordValues.pronunciation : '';
+    let partOfSpeechDefaultValue = (this.props.wordValues) ? this.props.wordValues.partOfSpeech : '';
+    let simpleDefinitionDefaultValue = (this.props.wordValues) ? this.props.wordValues.simpleDefinition : '';
+    let longDefinitionDefaultValue = (this.props.wordValues) ? this.props.wordValues.longDefinition : '';
     return (
       <form>
-        <Input name='Word' ref={(inputComponent) => this.wordField = inputComponent} />
+        <Input name='Word'
+          value={nameDefaultValue}
+          onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
+          ref={(inputComponent) => this.wordField = inputComponent} />
 
         <Input name='Pronunciation'
           helperLink={{
@@ -87,20 +103,28 @@ export class NewWordForm extends React.Component {
             label: "IPA Characters",
             hover: "IPA Character Picker located at http://r12a.github.io/pickers/ipa/"
           }}
+          value={pronunciationDefaultValue}
+          onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
           ref={(inputComponent) => this.pronunciationField = inputComponent} />
 
-        <Input name='Part of Speech' ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
+        <Input name='Part of Speech'
+          value={partOfSpeechDefaultValue}
+          ref={(inputComponent) => this.partOfSpeechField = inputComponent} />
 
         <Input name={<div style={{display: 'inline'}}>Definition/<wbr /><b className="wbr"></b>Equivalent Word(s)</div>}
+          value={simpleDefinitionDefaultValue}
+          onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
           ref={(inputComponent) => this.simpleDefinitionField = inputComponent} />
 
         <TextArea id='newWordForm'
           name={<div style={{display: 'inline'}}>Explanation/<wbr /><b className="wbr"></b>Long Definition</div>}
+          value={longDefinitionDefaultValue}
+          onKeyDown={(event) => this.submitWordOnCtrlEnter(event)}
           ref={(inputComponent) => this.longDefinitionField = inputComponent} />
 
         <span id="errorMessage">{this.state.errorMessage}</span>
         
-        <Button action={() => this.handleSubmit()} label='Add Word' />
+        <Button action={() => this.handleSubmit()} label={this.props.submitLabel} />
 
         <div id="updateConflict">{this.state.updateConflictMessage}</div>
       </form>

src/index.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import {Header} from './components/Header';
-import {NewWordForm} from './components/NewWordForm';
+import {WordForm} from './components/WordForm';
 import {Button} from './components/Button';
 import {Dictionary} from './components/Dictionary';
 
@@ -100,7 +100,7 @@ class Lexiconga extends React.Component {
     updatedWords[index].name = wordObject.name;
     updatedWords[index].pronunciation = wordObject.pronunciation;
     updatedWords[index].partOfSpeech = wordObject.partOfSpeech;
-    updatedWords[index].simpledefinition = wordObject.simpledefinition;
+    updatedWords[index].simpleDefinition = wordObject.simpleDefinition;
     updatedWords[index].longDefinition = wordObject.longDefinition;
 
     updatedWords = this.sortWords(updatedWords);
@@ -137,7 +137,7 @@ class Lexiconga extends React.Component {
     return (
       <div>
         <Header />
-        <NewWordForm addWord={(wordObject) => this.addWord(wordObject)} parent={this} />
+        <WordForm addWord={(wordObject) => this.addWord(wordObject)} submitLabel='Add Word' />
         <Button
           action={() => this.changeDictionaryName()}
           label='change name' />