Add GeneralDisplay tab

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

@@ -0,0 +1,58 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export const GeneralDisplay = ({
+    partsOfSpeech,
+    alphabeticalOrder,
+}) => {
+  return (
+    <div>
+      <div className='columns'>
+
+        <div className='column'>
+          <strong>Parts of Speech:</strong>
+          <div className='tags'>
+            {
+              partsOfSpeech.map(consonant => {
+                return (
+                  <span key={`partOfSpeech_${ consonant }_${ Date.now().toString() }`}
+                    className='tag'>
+                    { consonant }
+                  </span>
+                );
+              })
+            }
+          </div>
+        </div>
+
+      </div>
+
+      <div className='columns'>
+
+        <div className='column'>
+          <strong>Alphabetical Order:</strong>
+          <div className='tags'>
+            {
+              (alphabeticalOrder.length > 0)
+              ? alphabeticalOrder.map(vowel => {
+                return (
+                  <span key={`vowel_${ vowel }_${ Date.now().toString() }`}
+                    className='tag'>
+                    { vowel }
+                  </span>
+                );
+              })
+              : (
+                <span className='tag'>
+                  English Alphabet
+                </span>
+              )
+            }
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+}

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

@@ -5,6 +5,7 @@ import sanitizeHtml from 'sanitize-html';
 
 import './styles.scss';
 
+import { GeneralDisplay } from './GeneralDisplay';
 import { PhonologyDisplay } from './PhonologyDisplay';
 
 const DISPLAY = {
@@ -19,6 +20,7 @@ export class DetailsSection extends Component {
     super(props);
 
     this.defaultMenuItems = [
+      'General',
       'Phonology',
       'Grammar',
     ];
@@ -67,17 +69,19 @@ export class DetailsSection extends Component {
           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>
-            );
-          })}
+          {
+            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 }
@@ -88,15 +92,30 @@ export class DetailsSection extends Component {
 
   displayDetails () {
     const { currentDisplay } = this.state;
-    const { details } = this.props;
+    const {
+      partsOfSpeech,
+      alphabeticalOrder,
+      details,
+    } = this.props;
     const defaultMenuLength = this.defaultMenuItems.length;
 
     let detailsDisplay = '';
 
     if (currentDisplay < defaultMenuLength) {
       switch (this.defaultMenuItems[currentDisplay]) {
+        case 'General': {
+          detailsDisplay = (
+            <GeneralDisplay
+              partsOfSpeech={ partsOfSpeech }
+              alphabeticalOrder={ alphabeticalOrder } />
+          );
+          break;
+        }
         case 'Phonology': {
-          detailsDisplay = <PhonologyDisplay phonologyContent={details.phonology} />
+          detailsDisplay = (
+            <PhonologyDisplay
+              phonologyContent={ details.phonology } />
+          );
           break;
         }
         case 'Grammar': {

src/components/display/DictionaryDetails/index.jsx

@@ -63,7 +63,12 @@ export class DictionaryDetails extends Component {
         }
 
         case DISPLAY.DETAILS : {
-          displayJSX = <DetailsSection details={ this.props.details } />;
+          displayJSX = (
+            <DetailsSection
+              partsOfSpeech={ this.props.partsOfSpeech }
+              alphabeticalOrder={ this.props.alphabeticalOrder }
+              details={ this.props.details } />
+          );
           break;
         }