Add pagination to hopefully quell fears of storing too much in memory.

src/components/MainDisplay.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 
 import { LeftColumn } from './structure/LeftColumn';
 import { RightColumn } from './structure/RightColumn';
+import { Pagination } from './structure/Pagination';
 
 import { WordForm } from './management/WordForm';
 import { DictionaryDetails } from './display/DictionaryDetails';
@@ -17,6 +18,10 @@ export class MainDisplay extends Component {
       dictionaryInfo: PropTypes.object.isRequired,
       wordsToDisplay: PropTypes.array.isRequired,
       wordsAreFiltered: PropTypes.bool,
+      currentPage: PropTypes.number,
+      itemsPerPage: PropTypes.number,
+      stats: PropTypes.object.isRequired,
+      setPage: PropTypes.func.isRequired,
       updateDisplay: PropTypes.func.isRequired,
       updater: PropTypes.object.isRequired,
     }, props, 'prop', 'MainDisplay');
@@ -52,6 +57,10 @@ export class MainDisplay extends Component {
       dictionaryInfo,
       wordsToDisplay,
       wordsAreFiltered,
+      currentPage,
+      itemsPerPage,
+      stats,
+      setPage,
       updateDisplay,
       updater,
     } = this.props;
@@ -100,6 +109,13 @@ export class MainDisplay extends Component {
                 words={ wordsToDisplay }
                 adsEveryXWords={ 10 }
                 updateDisplay={ updateDisplay } />
+              
+              <Pagination
+                currentPage={currentPage}
+                itemsPerPage={itemsPerPage}
+                totalWords={stats.hasOwnProperty('numberOfWords')
+                  ? stats.numberOfWords.find(group => group.name === 'Total').value : null}
+                setPage={ setPage } />
             </RightColumn>
             
           </div>

src/components/structure/Pagination.jsx

@@ -0,0 +1,51 @@
+import Inferno from 'inferno';
+import PropTypes from 'prop-types';
+
+export const Pagination = (props) => {
+  PropTypes.checkPropTypes({
+    currentPage: PropTypes.number.isRequired,
+    itemsPerPage: PropTypes.number.isRequired,
+    totalWords: PropTypes.number,
+    setPage: PropTypes.func.isRequired,
+  }, props, 'prop', 'Pagination');
+
+  const { currentPage, itemsPerPage, totalWords, setPage } = props;
+
+  if (totalWords === null) {
+    return <div className="loader"></div>;
+  }
+
+  const lastPage = Math.floor(totalWords / itemsPerPage);
+  const nextPage = currentPage + 1 > lastPage ? lastPage : currentPage + 1;
+  const prevPage = currentPage - 1 < 0 ? 0 : currentPage - 1;
+
+  const changePage = (page) => {
+    if (page !== currentPage && page <= lastPage && page >= 0) {
+      setPage(page);
+    }
+  }
+
+  return (
+    <nav className="pagination is-centered" role="navigation" aria-label="pagination">
+      <a className="pagination-previous" aria-label="Goto page 1"
+        Disabled={currentPage === 0 ? 'disabled' : null}
+        onClick={() => changePage(prevPage)}>
+        Previous
+      </a>
+      <a className="pagination-next" aria-label={`Goto page ${lastPage + 1}`}
+        Disabled={currentPage === lastPage ? 'disabled' : null}
+        onClick={() => changePage(nextPage)}>
+        Next
+      </a>
+      <div className="pagination-list">
+        <div class="select">
+          <select value={currentPage} onChange={(event) => changePage(parseInt(event.target.value))}>
+            {[...new Array(lastPage + 1)].map((v, index) => {
+              return <option value={index}>{index + 1}</option>;
+            })}
+          </select>
+        </div>
+      </div>
+    </nav>
+  );
+}

src/index.jsx

@@ -36,6 +36,8 @@ class App extends Component {
       alphabeticalOrder: dictionary.alphabeticalOrder,
 
       displayedWords: [],
+      currentPage: 0,
+      itemsPerPage: 30,
       searchConfig: {
         searchingIn: 'name',
         searchMethod: SEARCH_METHOD.contains,
@@ -90,9 +92,12 @@ class App extends Component {
   }
 
   updateDisplayedWords (callback = () => {}) {
+    const {currentPage, itemsPerPage} = this.state;
     dictionary.wordsPromise.then(words => {
-      const { searchConfig, partsOfSpeech } = this.state;
+      const { searchConfig, partsOfSpeech, currentPage, itemsPerPage } = this.state;
       const partsOfSpeechForFilter = [...partsOfSpeech, 'Uncategorized'];
+      const pageStart = currentPage * itemsPerPage;
+      const pageEnd = pageStart + itemsPerPage;
       let displayedWords;
       if (this.isUsingFilter) {
         const {
@@ -104,7 +109,10 @@ class App extends Component {
           filteredPartsOfSpeech
         } = searchConfig;
 
-        displayedWords = words.filter((word) => {
+        displayedWords = words.filter((word, index) => {
+          if (index < pageStart || index >= pageEnd) {
+            return false;
+          }
           const wordPartOfSpeech = word.partOfSpeech === '' ? 'Uncategorized' : word.partOfSpeech;
           if (!filteredPartsOfSpeech.includes(wordPartOfSpeech)) {
             return false;
@@ -161,7 +169,12 @@ class App extends Component {
           }
         });
       } else {
-       displayedWords = words;
+        displayedWords = words.filter((word, index) => {
+          if (index < pageStart || index >= pageEnd) {
+            return false;
+          }
+          return true;
+        });
       }
 
       this.setState({
@@ -177,6 +190,12 @@ class App extends Component {
     }, () => this.updateDisplayedWords());
   }
 
+  setPage (newPage) {
+    this.setState({
+      currentPage: newPage,
+    }, () => this.updateDisplayedWords());
+  }
+
   render () {
     return (
       <div>
@@ -190,6 +209,10 @@ class App extends Component {
           dictionaryInfo={ this.dictionaryInfo }
           wordsToDisplay={ this.state.displayedWords }
           wordsAreFiltered={ this.isUsingFilter }
+          currentPage={ this.state.currentPage }
+          itemsPerPage={ this.state.itemsPerPage }
+          stats={ this.state.stats }
+          setPage={ this.setPage.bind(this) }
           updateDisplay={ this.updateDisplayedWords.bind(this) }
           updater={ this.updater }
         />