Start adding Phonology fields to EditLinguisticsForm

src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx

@@ -1,17 +1,27 @@
 import Inferno from 'inferno';
 import Component from 'inferno-component';
 
+import { IPAField } from '../IPAField';
+
 export const EditLinguisticsForm = ({
   editDictionaryModal,
   partsOfSpeech,
+  consonants,
+  vowels,
+  blends,
 }) => {
   return (
     <div className='form'>
       <div className='field'>
-        <label className='label' htmlFor='dictionaryDescription'>Parts of Speech</label>
+        <label className='label' htmlFor='editPartsOfSpeech'>
+          Parts of Speech
+        </label>
+        <p className='help'>
+          Put each part of speech on a separate line
+        </p>
         <div className='control'>
-          <textarea className='textarea' id='partsOfSpeech'
-            placeholder={ `Put each part of speech on a separate line` }
+          <textarea className='textarea' id='editPartsOfSpeech'
+            placeholder={ `Noun\nAdjective\nVerb` }
             value={ partsOfSpeech }
             onInput={ (event) => {
               editDictionaryModal.setState({
@@ -22,6 +32,57 @@ export const EditLinguisticsForm = ({
           />
         </div>
       </div>
+
+      <h4 className='title as-4'>
+        Phonology
+      </h4>
+
+      <div className='columns'>
+
+        <div className='column'>
+          <IPAField label='Consonants' id='editConsonants'
+            helpText='Separate phonemes with a space'
+            placeholder='b p ɱ ʃ ʁ'
+            value={ consonants }
+            onInput={ (newValue) => {
+              editDictionaryModal.setState({
+                consonants: newValue,
+                hasChanged: newValue != editDictionaryModal.props.details.phonology.consonants.join(' '),
+              });
+            }} />
+        </div>
+
+        <div className='column'>
+          <IPAField label='Vowels' id='editVowels'
+            helpText='Separate phonemes with a space'
+            placeholder='a o e'
+            value={ vowels }
+            onInput={ (newValue) => {
+              editDictionaryModal.setState({
+                vowels: newValue,
+                hasChanged: newValue != editDictionaryModal.props.details.phonology.vowels.join(' '),
+              });
+            }} />
+        </div>
+
+      </div>
+
+      <div className='columns'>
+
+        <div className='column'>
+          <IPAField label={`Polyphthongs${'\u200B'}/${'\u200B'}Blends`} id='editBlends'
+            helpText='Separate each with a space'
+            placeholder='ae oe ɱʃ pʁ'
+            value={ blends }
+            onInput={ (newValue) => {
+              editDictionaryModal.setState({
+                blends: newValue,
+                hasChanged: newValue != editDictionaryModal.props.details.phonology.blends.join(' '),
+              });
+            }} />
+        </div>
+
+      </div>
     </div>
   );
 }

src/components/management/EditDictionaryModal/index.jsx

@@ -26,6 +26,13 @@ export class EditDictionaryModal extends Component {
       specification: props.specification,
       description: props.description,
       partsOfSpeech: props.partsOfSpeech.join('\n'),
+      consonants: props.details.phonology.consonants.join(' '),
+      vowels: props.details.phonology.vowels.join(' '),
+      blends: props.details.phonology.blends.join(' '),
+      onset: props.details.phonology.phonotactics.onset.join(' '),
+      nucleus: props.details.phonology.phonotactics.nucleus.join(' '),
+      coda: props.details.phonology.phonotactics.coda.join(' '),
+      exceptions: props.details.phonology.phonotactics.exceptions,
 
       hasChanged: false,
     }
@@ -67,6 +74,13 @@ export class EditDictionaryModal extends Component {
           <EditLinguisticsForm
             editDictionaryModal={ this }
             partsOfSpeech={ this.state.partsOfSpeech }
+            consonants={ this.state.consonants }
+            vowels={ this.state.vowels }
+            blends={ this.state.blends }
+            onset={ this.state.onset }
+            nucleus={ this.state.nucleus }
+            coda={ this.state.coda }
+            exceptions={ this.state.exceptions }
           />
         );
         break;
@@ -110,6 +124,24 @@ export class EditDictionaryModal extends Component {
         .map((value) => { return value.trim() });
     }
 
+    if (this.state.consonants !== this.props.details.phonology.consonants.join(' ')) {
+      updatedDetails['consonants'] = this.state.consonants.split(' ')
+        .filter((value) => { return value !== '' })
+        .map((value) => { return value.trim() });
+    }
+
+    if (this.state.vowels !== this.props.details.phonology.vowels.join(' ')) {
+      updatedDetails['vowels'] = this.state.vowels.split(' ')
+        .filter((value) => { return value !== '' })
+        .map((value) => { return value.trim() });
+    }
+
+    if (this.state.blends !== this.props.details.phonology.blends.join(' ')) {
+      updatedDetails['blends'] = this.state.blends.split(' ')
+        .filter((value) => { return value !== '' })
+        .map((value) => { return value.trim() });
+    }
+
     // console.log(updatedDetails);
 
     this.props.updater.updateDictionaryDetails(updatedDetails)