Merge pull request #167 from nqviet/issue_75

issue #75

Author: LieutenantRoger

src/components/Pagination/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import PT from "prop-types";
 import Dropdown from "../Dropdown";
 import {
@@ -12,6 +12,20 @@ import "./styles.scss";
 
 const N = PAGINATION_MAX_PAGE_DISPLAY;
 
+const createDisplayPages = (p, n) => {
+  const pages = [];
+  for (
+    let start = utils.clamp(p - N, 0, n),
+      end = utils.clamp(p + N, 0, n),
+      i = start;
+    i < end;
+    i += 1
+  ) {
+    pages.push(i);
+  }
+  return pages.slice(-N);
+};
+
 /**
  * Pagination with the first page index being as 0 and the last page index being as `total - 1`
  */
@@ -20,24 +34,6 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
   const perPageOptions = utils.createDropdownOptions(PAGINATION_PER_PAGES);
   utils.setSelectedDropdownOption(perPageOptions, `${pageSize}`);
 
-  const createDisplayPages = (p, n) => {
-    const pages = [];
-    for (
-      let start = utils.clamp(p - N, 0, n),
-        end = utils.clamp(p + N, 0, n),
-        i = start;
-      i < end;
-      i += 1
-    ) {
-      pages.push(i);
-    }
-    return pages.slice(-N);
-  };
-
-  const [displayPages, setDisplayPages] = useState(
-    createDisplayPages(pageIndex, total)
-  );
-
   const onChangePageSize = (options) => {
     const selectedOption = utils.getSelectedDropdownOption(options);
     const newPageSize = +selectedOption.label;
@@ -59,33 +55,40 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
     }
   };
 
-  const latestPropsRef = useRef(null);
-  latestPropsRef.current = { displayPages, pageIndex };
-
-  useEffect(() => {
-    const newTotal = Math.ceil(length / pageSize);
-    const _pageIndex = latestPropsRef.current.pageIndex;
-    setDisplayPages(createDisplayPages(_pageIndex, newTotal));
-  }, [length, pageSize]);
+  const previousPropsRef = useRef();
+  const [displayPages, setDisplayPages] = useState([]);
 
   useEffect(() => {
-    const _displayPages = latestPropsRef.current.displayPages;
-    const start = _displayPages[0];
-    const end = _displayPages[_displayPages.length - 1];
-
-    const updateDisplayPages = [];
-    if (pageIndex < start) {
-      for (let i = pageIndex; i < pageIndex + N; i += 1) {
-        updateDisplayPages.push(i);
+      let _displayPages = displayPages;
+
+      if (!previousPropsRef.current
+        || previousPropsRef.current.length !== length
+        || previousPropsRef.current.pageSize !== pageSize) {
+        const newTotal = Math.ceil(length / pageSize);
+        _displayPages = createDisplayPages(pageIndex, newTotal);
+        setDisplayPages(_displayPages)
       }
-      setDisplayPages(updateDisplayPages);
-    } else if (pageIndex > end) {
-      for (let i = pageIndex; i > pageIndex - N; i -= 1) {
-        updateDisplayPages.unshift(i);
+
+      if (!previousPropsRef.current || previousPropsRef.current.pageIndex !== pageIndex) {
+        const start = _displayPages[0];
+        const end = _displayPages[_displayPages.length - 1];
+
+        const updateDisplayPages = [];
+        if (pageIndex < start) {
+          for (let i = pageIndex; i < pageIndex + N; i += 1) {
+            updateDisplayPages.push(i);
+          }
+          setDisplayPages(updateDisplayPages);
+        } else if (pageIndex > end) {
+          for (let i = pageIndex; i > pageIndex - N; i -= 1) {
+            updateDisplayPages.unshift(i);
+          }
+          setDisplayPages(updateDisplayPages);
+        }
       }
-      setDisplayPages(updateDisplayPages);
-    }
-  }, [pageIndex]);
+
+      previousPropsRef.current = { length, pageSize, pageIndex };
+  }, [length, pageSize, pageIndex, displayPages, setDisplayPages]);
 
   const formatPage = (p) => `${p + 1}`;