Improve pagination for search results

src/components/MainDisplay.jsx

@@ -18,6 +18,7 @@ export class MainDisplay extends Component {
       dictionaryInfo: PropTypes.object.isRequired,
       wordsToDisplay: PropTypes.array.isRequired,
       wordsAreFiltered: PropTypes.bool,
+      wordsInCurrentList: PropTypes.number,
       currentPage: PropTypes.number,
       itemsPerPage: PropTypes.number,
       stats: PropTypes.object.isRequired,
@@ -57,6 +58,7 @@ export class MainDisplay extends Component {
       dictionaryInfo,
       wordsToDisplay,
       wordsAreFiltered,
+      wordsInCurrentList,
       currentPage,
       itemsPerPage,
       stats,
@@ -105,6 +107,14 @@ export class MainDisplay extends Component {
                   </div>
                 )}
 
+              <Pagination
+                currentPage={ currentPage }
+                itemsPerPage={ itemsPerPage }
+                stats={ stats }
+                setPage={ setPage }
+                wordsInCurrentList={ wordsInCurrentList }
+                isTop />
+
               <WordsList
                 words={ wordsToDisplay }
                 adsEveryXWords={ 10 }
@@ -114,7 +124,8 @@ export class MainDisplay extends Component {
                 currentPage={currentPage}
                 itemsPerPage={itemsPerPage}
                 stats={stats}
-                setPage={ setPage } />
+                setPage={setPage}
+                wordsInCurrentList={wordsInCurrentList} />
             </RightColumn>
             
           </div>

src/components/structure/Pagination/index.jsx

@@ -1,24 +1,25 @@
 import Inferno from 'inferno';
 import PropTypes from 'prop-types';
 
+import './styles.scss';
+
 export const Pagination = (props) => {
   PropTypes.checkPropTypes({
     currentPage: PropTypes.number.isRequired,
     itemsPerPage: PropTypes.number.isRequired,
     stats: PropTypes.object.isRequired,
     setPage: PropTypes.func.isRequired,
+    wordsInCurrentList: PropTypes.number,
+    isTop: PropTypes.bool,
   }, props, 'prop', 'Pagination');
 
-  const { currentPage, itemsPerPage, stats, setPage } = props;
-
-  const totalWords = stats.hasOwnProperty('numberOfWords')
-    ? stats.numberOfWords.find(group => group.name === 'Total').value : null;
+  const { currentPage, itemsPerPage, stats, setPage, wordsInCurrentList, isTop } = props;
   
-  if (totalWords === null) {
+  if (wordsInCurrentList === null) {
     return <div className="loader"></div>;
   }
 
-  const lastPage = Math.floor(totalWords / itemsPerPage);
+  const lastPage = Math.floor(wordsInCurrentList / itemsPerPage);
   const nextPage = currentPage + 1 > lastPage ? lastPage : currentPage + 1;
   const prevPage = currentPage - 1 < 0 ? 0 : currentPage - 1;
 
@@ -29,7 +30,7 @@ export const Pagination = (props) => {
   }
 
   return (
-    <nav className="pagination is-centered" role="navigation" aria-label="pagination">
+    <nav className={`pagination is-centered ${isTop ? 'is-top' : ''}`} role="navigation" aria-label="pagination">
       <a className="pagination-previous" aria-label="Goto page 1"
         Disabled={currentPage === 0 ? 'disabled' : null}
         onClick={() => changePage(prevPage)}>

src/components/structure/Pagination/styles.scss

@@ -0,0 +1,3 @@
+.pagination.is-top {
+  margin-bottom: 15px;
+}

src/index.jsx

@@ -46,6 +46,7 @@ class App extends Component {
         ignoreDiacritics: false,
         filteredPartsOfSpeech: [...dictionary.partsOfSpeech, 'Uncategorized'],
       },
+      wordsInCurrentList: null,
     }
 
     this.updater = new Updater(this, dictionary);
@@ -98,7 +99,7 @@ class App extends Component {
       const partsOfSpeechForFilter = [...partsOfSpeech, 'Uncategorized'];
       const pageStart = currentPage * itemsPerPage;
       const pageEnd = pageStart + itemsPerPage;
-      let displayedWords;
+      let displayedWords = words;
       if (this.isUsingFilter) {
         const {
           searchingIn,
@@ -109,10 +110,7 @@ class App extends Component {
           filteredPartsOfSpeech
         } = searchConfig;
 
-        displayedWords = words.filter((word, index) => {
-          if (index < pageStart || index >= pageEnd) {
-            return false;
-          }
+        displayedWords = displayedWords.filter((word, index) => {
           const wordPartOfSpeech = word.partOfSpeech === '' ? 'Uncategorized' : word.partOfSpeech;
           if (!filteredPartsOfSpeech.includes(wordPartOfSpeech)) {
             return false;
@@ -168,18 +166,21 @@ class App extends Component {
             }
           }
         });
-      } else {
-        displayedWords = words.filter((word, index) => {
-          if (index < pageStart || index >= pageEnd) {
-            return false;
-          }
-          return true;
-        });
       }
 
+      const wordsInCurrentList = displayedWords.length;
+
+      displayedWords = displayedWords.filter((word, index) => {
+        if (index < pageStart || index >= pageEnd) {
+          return false;
+        }
+        return true;
+      });
+
       this.setState({
         displayedWords,
         stats: getWordsStats(words, partsOfSpeech, this.state.settings.caseSensitive),
+        wordsInCurrentList,
       }, () => callback());
     });
   }
@@ -209,6 +210,7 @@ class App extends Component {
           dictionaryInfo={ this.dictionaryInfo }
           wordsToDisplay={ this.state.displayedWords }
           wordsAreFiltered={ this.isUsingFilter }
+          wordsInCurrentList={ this.state.wordsInCurrentList }
           currentPage={ this.state.currentPage }
           itemsPerPage={ this.state.itemsPerPage }
           stats={ this.state.stats }