@patternfly/react-data-view 6.1.0-prerelease.1 → 7.0.0-prerelease.1

package/src/Hooks/pagination.test.tsx

@@ -49,9 +49,89 @@ describe('useDataViewPagination', () => {
     expect(result.current).toEqual({ 
       onPerPageSelect: expect.any(Function),
       onSetPage: expect.any(Function),
-      page: 3,
+      page: 1,
       perPage: 50
     })
   });
 
+  it('should read pagination state from URL', () => {
+    const mockSearchParams = new URLSearchParams('page=2&perPage=10');
+    const { result } = renderHook(() =>
+      useDataViewPagination({
+        searchParams: mockSearchParams,
+        setSearchParams: jest.fn(),
+        page: 1,
+        perPage: 5,
+      })
+    );
+
+    expect(result.current).toEqual({
+      onPerPageSelect: expect.any(Function),
+      onSetPage: expect.any(Function),
+      page: 2,
+      perPage: 10,
+    });
+  });
+
+  it('should set pagination state in URL when page changes', () => {
+    const mockSetSearchParams = jest.fn();
+    const { result } = renderHook(() =>
+      useDataViewPagination({
+        searchParams: new URLSearchParams(),
+        setSearchParams: mockSetSearchParams,
+        page: 1,
+        perPage: 5,
+      })
+    );
+
+    expect(mockSetSearchParams).toHaveBeenNthCalledWith(
+      1, 
+      new URLSearchParams('page=1&perPage=5')
+    );
+
+    act(() => {
+      result.current.onSetPage(undefined, 4);
+    });
+
+    expect(mockSetSearchParams).toHaveBeenNthCalledWith(
+      2,
+      new URLSearchParams('page=4&perPage=5')
+    );
+  });
+
+  it('should set pagination state in URL when perPage changes', () => {
+    const mockSetSearchParams = jest.fn();
+    const { result } = renderHook(() =>
+      useDataViewPagination({
+        searchParams: new URLSearchParams('page=2'),
+        setSearchParams: mockSetSearchParams,
+        page: 1,
+        perPage: 5,
+      })
+    );
+
+    act(() => {
+      result.current.onPerPageSelect(undefined, 20);
+    });
+
+    expect(mockSetSearchParams).toHaveBeenCalledWith(
+      new URLSearchParams('page=1&perPage=20')
+    );
+  });
+
+  it('should initialize URL with default values if not present', () => {
+    const mockSetSearchParams = jest.fn();
+    renderHook(() =>
+      useDataViewPagination({
+        searchParams: new URLSearchParams(),
+        setSearchParams: mockSetSearchParams,
+        page: 1,
+        perPage: 5,
+      })
+    );
+
+    expect(mockSetSearchParams).toHaveBeenCalledWith(
+      new URLSearchParams('page=1&perPage=5')
+    );
+  });
 });

package/src/Hooks/pagination.ts

@@ -1,31 +1,81 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
+
+export enum PaginationParams {
+  PAGE = 'page',
+  PER_PAGE = 'perPage'
+}
 
 export interface UseDataViewPaginationProps {
   /** Initial page */
   page?: number;
   /** Items per page */
   perPage: number;
+  /** Current search parameters as a string */
+  searchParams?: URLSearchParams;
+  /** Function to set search parameters */
+  setSearchParams?: (params: URLSearchParams) => void;
 }
 
 export interface DataViewPaginationProps extends UseDataViewPaginationProps {
   /** Current page number */
-    page: number;
+  page: number;
 }
 
-export const useDataViewPagination = ({ page = 1, perPage }: UseDataViewPaginationProps) => { 
-  const [ state, setState ] = useState({ page, perPage });
-  
-  const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPerPage: number) => {
-    setState(prev => ({ ...prev, perPage: newPerPage }));
-  }
-  
-  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined, newPage: number) => {
+export const useDataViewPagination = ({
+  page = 1,
+  perPage,
+  searchParams,
+  setSearchParams,
+}: UseDataViewPaginationProps) => {
+  const [ state, setState ] = useState({
+    page: parseInt(searchParams?.get(PaginationParams.PAGE) || `${page}`),
+    perPage: parseInt(searchParams?.get(PaginationParams.PER_PAGE) || `${perPage}`),
+  });
+
+  const updateSearchParams = (page: number, perPage: number) => {
+    if (searchParams && setSearchParams) {
+      const params = new URLSearchParams(searchParams);
+      params.set(PaginationParams.PAGE, `${page}`);
+      params.set(PaginationParams.PER_PAGE, `${perPage}`);
+      setSearchParams(params);
+    }
+  };
+
+  useEffect(() => {
+    // Make sure search params are loaded or set if not present on mount
+    updateSearchParams(state.page, state.perPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    // Listen on URL params changes
+    const currentPage = parseInt(searchParams?.get(PaginationParams.PAGE) || `${state.page}`);
+    const currentPerPage = parseInt(searchParams?.get(PaginationParams.PER_PAGE) || `${state.perPage}`);
+    if (currentPage !== state.page || currentPerPage !== state.perPage) {
+      setState({ page: currentPage, perPage: currentPerPage });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ searchParams ]);
+
+  const onPerPageSelect = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
+    newPerPage: number
+  ) => {
+    updateSearchParams(1, newPerPage);
+    setState({ perPage: newPerPage, page: 1 });
+  };
+
+  const onSetPage = (
+    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent | undefined,
+    newPage: number
+  ) => {
+    updateSearchParams(newPage, state.perPage);
     setState(prev => ({ ...prev, page: newPage }));
-  }
-  
+  };
+
   return {
     ...state,
     onPerPageSelect,
-    onSetPage
-  }
-}
+    onSetPage,
+  };
+};