From a05fd9c48d70b5425c668bfe4102cd030931a066 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Fri, 22 Dec 2017 08:56:21 -0700
Subject: [PATCH] Add Grammar notes editing and display

---
 .../DetailsSection/GrammarDisplay.jsx         | 29 +++++++++++++++++++
 .../DetailsSection/index.jsx                  |  5 +++-
 .../EditLinguisticsForm.jsx                   | 28 ++++++++++++++++++
 .../management/EditDictionaryModal/index.jsx  |  6 ++++
 src/managers/DictionaryData.js                | 26 ++++++++++++-----
 src/managers/Updater.js                       |  1 +
 6 files changed, 87 insertions(+), 8 deletions(-)
 create mode 100644 src/components/display/DictionaryDetails/DetailsSection/GrammarDisplay.jsx

diff --git a/src/components/display/DictionaryDetails/DetailsSection/GrammarDisplay.jsx b/src/components/display/DictionaryDetails/DetailsSection/GrammarDisplay.jsx
new file mode 100644
index 0000000..c60b628
--- /dev/null
+++ b/src/components/display/DictionaryDetails/DetailsSection/GrammarDisplay.jsx
@@ -0,0 +1,29 @@
+import Inferno from 'inferno';
+import PropTypes from 'prop-types';
+import marked from 'marked';
+import sanitizeHtml from 'sanitize-html';
+
+export const GrammarDisplay = (props) => {
+  PropTypes.checkPropTypes({
+    grammarContent: PropTypes.object.isRequired,
+  }, props, 'prop', 'GrammarDisplay');
+
+  const { grammarContent } = props
+  return (
+    <div>
+      <div className='columns'>
+
+        <div className='column'>
+          <strong>Notes:</strong>
+          <div className='content'>
+            <div dangerouslySetInnerHTML={{
+              __html: marked(sanitizeHtml(grammarContent.notes, { allowedTags: [], allowedAttributes: [], })),
+            }} />
+          </div>
+        </div>
+
+      </div>
+
+    </div>
+  );
+}
diff --git a/src/components/display/DictionaryDetails/DetailsSection/index.jsx b/src/components/display/DictionaryDetails/DetailsSection/index.jsx
index ac29eb7..03cfa7a 100644
--- a/src/components/display/DictionaryDetails/DetailsSection/index.jsx
+++ b/src/components/display/DictionaryDetails/DetailsSection/index.jsx
@@ -128,7 +128,10 @@ export class DetailsSection extends Component {
           break;
         }
         case 'Grammar': {
-          detailsDisplay = 'Grammar content!';
+          detailsDisplay = (
+            <GrammarDisplay
+              grammarContent={ details.grammar } />
+          );
           break;
         }
       }
diff --git a/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx b/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx
index 326e20d..8108ba0 100644
--- a/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx
+++ b/src/components/management/EditDictionaryModal/EditLinguisticsForm.jsx
@@ -16,6 +16,7 @@ export const EditLinguisticsForm = (props) => {
     coda: PropTypes.string.isRequired,
     exceptions: PropTypes.string.isRequired,
     orthographyNotes: PropTypes.string.isRequired,
+    grammarNotes: PropTypes.string.isRequired,
   }, props, 'prop', 'EditLinguisticsForm');
 
   const {
@@ -29,6 +30,7 @@ export const EditLinguisticsForm = (props) => {
     coda,
     exceptions,
     orthographyNotes,
+    grammarNotes,
   } = props;
   return (
     <div className='form'>
@@ -228,6 +230,32 @@ export const EditLinguisticsForm = (props) => {
 
         </div>
       </div>
+      
+      <h4 className='title as-4'>
+        Grammar
+      </h4>
+
+      <div className='columns'>
+        <div className='column'>
+
+          <LargeTextArea
+            label='Grammar Notes'
+            helpText={[
+              'Any explanation of grammar, ',
+              <a href={ MARKDOWN_LINK } target='_blank'>Markdown</a>,
+              ' enabled',
+            ]}
+            placeholder={ `- Word order is VSO\n- There is no definite article\n...` }
+            value={ grammarNotes }
+            onInput={ (event) => {
+              editDictionaryModal.setState({
+                grammarNotes: event.target.value,
+                hasChanged: event.target.value != editDictionaryModal.props.details.grammar.notes,
+              });
+            }} />
+
+        </div>
+      </div>
 
     </div>
   );
diff --git a/src/components/management/EditDictionaryModal/index.jsx b/src/components/management/EditDictionaryModal/index.jsx
index cfcce99..a3bf559 100644
--- a/src/components/management/EditDictionaryModal/index.jsx
+++ b/src/components/management/EditDictionaryModal/index.jsx
@@ -48,6 +48,7 @@ export class EditDictionaryModal extends Component {
       coda: props.details.phonology.phonotactics.coda.join('\n'),
       exceptions: props.details.phonology.phonotactics.exceptions,
       orthographyNotes: props.details.orthography.notes,
+      grammarNotes: props.details.grammar.notes,
 
       allowDuplicates: props.settings.allowDuplicates,
       caseSensitive: props.settings.caseSensitive,
@@ -104,6 +105,7 @@ export class EditDictionaryModal extends Component {
             coda={ this.state.coda }
             exceptions={ this.state.exceptions }
             orthographyNotes={ this.state.orthographyNotes }
+            grammarNotes={ this.state.grammarNotes }
           />
         );
         break;
@@ -210,6 +212,10 @@ export class EditDictionaryModal extends Component {
       updatedDetails['orthographyNotes'] = this.state.orthographyNotes;
     }
 
+    if (this.state.grammarNotes !== this.props.details.grammar.notes) {
+      updatedDetails['grammarNotes'] = this.state.grammarNotes;
+    }
+
     if (this.state.allowDuplicates !== this.props.settings.allowDuplicates) {
       updatedDetails['allowDuplicates'] = this.state.allowDuplicates;
     }
diff --git a/src/managers/DictionaryData.js b/src/managers/DictionaryData.js
index 9678302..9a452be 100644
--- a/src/managers/DictionaryData.js
+++ b/src/managers/DictionaryData.js
@@ -25,14 +25,14 @@ const defaultDictionary = {
       notes: '',
     },
     grammar: {
-      content: '',
+      notes: '',
     },
-    custom: [
-      {
-        name: 'Example Tab',
-        content: `This is an _example_ tab to show how **tabs** work with [Markdown](${ MARKDOWN_LINK })!`,
-      }
-    ],
+    // custom: [
+    //   // {
+    //   //   name: 'Example Tab',
+    //   //   content: `This is an _example_ tab to show how **tabs** work with [Markdown](${ MARKDOWN_LINK })!`,
+    //   // }
+    // ],
   },
   settings: {
     allowDuplicates: false,
@@ -233,6 +233,18 @@ class DictionaryData {
     return store.set('Lexiconga', updatedValues);
   }
 
+  get grammarNotes () {
+    return store.get('Lexiconga').details.grammar.notes
+      || defaultDictionary.details.grammar.notes;
+  }
+
+  set grammarNotes (value) {
+    assert(typeof value === 'string', 'Grammar Notes must be passed as a string.');
+    const updatedValues = store.get('Lexiconga');
+    updatedValues.details.grammar.notes = value.trim();
+    return store.set('Lexiconga', updatedValues);
+  }
+
   get alphabeticalOrder () {
     return store.get('Lexiconga').alphabeticalOrder
       || defaultDictionary.alphabeticalOrder;
diff --git a/src/managers/Updater.js b/src/managers/Updater.js
index 351a105..a316e2f 100644
--- a/src/managers/Updater.js
+++ b/src/managers/Updater.js
@@ -33,6 +33,7 @@ export class Updater {
         'coda',
         'exceptions',
         'orthographyNotes',
+        'grammarNotes',
       ];
       const settingKeys = [
         'allowDuplicates',