Add a notification for when a search filter is being used

src/components/MainDisplay.jsx

@@ -16,6 +16,7 @@ export class MainDisplay extends Component {
     PropTypes.checkPropTypes({
       dictionaryInfo: PropTypes.object.isRequired,
       wordsToDisplay: PropTypes.array.isRequired,
+      wordsAreFiltered: PropTypes.bool,
       updateDisplay: PropTypes.func.isRequired,
       updater: PropTypes.object.isRequired,
     }, props, 'prop', 'MainDisplay');
@@ -47,7 +48,13 @@ export class MainDisplay extends Component {
   }
 
   render () {
-    const { dictionaryInfo, wordsToDisplay, updateDisplay, updater } = this.props;
+    const {
+      dictionaryInfo,
+      wordsToDisplay,
+      wordsAreFiltered,
+      updateDisplay,
+      updater,
+    } = this.props;
     const { isMobile, wordFormIsOpen } = this.state;
     const wordFormIsDisabled = dictionaryInfo.settings.isComplete;
 
@@ -82,6 +89,13 @@ export class MainDisplay extends Component {
                 updateDisplay={ updateDisplay }
               />
 
+              {wordsAreFiltered
+                && (
+                  <div className='notification'>
+                    Words are filtered&mdash;displaying {wordsToDisplay.length} word{wordsToDisplay.length !== 1 && 's'}
+                  </div>
+                )}
+
               <WordsList
                 words={ wordsToDisplay }
                 adsEveryXWords={ 10 }

src/index.jsx

@@ -74,6 +74,12 @@ class App extends Component {
     };
   }
 
+  get isUsingFilter () {
+    const partsOfSpeechForFilter = [...this.state.partsOfSpeech, 'Uncategorized'];
+    return this.state.searchConfig.searchTerm !== ''
+        || partsOfSpeechForFilter.length !== this.state.searchConfig.filteredPartsOfSpeech.length;
+  }
+
   updatePartsOfSpeech () {
     this.setState({
       partsOfSpeech: dictionary.partsOfSpeech,
@@ -85,8 +91,7 @@ class App extends Component {
       const { searchConfig, partsOfSpeech } = this.state;
       const partsOfSpeechForFilter = [...partsOfSpeech, 'Uncategorized'];
       let displayedWords;
-      if (searchConfig.searchTerm !== ''
-        || partsOfSpeechForFilter.length !== searchConfig.filteredPartsOfSpeech.length) {
+      if (this.isUsingFilter) {
         const {
           searchingIn,
           searchTerm,
@@ -95,7 +100,7 @@ class App extends Component {
           ignoreDiacritics,
           filteredPartsOfSpeech
         } = searchConfig;
-        
+
         displayedWords = words.filter((word) => {
           const wordPartOfSpeech = word.partOfSpeech === '' ? 'Uncategorized' : word.partOfSpeech;
           if (!filteredPartsOfSpeech.includes(wordPartOfSpeech)) {
@@ -180,6 +185,7 @@ class App extends Component {
         <MainDisplay
           dictionaryInfo={ this.dictionaryInfo }
           wordsToDisplay={ this.state.displayedWords }
+          wordsAreFiltered={ this.isUsingFilter }
           updateDisplay={ this.updateDisplayedWords.bind(this) }
           updater={ this.updater }
         />