Merge pull request #1022 from yaacov/pagination-memo

🐞 Remember pagination when data change

packages/common/src/components/Page/usePagination.tsx

@@ -2,50 +2,32 @@ import { useMemo, useState } from 'react';
 
 import { PaginationSettings } from './types';
 
-// counting from one seems recommended - zero breaks some cases
-const DEFAULT_FIRST_PAGE = 1;
 // first option in the default "per page" dropdown
 export const DEFAULT_PER_PAGE = 10;
 
-export interface PaginationHookProps<T> {
-  pagination?: number | 'on' | 'off';
-  filteredData: T[];
-  flattenData: T[];
+export interface PaginationHookProps {
+  filteredDataLength: number;
   userSettings?: PaginationSettings;
 }
 
-export interface PaginationHookResult<T> {
-  pageData: T[];
-  showPagination: boolean;
+export interface PaginationHookResult {
   itemsPerPage: number;
-  currentPage: number;
-  setPage: (page: number) => void;
+  lastPage: number;
   setPerPage: (perPage: number) => void;
 }
 
-export function usePagination<T>({
-  pagination,
-  filteredData,
-  flattenData,
+export function usePagination({
+  filteredDataLength,
   userSettings,
-}: PaginationHookProps<T>): PaginationHookResult<T> {
+}: PaginationHookProps): PaginationHookResult {
   const {
     perPage: defaultPerPage = DEFAULT_PER_PAGE,
     save: savePerPage = () => undefined,
     clear: clearSavedPerPage = () => undefined,
   } = userSettings || {};
   const [perPage, setPerPage] = useState(defaultPerPage);
-  const [page, setPage] = useState(DEFAULT_FIRST_PAGE);
 
-  const lastPage = Math.ceil(filteredData.length / perPage);
-  const effectivePage = Math.max(DEFAULT_FIRST_PAGE, Math.min(page, lastPage));
-  const showPagination =
-    pagination === 'on' || (typeof pagination === 'number' && flattenData.length > pagination);
-
-  const pageData = useMemo(
-    () => filteredData.slice((effectivePage - 1) * perPage, effectivePage * perPage),
-    [filteredData, effectivePage, perPage],
-  );
+  const lastPage = Math.ceil(filteredDataLength / perPage);
 
   const setPerPageInStateAndSettings = useMemo(
     () => (perPage: number) => {
@@ -60,11 +42,8 @@ export function usePagination<T>({
   );
 
   return {
-    pageData,
-    showPagination,
     itemsPerPage: perPage,
-    currentPage: effectivePage,
-    setPage,
+    lastPage,
     setPerPage: setPerPageInStateAndSettings,
   };
 }

packages/forklift-console-plugin/src/components/page/StandardPage.tsx

@@ -171,6 +171,18 @@ export interface StandardPageProps<T> {
    */
   pagination?: number | 'on' | 'off';
 
+  /**
+   * page number
+   */
+  page: number;
+
+  /**
+   * Update page number
+   *
+   * @param number Update page
+   */
+  setPage: (number) => void;
+
   /**
    * Prefix for filters stored in the query params part of the URL.
    * By default no prefix is used - the field ID is used directly.
@@ -258,6 +270,8 @@ export interface StandardPageProps<T> {
  *   dataSource={[myData, false, null]}
  *   title="My List"
  *   fieldsMetadata={myFieldsMetadata}
+ *   page={page}
+ *   setPage={setPage}
  *   // ...other props
  * />
  */
@@ -273,6 +287,8 @@ export function StandardPage<T>({
   customNoResultsFound,
   customNoResultsMatchFilter,
   pagination = DEFAULT_PER_PAGE,
+  page,
+  setPage,
   userSettings,
   filterPrefix = '',
   extraSupportedMatchers,
@@ -310,13 +326,20 @@ export function StandardPage<T>({
     [flatData, selectedFilters, fields, compareFn],
   );
 
-  const { pageData, showPagination, itemsPerPage, currentPage, setPage, setPerPage } =
-    usePagination({
-      pagination,
-      filteredData,
-      flattenData: flatData,
-      userSettings: userSettings?.pagination,
-    });
+  const showPagination =
+    pagination === 'on' || (typeof pagination === 'number' && flatData.length > pagination);
+
+  const { itemsPerPage, lastPage, setPerPage } = usePagination({
+    filteredDataLength: filteredData.length,
+    userSettings: userSettings?.pagination,
+  });
+
+  const currentPage = Math.min(page, lastPage);
+
+  const pageData = useMemo(
+    () => filteredData.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage),
+    [filteredData, currentPage, itemsPerPage],
+  );
 
   const errorFetchingData = loaded && error;
   const noResults = loaded && !error && flatData.length == 0;