Add logic for sorting words by definition if setting is chosen

src/components/MainDisplay.jsx

@@ -78,6 +78,7 @@ export class MainDisplay extends Component {
                 details={ dictionaryInfo.details }
                 settings={ dictionaryInfo.settings }
                 alphabeticalOrder={ dictionaryInfo.alphabeticalOrder }
+                updateDisplay={ updateDisplay }
               />
 
               <WordsList

src/components/display/DictionaryDetails/index.jsx

@@ -29,6 +29,7 @@ export class DictionaryDetails extends Component {
       details: PropTypes.object,
       settings: PropTypes.object,
       updater: PropTypes.object,
+      updateDisplay: PropTypes.func,
     }, props, 'prop', 'DictionaryDetails');
 
     this.state = {
@@ -129,6 +130,7 @@ export class DictionaryDetails extends Component {
                 alphabeticalOrder={ this.props.alphabeticalOrder }
                 details={ this.props.details }
                 settings={ this.props.settings }
+                updateDisplay={ this.props.updateDisplay }
               />
 
             </div>

src/components/management/EditDictionaryModal/index.jsx

@@ -28,6 +28,7 @@ export class EditDictionaryModal extends Component {
       details: PropTypes.object,
       settings: PropTypes.object,
       isLoggedIn: PropTypes.bool,
+      updateDisplay: PropTypes.func,
     }, props, 'prop', 'EditDictionaryModal');
 
     this.state = {
@@ -233,7 +234,12 @@ export class EditDictionaryModal extends Component {
 
     this.props.updater.updateDictionaryDetails(updatedDetails)
       .then(() => {
-        this.setState({ hasChanged: false });
+        this.setState({ hasChanged: false }, () => {
+          // If setting that alters word display is changed, update the display.
+          if (updatedDetails.hasOwnProperty('sortByDefinition')) {
+            this.props.updateDisplay();
+          }
+        });
       })
       .catch(errorMessage => {
         console.error(errorMessage);
@@ -289,7 +295,7 @@ export class EditDictionaryModal extends Component {
             <div className='columns'>
 
               <div className='column has-text-centered'>
-                { specification } marked complete<br />
+                { specification } marked complete&mdash;editing has been disabled.<br />
                 <a className='button is-warning is-small'
                   onClick={() => {
                     this.setState({ isComplete: false, currentDisplay: DISPLAY.SETTINGS }, () => {

src/managers/DictionaryData.js

@@ -313,6 +313,9 @@ class DictionaryData {
   }
 
   get wordsPromise () {
+    if (this.sortByDefinition) {
+      return wordDb.words.toCollection().sortBy('definition');
+    }
     return wordDb.words.toArray();
   }