Start adding words to db via search form

src/components/management/SearchBox.jsx

@@ -47,7 +47,7 @@ export class SearchBox extends Component {
                         <span className='select'>
                           <select value={this.state.searchingIn}
                             onChange={event => {
-                              this.setState({searchingIn: event.target.value});
+                              this.setState({ searchingIn: event.target.value });
                             }}>
                             <option value='name'>Word</option>
                             <option value='definition'>Definition</option>
@@ -60,7 +60,7 @@ export class SearchBox extends Component {
                           value={this.state.searchTerm}
                           onChange={event => {
                             console.log(event);
-                            this.setState({searchTerm: event.target.value});
+                            this.setState({ searchTerm: event.target.value });
                           }} />
                       </p>
                     </div>

src/components/management/WordForm.jsx

@@ -1,9 +1,81 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
+import {Word} from '../../managers/Word';
+
 export class WordForm extends Component {
   constructor (props) {
     super(props);
+
+    this.state = {
+      wordName: this.props.name || ''
+    , wordPronunciation: this.props.pronunciation || ''
+    , wordPartOfSpeech: this.props.partOfSpeech || ''
+    , wordDefinition: this.props.definition || ''
+    , wordDetails: this.props.details || ''
+
+    , nameIsValid: true
+    , pronunciationIsValid: true
+    , partOfSpeechIsValid: true
+    , definitionIsValid: true
+    , detailsIsValid: true
+    }
+  }
+
+  isValidWord () {
+    let nameIsValid = true
+    , definitionIsValid = true
+    , detailsIsValid = true;
+    
+    if (this.state.wordName === '') {
+      nameIsValid = false;
+    }
+
+    if (this.state.wordPartOfSpeech === '') {
+      // popup(?) confirming no part of speech.
+    }
+
+    if (this.state.wordDefinition === ''
+        && this.state.wordDetails === '') {
+      definitionIsValid = false;
+      detailsIsValid = false;
+    }
+
+    this.setState({
+      nameIsValid
+    , definitionIsValid
+    , detailsIsValid
+    });
+
+    return nameIsValid == true && definitionIsValid == true && detailsIsValid == true;
+  }
+
+  createWord () {
+    const word = new Word({
+      name: this.state.wordName
+    , pronunciation: this.state.wordPronunciation
+    , partOfSpeech: this.state.wordPartOfSpeech
+    , definition: this.state.wordDefinition
+    , details: this.state.wordDetails
+    });
+
+
+    if (this.isValidWord()) {
+      word.create()
+      .then(() => {
+        this.clearForm();
+      });
+    }
+  }
+
+  clearForm () {
+    this.setState({
+      wordName: ''
+    , wordPronunciation: ''
+    , wordPartOfSpeech: ''
+    , wordDefinition: ''
+    , wordDetails: ''
+    });
   }
 
   render () {
@@ -12,14 +84,27 @@ export class WordForm extends Component {
         <div className='field'>
           <label className='label'>Word</label>
           <p className='control'>
-            <input className='input' type='text' placeholder='Required' />
+            <input className={`input${(!this.state.nameIsValid) ? ' is-danger' : ''}`}
+              type='text' placeholder='Required'
+              value={this.state.wordName}
+              onChange={(event) => {
+                this.setState({ wordName: event.target.value });
+              }} />
+              {(!this.state.nameIsValid)
+                ? (
+                  <span className='help is-danger'>You must specify the word.</span>
+                ) : null}
           </p>
         </div>
 
         <div className='field'>
           <label className='label'>Pronunciation</label>
           <p className='control'>
-            <input className='input' type='text' placeholder='[prəˌnʌnsiˈeɪʃən]' />
+            <input className='input' type='text' placeholder='[prəˌnʌnsiˈeɪʃən]'
+              value={this.state.wordPronunciation}
+              onChange={(event) => {
+                this.setState({ wordPronunciation: event.target.value });
+              }} />
           </p>
         </div>
 
@@ -27,8 +112,11 @@ export class WordForm extends Component {
           <label className='label'>Part of Speech</label>
           <p className='control'>
             <span className='select'>
-              <select>
-                <option></option>
+              <select value={this.state.wordPartOfSpeech}
+                onChange={event => {
+                  this.setState({ wordPartOfSpeech: event.target.value });
+                }}>
+                <option value=''></option>
                 {this.props.partsOfSpeech.map((partOfSpeech) => {
                   return (
                     <option value={partOfSpeech}>{partOfSpeech}</option>
@@ -42,14 +130,48 @@ export class WordForm extends Component {
         <div className='field'>
           <label className='label'>Definition</label>
           <p className='control'>
-            <input className='input' type='text' placeholder='Text input' />
+            <input className={`input${(!this.state.definitionIsValid) ? ' is-danger' : ''}`}
+              type='text' placeholder='Equivalent word(s)'
+              value={this.state.wordDefinition}
+              onChange={(event) => {
+                this.setState({ wordDefinition: event.target.value })
+              }} />
+              {(!this.state.definitionIsValid)
+                ? (
+                  <span className='help is-danger'>
+                    You must at least enter a Definition if excluding Details.
+                  </span>
+                ) : null}
           </p>
         </div>
         
         <div className='field'>
           <label className='label'>Details</label>
           <p className='control'>
-            <textarea className='textarea' placeholder='Textarea' />
+            <textarea className={`textarea${(!this.state.detailsIsValid) ? ' is-danger' : ''}`}
+              placeholder='Explanation of word (Markdown enabled)'
+              onChange={(event) => {
+                this.setState({ wordDetails: event.target.value });
+              }}>
+              {this.state.wordDetails}
+            </textarea>
+              {(!this.state.detailsIsValid)
+                ? (
+                  <span className='help is-danger'>
+                    You must at least enter Details if excluding a Definition.
+                  </span>
+                ) : null}
+          </p>
+        </div>
+
+        <div className='field'>
+          <p className='control'>
+            <a className='button is-primary'
+              onClick={() => {
+                this.createWord();
+              }}>
+              Create
+            </a>
           </p>
         </div>
       </div>

src/managers/DictionaryData.js

@@ -1,6 +1,7 @@
 import assert from 'assert';
 import store from 'store';
 import wordDb from './WordDatabase';
+import idManager from './IDManager';
 
 const defaultDictionary = {
   name: 'New'
@@ -17,6 +18,15 @@ class DictionaryData {
 
     if (!store.get('Lexiconga')) {
       store.set('Lexiconga', defaultDictionary);
+    } else {
+      const largestId = wordDb.words
+        .orderBy('id').reverse()
+        .first((word) => {
+          return word.id;
+        });
+
+      idManager.setId('word', ++largestId);
+      console.log('First word ID: ' + idManager.next('word').toString());
     }
   }
 

src/managers/IDManager.js

@@ -0,0 +1,17 @@
+class IDManager {
+  constructor () {
+    this['key'] = 0;
+    this['word'] = 0;
+    // Add IDs here as needed.
+  }
+
+  setID (id, value) {
+    this[id] = value;
+  }
+
+  next (id) {
+    return this[id]++;
+  }
+}
+
+export default new IDManager;

src/managers/Word.js

@@ -0,0 +1,45 @@
+import assert from 'assert';
+import store from 'store';
+import wordDb from './WordDatabase';
+
+const defaultDictionary = {
+  name: 'New'
+, specification: 'Dictionary'
+, description: 'A new dictionary.'
+, partsOfSpeech: ['Noun', 'Adjective', 'Verb']
+}
+
+export class Word {
+  constructor ({name = '', pronunciation = '', partOfSpeech = '', definition = '', details = ''}) {
+    this.name = name;
+    this.pronunciation = pronunciation;
+    this.partOfSpeech = partOfSpeech;
+    this.definition = definition;
+    this.details = details;
+  }
+
+  create () {
+    const timestampInSeconds = Math.round(Date.now() / 1000);
+    this.createdTime = timestampInSeconds;
+    this.modifiedTime = null;
+
+    return wordDb.words.add(this)
+    .then(id => {
+      this.id = id;
+      console.log('Word added successfully');
+    })
+    .catch(error => {
+      console.error(error);
+    });
+  }
+
+  update (wordObject, wordId) {
+    const timestampInSeconds = Math.round(Date.now() / 1000);
+    this.modifiedTime = timestampInSeconds;
+
+    wordDb.words.put(wordObject, wordId)
+    .catch(error => {
+
+    });
+  }
+}

src/managers/WordDatabase.js

@@ -1,12 +1,16 @@
 import Dexie from 'dexie';
 
+import {Word} from './Word';
+
 const db = new Dexie('Lexiconga');
 db.version(1).stores({
-  words: '++id, name, partOfSpeech'
+  words: '++id, name, partOfSpeech, createdTime, modifiedTime'
 });
 
 if (['emptydb', 'donotsave'].includes(process.env.NODE_ENV)) {
   db.words.clear();
 }
 
+db.words.mapToClass(Word);
+
 export default db;