Enable switching details from DictionaryDetails menu.

Add Phonology section to DictionaryDetails.
Update DictionaryDetails and MainDisplay to have more data to work with and display.

src/components/MainDisplay.jsx

@@ -27,12 +27,28 @@ export const MainDisplay = ({ dictionaryInfo, wordsToDisplay, updateDisplay, upd
               specification={ dictionaryInfo.specification }
               description={ dictionaryInfo.description }
               partsOfSpeech={ dictionaryInfo.partsOfSpeech }
+              alphabeticalOrder={['b', 'p', 't', 'd', 'a', 'o', 'j', 'e']}
               details={{
+                phonology: {
+                  consonants: ['b', 'p', 'd', 't', 'j'],
+                  vowels: ['a', 'o', 'e'],
+                  blends: ['ae', 'oe', 'tj', 'dy'],
+                  phonotactics: {
+                    onset: ['b', 'p', 'j'],
+                    nucleus: ['a', 'o', 'e'],
+                    coda: ['any'],
+                    exceptions: 'There are no exceptions',
+                  },
+                },
+                grammar: {
+                  content: 'The rules of the language are simple: just follow them!'
+                },
                 custom: [
                   {
                     name: 'Test Tab',
+                    content: 'This is a test tab to test how custom tabs work!',
                   }
-                ]
+                ],
               }}
             />
 

src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx

@@ -0,0 +1,143 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+import marked from 'marked';
+
+export const PhonologyDisplay = ({ phonologyContent }) => {
+  return (
+    <div>
+      <h4 className='title is-4'>
+        Phonemes
+      </h4>
+
+      <div className='columns'>
+
+        <div className='column is-half'>
+          <strong>Consonants:</strong>
+          <div className='tags'>
+            {phonologyContent.consonants.map(consonant => {
+              return (
+                <span key={`consonant_${ consonant }_${ Date.now().toString() }`}
+                  className='tag'>
+                  { consonant }
+                </span>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className='column is-half'>
+          <strong>Vowels:</strong>
+          <div className='tags'>
+            {phonologyContent.vowels.map(vowel => {
+              return (
+                <span key={`vowel_${ vowel }_${ Date.now().toString() }`}
+                  className='tag'>
+                  { vowel }
+                </span>
+              );
+            })}
+          </div>
+        </div>
+
+      </div>
+
+      {
+        phonologyContent.blends.length > 0
+        && (
+          <div className='columns'>
+
+            <div className='column'>
+              <strong>Polyphthongs{'\u200B'}/{'\u200B'}Blends:</strong>
+              <div className='tags'>
+                {phonologyContent.blends.map(blend => {
+                  return (
+                    <span key={`blend_${ blend }_${ Date.now().toString() }`}
+                      className='tag'>
+                      { blend }
+                    </span>
+                  );
+                })}
+              </div>
+            </div>
+
+          </div>
+        )
+      }
+
+      {
+        (phonologyContent.phonotactics.onset.length > 0
+          || phonologyContent.phonotactics.nucleus.length > 0
+          || phonologyContent.phonotactics.coda.length > 0)
+        && (
+          <div>
+            <h4 className='title is-4'>
+              Phonotactics
+            </h4>
+
+            <div className='columns'>
+
+              <div className='column is-one-third'>
+                <strong>Onset:</strong>
+                <div className='tags'>
+                  {phonologyContent.phonotactics.onset.map(onset => {
+                    return (
+                      <span key={`onset_${ onset }_${ Date.now().toString() }`}
+                        className='tag'>
+                        { onset }
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div className='column is-one-third'>
+                <strong>Nucleus:</strong>
+                <div className='tags'>
+                  {phonologyContent.phonotactics.nucleus.map(nucleus => {
+                    return (
+                      <span key={`onset_${ nucleus }_${ Date.now().toString() }`}
+                        className='tag'>
+                        { nucleus }
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+
+              <div className='column is-one-third'>
+                <strong>Coda:</strong>
+                <div className='tags'>
+                  {phonologyContent.phonotactics.coda.map(coda => {
+                    return (
+                      <span key={`onset_${ coda }_${ Date.now().toString() }`}
+                        className='tag'>
+                        { coda }
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+
+            </div>
+
+            {
+              phonologyContent.phonotactics.exceptions.trim() !== ''
+              && (
+                <div className='columns'>
+                  <div className='column'>
+                    <strong>Exceptions:</strong>
+                    <div className="content"
+                      dangerouslySetInnerHTML={{
+                        __html: marked(phonologyContent.phonotactics.exceptions),
+                      }} />
+                  </div>
+                </div>
+              )
+            }
+          </div>
+        )
+      }
+
+    </div>
+  );
+}

src/components/display/DictionaryDetails/DetailsSection/index.jsx

@@ -0,0 +1,123 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+import marked from 'marked';
+
+import { PhonologyDisplay } from './PhonologyDisplay';
+
+const DISPLAY = {
+  NONE: false,
+  DESCRIPTION: 1,
+  DETAILS: 2,
+  STATS: 3,
+}
+
+export class DetailsSection extends Component {
+  constructor (props) {
+    super(props);
+
+    this.defaultMenuItems = [
+      'Phonology',
+      'Grammar',
+    ];
+
+    this.state = {
+      currentDisplay: 0,
+    }
+  }
+
+  mapCustomMenuItems (customTabs) {
+    return customTabs.map(tab => {
+      return tab.name;
+    });
+  }
+
+  displayDetails () {
+    const { currentDisplay } = this.state;
+    const { details } = this.props;
+    const defaultMenuLength = this.defaultMenuItems.length;
+
+    if (currentDisplay < defaultMenuLength) {
+      switch (this.defaultMenuItems[currentDisplay]) {
+        case 'Phonology': {
+          return <PhonologyDisplay phonologyContent={details.phonology} />
+          break;
+        }
+        case 'Grammar': {
+          return 'Grammar content!';
+          break;
+        }
+      }
+    } else {
+      return (
+        <div className='content'>
+          <div dangerouslySetInnerHTML={{
+            __html: marked(details.custom[currentDisplay - defaultMenuLength].content),
+          }} />
+        </div>
+      );
+    }
+  }
+
+  render () {
+    const { details } = this.props;
+
+    let additionalMenu = (
+      <div>
+        <p className='menu-label'>
+          Additional
+        </p>
+        <ul className='menu-list'>
+          {
+            details.custom.map((tab, index) => {
+              const tabId = index + this.defaultMenuItems.length;
+              return (
+                <li key={ `customTab_${ tabId }_${ Date.now().toString() }` }>
+                  <a className={(this.state.currentDisplay === tabId) ? 'is-active' : null}
+                    onClick={ () => this.setState({ currentDisplay: tabId }) }
+                  >
+                    { tab.name }
+                  </a>
+                </li>
+              );
+            })
+          }
+        </ul>
+      </div>
+    );
+
+    const menu = (
+      <div className='menu'>
+        <p className='menu-label'>
+          Linguistics
+        </p>
+        <ul className='menu-list'>
+          {this.defaultMenuItems.map((tab, index) => {
+            return (
+              <li key={ `${ tab }_${ index }_${ Date.now().toString() }` }>
+                <a className={(this.state.currentDisplay === index) ? 'is-active' : null}
+                  onClick={ () => this.setState({ currentDisplay: index }) }
+                >
+                  { tab.capitalize() }
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+
+        { additionalMenu }
+
+      </div>
+    );
+
+    return (
+      <div className='columns'>
+        <aside className='column is-one-quarter'>
+          { menu }
+        </aside>
+        <div className='column'>
+          { this.displayDetails() }
+        </div>
+      </div>
+    );
+  }
+}

src/components/display/DictionaryDetails/index.jsx

@@ -2,7 +2,8 @@ import Inferno from 'inferno';
 import Component from 'inferno-component';
 import marked from 'marked';
 
-import { EditDictionaryModal } from './EditDictionaryModal';
+import { EditDictionaryModal } from '../../management/EditDictionaryModal';
+import { DetailsSection } from './DetailsSection';
 
 const DISPLAY = {
   NONE: false,
@@ -51,7 +52,7 @@ export class DictionaryDetails extends Component {
             <div>
               <div className="content"
                 dangerouslySetInnerHTML={{
-                  __html: this._descriptionHTML
+                  __html: this._descriptionHTML,
                 }} />
             </div>
           );
@@ -59,59 +60,7 @@ export class DictionaryDetails extends Component {
         }
 
         case DISPLAY.DETAILS : {
-          let additionalMenu;
+          displayJSX = <DetailsSection details={ this.props.details } />;
-          if (this.props.details.hasOwnProperty('custom')) {
-            let customTabsJSX = this.props.details.custom.map((tab) => {
-              return (
-                <li key={ 'customTab' + Date.now().toString() }>
-                  <a>
-                    { tab.name }
-                  </a>
-                </li>
-              );
-            });
-
-            additionalMenu = (
-              <div>
-                <p className="menu-label">
-                  Additional
-                </p>
-                <ul className="menu-list">
-                  { customTabsJSX }
-                </ul>
-              </div>
-            );
-          }
-
-          const menu = (
-            <aside className="column is-one-quarter menu">
-              <p className="menu-label">
-                Linguistics
-              </p>
-              <ul className="menu-list">
-                <li><a className="is-active">Phonology</a></li>
-                <li><a>Grammar</a></li>
-              </ul>
-
-              { additionalMenu }
-
-            </aside>
-          );
-
-          let content = (
-            <div className='column'>
-              <p>
-                Details Content!
-              </p>
-            </div>
-          );
-
-          displayJSX = (
-            <div className='columns'>
-              { menu }
-              { content }
-            </div>
-          );
           break;
         }