Add dictionary settings to EditDictionaryModal and data structure

src/components/MainDisplay.jsx

@@ -56,8 +56,8 @@ export class MainDisplay extends Component {
           <div className='columns'>
             
             <LeftColumn
-              isMobile={ this.state.isMobile }
+              isMobile={ isMobile }
-              displayForm={ this.state.wordFormIsOpen }
+              displayForm={ wordFormIsOpen }
               openWordForm={ this.openWordForm.bind(this) }
               closeWordForm={ this.closeWordForm.bind(this) }
             >
@@ -74,6 +74,7 @@ export class MainDisplay extends Component {
                 description={ dictionaryInfo.description }
                 partsOfSpeech={ dictionaryInfo.partsOfSpeech }
                 details={ dictionaryInfo.details }
+                settings={ dictionaryInfo.settings }
                 alphabeticalOrder={ dictionaryInfo.alphabeticalOrder }
               />
 

src/components/display/DictionaryDetails/index.jsx

@@ -27,6 +27,7 @@ export class DictionaryDetails extends Component {
       partsOfSpeech: PropTypes.array,
       alphabeticalOrder: PropTypes.array,
       details: PropTypes.object,
+      settings: PropTypes.object,
       updater: PropTypes.object,
     }, props, 'prop', 'DictionaryDetails');
 
@@ -103,7 +104,6 @@ export class DictionaryDetails extends Component {
 
   render () {
     const { currentDisplay } = this.state;
-
     return (
       <div className='box'>
 
@@ -121,12 +121,14 @@ export class DictionaryDetails extends Component {
 
               <EditDictionaryModal
                 updater={ this.props.updater }
+                isLoggedIn={ true }
                 name={ this.props.name }
                 specification={ this.props.specification }
                 description={ this.props.description }
                 partsOfSpeech={ this.props.partsOfSpeech }
                 alphabeticalOrder={ this.props.alphabeticalOrder }
                 details={ this.props.details }
+                settings={ this.props.settings }
               />
 
             </div>

src/components/management/EditDictionaryModal/EditSettingsForm.jsx

@@ -0,0 +1,145 @@
+import Inferno from 'inferno';
+import PropTypes from 'prop-types';
+
+import { LargeTextArea } from '../LargeTextArea';
+
+export const EditSettingsForm = (props) => {
+  PropTypes.checkPropTypes({
+    editDictionaryModal: PropTypes.object.isRequired,
+    allowDuplicates: PropTypes.bool.isRequired,
+    caseSensitive: PropTypes.bool.isRequired,
+    sortByDefinition: PropTypes.bool.isRequired,
+    isComplete: PropTypes.bool.isRequired,
+    specification: PropTypes.string.isRequired,
+    isLoggedIn: PropTypes.bool.isRequired,
+    isPublic: PropTypes.bool.isRequired,
+  }, props, 'prop', 'EditSettingsForm');
+
+  const {
+    editDictionaryModal,
+    allowDuplicates,
+    caseSensitive,
+    sortByDefinition,
+    isComplete,
+    specification,
+    isLoggedIn,
+    isPublic,
+  } = props;
+  return (
+    <div className='form'>
+    
+      <div className='field'>
+        <div className='control'>
+          <label className='checkbox'>
+            Allow Duplicate Words
+            { ' ' }
+            <input type='checkbox'
+              defaultChecked={ allowDuplicates }
+              onChange={ (event) => {
+                editDictionaryModal.setState({
+                  allowDuplicates: event.target.checked,
+                  hasChanged: event.target.checked != editDictionaryModal.props.allowDuplicates,
+                });
+              }} />
+          </label>
+          <div className='help'>
+            Checking this box will allow any number of the exact same spelling of a word to be added
+          </div>
+        </div>
+      </div>
+    
+      <div className='field'>
+        <div className='control'>
+          <label className='checkbox'
+            Disabled={ allowDuplicates ? 'disabled' : null }
+            title={ allowDuplicates ? 'Disabled because allowing duplicates makes this unnecessary' : null}>
+            Words are Case-Sensitive
+            { ' ' }
+            <input type='checkbox'
+              defaultChecked={ caseSensitive }
+              disabled={ allowDuplicates }
+              onChange={ (event) => {
+                editDictionaryModal.setState({
+                  caseSensitive: event.target.checked,
+                  hasChanged: event.target.checked != editDictionaryModal.props.caseSensitive,
+                });
+              }} />
+          </label>
+          <div className='help'>
+            Checking this box will allow any words spelled the same but with different capitalization to be added.
+          </div>
+        </div>
+      </div>
+    
+      <div className='field'>
+        <div className='control'>
+          <label className='checkbox'>
+            Sort by Definition
+            { ' ' }
+            <input type='checkbox'
+              defaultChecked={ sortByDefinition }
+              onChange={ (event) => {
+                editDictionaryModal.setState({
+                  sortByDefinition: event.target.checked,
+                  hasChanged: event.target.checked != editDictionaryModal.props.sortByDefinition,
+                });
+              }} />
+          </label>
+          <div className='help'>
+            Checking this box will sort the words in alphabetical order based on the Definition instead of the Word.
+          </div>
+        </div>
+      </div>
+    
+      <div className='field'>
+        <div className='control'>
+          <label className='checkbox'>
+            Mark Complete
+            { ' ' }
+            <input type='checkbox'
+              defaultChecked={ isComplete }
+              onChange={ (event) => {
+                editDictionaryModal.setState({
+                  isComplete: event.target.checked,
+                  hasChanged: event.target.checked != editDictionaryModal.props.isComplete,
+                });
+              }} />
+          </label>
+          <div className='help'>
+            Checking this box will mark your { specification } as "complete", and you will not be able to alter it until this checkbox is unchecked.
+          </div>
+        </div>
+      </div>
+    
+      {isLoggedIn
+        && (
+          <div className='field'>
+            <div className='control'>
+              <label className='checkbox'>
+                Make Public
+                { ' ' }
+                <input type='checkbox'
+                  defaultChecked={ isPublic }
+                  onChange={ (event) => {
+                    editDictionaryModal.setState({
+                      isPublic: event.target.checked,
+                      hasChanged: event.target.checked != editDictionaryModal.props.isPublic,
+                    });
+                  }} />
+              </label>
+              <div className='help'>
+                Checking this box will make your { specification } as public.
+                {
+                  isPublic
+                  ? [<br />, 'Use this link to share it: PUBLIC_LINK']
+                  : ' You will receive a public link that you can share with others.'
+                }
+              </div>
+            </div>
+          </div>
+        )
+      }
+
+    </div>
+  );
+}

src/components/management/EditDictionaryModal/index.jsx

@@ -7,6 +7,7 @@ import { Modal } from '../../structure/Modal';
 
 import { EditDictionaryForm } from './EditDictionaryForm';
 import { EditLinguisticsForm } from './EditLinguisticsForm';
+import { EditSettingsForm } from './EditSettingsForm';
 
 const DISPLAY = {
   DETAILS: 1,
@@ -25,6 +26,8 @@ export class EditDictionaryModal extends Component {
       alphabeticalOrder: PropTypes.array,
       partsOfSpeech: PropTypes.array,
       details: PropTypes.object,
+      settings: PropTypes.object,
+      isLoggedIn: PropTypes.bool,
     }, props, 'prop', 'EditDictionaryModal');
 
     this.state = {
@@ -34,6 +37,7 @@ export class EditDictionaryModal extends Component {
       specification: props.specification,
       description: props.description,
       alphabeticalOrder: props.alphabeticalOrder.join('\n'),
+
       partsOfSpeech: props.partsOfSpeech.join('\n'),
       consonants: props.details.phonology.consonants.join(' '),
       vowels: props.details.phonology.vowels.join(' '),
@@ -44,6 +48,12 @@ export class EditDictionaryModal extends Component {
       exceptions: props.details.phonology.phonotactics.exceptions,
       orthographyNotes: props.details.orthography.notes,
 
+      allowDuplicates: props.settings.allowDuplicates,
+      caseSensitive: props.settings.caseSensitive,
+      sortByDefinition: props.settings.sortByDefinition,
+      isComplete: props.settings.isComplete,
+      isPublic: props.settings.isPublic,
+
       hasChanged: false,
     }
   }
@@ -100,9 +110,16 @@ export class EditDictionaryModal extends Component {
 
       case DISPLAY.SETTINGS : {
         displayJSX = (
-          <div className='content'>
+          <EditSettingsForm
-            <p>Settings!</p>
+            editDictionaryModal={ this }
-          </div>
+            allowDuplicates={ this.state.allowDuplicates }
+            caseSensitive={ this.state.caseSensitive }
+            sortByDefinition={ this.state.sortByDefinition }
+            isComplete={ this.state.isComplete }
+            specification={ this.state.specification }
+            isLoggedIn={ this.props.isLoggedIn }
+            isPublic={ this.state.isPublic }
+          />
         );
         break;
       }
@@ -192,6 +209,26 @@ export class EditDictionaryModal extends Component {
       updatedDetails['orthographyNotes'] = this.state.orthographyNotes;
     }
 
+    if (this.state.allowDuplicates !== this.props.settings.allowDuplicates) {
+      updatedDetails['allowDuplicates'] = this.state.allowDuplicates;
+    }
+
+    if (this.state.caseSensitive !== this.props.settings.caseSensitive) {
+      updatedDetails['caseSensitive'] = this.state.caseSensitive;
+    }
+
+    if (this.state.sortByDefinition !== this.props.settings.sortByDefinition) {
+      updatedDetails['sortByDefinition'] = this.state.sortByDefinition;
+    }
+
+    if (this.state.isComplete !== this.props.settings.isComplete) {
+      updatedDetails['isComplete'] = this.state.isComplete;
+    }
+
+    if (this.state.isPublic !== this.props.settings.isPublic) {
+      updatedDetails['isPublic'] = this.state.isPublic;
+    }
+
     // console.log(updatedDetails);
 
     this.props.updater.updateDictionaryDetails(updatedDetails)

src/index.jsx

@@ -28,6 +28,7 @@ class App extends Component {
       description: dictionary.description,
       partsOfSpeech: dictionary.partsOfSpeech,
       details: dictionary.details,
+      settings: dictionary.settings,
       alphabeticalOrder: dictionary.alphabeticalOrder,
 
       displayedWords: [],
@@ -46,6 +47,7 @@ class App extends Component {
       description,
       partsOfSpeech,
       details,
+      settings,
       alphabeticalOrder,
     } = this.state;
 
@@ -55,6 +57,7 @@ class App extends Component {
       description,
       partsOfSpeech,
       details,
+      settings,
       alphabeticalOrder,
     };
   }

src/managers/DictionaryData.js

@@ -258,7 +258,7 @@ class DictionaryData {
   }
 
   set allowDuplicates (value) {
-    assert(typeof value === 'bool', 'allowDuplicates must be passed as a boolean.');
+    assert(typeof value === 'boolean', 'allowDuplicates must be passed as a boolean.');
     const updatedValues = store.get('Lexiconga');
     updatedValues.settings.allowDuplicates = value;
     return store.set('Lexiconga', updatedValues);
@@ -270,7 +270,7 @@ class DictionaryData {
   }
 
   set caseSensitive (value) {
-    assert(typeof value === 'bool', 'caseSensitive must be passed as a boolean.');
+    assert(typeof value === 'boolean', 'caseSensitive must be passed as a boolean.');
     const updatedValues = store.get('Lexiconga');
     updatedValues.settings.caseSensitive = value;
     return store.set('Lexiconga', updatedValues);
@@ -282,7 +282,7 @@ class DictionaryData {
   }
 
   set sortByDefinition (value) {
-    assert(typeof value === 'bool', 'sortByDefinition must be passed as a boolean.');
+    assert(typeof value === 'boolean', 'sortByDefinition must be passed as a boolean.');
     const updatedValues = store.get('Lexiconga');
     updatedValues.settings.sortByDefinition = value;
     return store.set('Lexiconga', updatedValues);
@@ -294,7 +294,7 @@ class DictionaryData {
   }
 
   set isComplete (value) {
-    assert(typeof value === 'bool', 'isComplete must be passed as a boolean.');
+    assert(typeof value === 'boolean', 'isComplete must be passed as a boolean.');
     const updatedValues = store.get('Lexiconga');
     updatedValues.settings.isComplete = value;
     return store.set('Lexiconga', updatedValues);
@@ -306,7 +306,7 @@ class DictionaryData {
   }
 
   set isPublic (value) {
-    assert(typeof value === 'bool', 'isPublic must be passed as a boolean.');
+    assert(typeof value === 'boolean', 'isPublic must be passed as a boolean.');
     const updatedValues = store.get('Lexiconga');
     updatedValues.settings.isPublic = value;
     return store.set('Lexiconga', updatedValues);

src/managers/Updater.js

@@ -34,19 +34,30 @@ export class Updater {
         'exceptions',
         'orthographyNotes',
       ];
+      const settingKeys = [
+        'allowDuplicates',
+        'caseSensitive',
+        'sortByDefinition',
+        'isComplete',
+        'isPublic',
+      ];
 
       for (const key in dictionaryDetails) {
         this.dictionary[key] = dictionaryDetails[key];
 
-        if (!detailKeys.includes(key)) {
+        if (!detailKeys.includes(key) && !settingKeys.includes(key)) {
           updatedDetails[key] = dictionaryDetails[key];
         }
       }
 
-      if (Object.keys(dictionaryDetails).some(key => { return detailKeys.includes(key) })) {
+      if (Object.keys(dictionaryDetails).some(key => detailKeys.includes(key))) {
         updatedDetails['details'] = this.dictionary.details;
       }
 
+      if (Object.keys(dictionaryDetails).some(key => settingKeys.includes(key))) {
+        updatedDetails['settings'] = this.dictionary.settings;
+      }
+
       console.log(updatedDetails);
 
       if (updatedDetails.isEmpty()) {