Clean up StudioTableLocalPagination

Altinn · May 13, 2024 · 06f5f7f · 06f5f7f
1 parent 6d55742
commit 06f5f7f
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 28 deletions.
diff --git a/...onents/src/components/StudioTableLocalPagination/StudioTableLocalPagination.mdx b/...onents/src/components/StudioTableLocalPagination/StudioTableLocalPagination.mdx
@@ -1,15 +1,21 @@
 import { Canvas, Meta } from '@storybook/blocks';
 import { Heading, Paragraph } from '@digdir/design-system-react';
 import * as StudioTableLocalPaginationStories from './StudioTableLocalPagination.stories';
-import { propInfoColumns, propInfoRowsLocalPagination } from "../StudioTableRemotePagination/mockData"
-import {StudioTableLocalPagination} from "./StudioTableLocalPagination";
+import {
+  propInfoColumns,
+  propInfoRowsLocalPagination,
+} from '../StudioTableRemotePagination/mockData';
+import { StudioTableLocalPagination } from './StudioTableLocalPagination';
 
 <Meta of={StudioTableLocalPaginationStories} />
 
 <Heading level={1} size='small'>
   StudioTableLocalPagination
 </Heading>
-<Paragraph>The StudioTableLocalPagination component handles pagination internally, eliminating the need for manual control. It seamlessly manages pagination logic for you.</Paragraph>
+<Paragraph>
+  The StudioTableLocalPagination component handles pagination internally, eliminating the need for
+  manual control. It seamlessly manages pagination logic for you.
+</Paragraph>
 
 <Canvas of={StudioTableLocalPaginationStories.Preview} />
 

diff --git a/...tudio-components/src/components/StudioTableLocalPagination/StudioTableLocalPagination.tsx b/...tudio-components/src/components/StudioTableLocalPagination/StudioTableLocalPagination.tsx
@@ -36,36 +36,26 @@ export const StudioTableLocalPagination = forwardRef<
     const [rowsToRender, setRowsToRender] = useState<Rows>(initialRowsToRender);
 
     useEffect(() => {
-      setRowsToRender(getRowsToRender(currentPage, pageSize, sortedRows || rows));
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sortedRows]);
+      const newRowsToRender = getRowsToRender(currentPage, pageSize, sortedRows || rows);
 
-    const handlePageChange = (newPage: number) => {
-      setCurrentPage(newPage);
-      setRowsToRender(getRowsToRender(newPage, pageSize, sortedRows || rows));
-    };
-
-    const handlePageSizeChange = (newPageSize: number) => {
-      setPageSize(newPageSize);
-
-      const updatedRowsToRender = getRowsToRender(currentPage, newPageSize, sortedRows || rows);
-      if (!updatedRowsToRender.length) {
-        // If the new page size results in an empty page, reset to the first page
-        setRowsToRender(getRowsToRender(1, newPageSize, sortedRows || rows));
+      const outOfRange = !newRowsToRender.length && currentPage > 1;
+      if (outOfRange) {
         setCurrentPage(1);
-      } else {
-        setRowsToRender(updatedRowsToRender);
+        setRowsToRender(getRowsToRender(1, pageSize, sortedRows || rows));
+        return;
       }
-    };
+
+      setRowsToRender(newRowsToRender);
+    }, [sortedRows, currentPage, pageSize]);
 
     const totalPages = Math.ceil(rows.length / pageSize);
 
     const studioTableRemotePaginationProps = pagination && {
       ...pagination,
       currentPage,
       totalPages,
-      onPageChange: handlePageChange,
-      onPageSizeChange: handlePageSizeChange,
+      onPageChange: setCurrentPage,
+      onPageSizeChange: setPageSize,
     };
 
     return (

diff --git a/...ents/src/components/StudioTableRemotePagination/StudioTableRemotePagination.mdx b/...ents/src/components/StudioTableRemotePagination/StudioTableRemotePagination.mdx
@@ -1,15 +1,19 @@
 import { Canvas, Meta } from '@storybook/blocks';
 import { Heading, Paragraph } from '@digdir/design-system-react';
 import * as StudioTableRemotePaginationStories from './StudioTableRemotePagination.stories';
-import { StudioTableRemotePagination } from "./StudioTableRemotePagination"
-import { propInfoColumns, propInfoRowsRemotePagination } from "./mockData"
+import { StudioTableRemotePagination } from './StudioTableRemotePagination';
+import { propInfoColumns, propInfoRowsRemotePagination } from './mockData';
 
 <Meta of={StudioTableRemotePaginationStories} />
 
 <Heading level={1} size='small'>
   StudioTableRemotePagination
 </Heading>
-<Paragraph>StudioTableRemotePagination brings together Digdir Designsystemet's `Table` and `Pagination` components. This component is useful when data is retrieved in chunks, and the pagination logic is managed externally. </Paragraph>
+<Paragraph>
+  StudioTableRemotePagination brings together Digdir Designsystemet's `Table` and `Pagination`
+  components. This component is useful when data is retrieved in chunks, and the pagination logic is
+  managed externally.{' '}
+</Paragraph>
 
 <Canvas of={StudioTableRemotePaginationStories.Preview} />
 

diff --git a/frontend/libs/studio-components/src/hooks/useTableSorting.tsx b/frontend/libs/studio-components/src/hooks/useTableSorting.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import type { Rows } from '../components';
 
-export const useTableSorting = (rows: Rows, config: Record<'enable', boolean>) => {
+export const useTableSorting = (rows: Rows, options: Record<'enable', boolean>) => {
   const [sortColumn, setSortColumn] = useState(null);
   const [sortDirection, setSortDirection] = useState('asc');
   const [sortedRows, setSortedRows] = useState<Rows>(rows);
@@ -34,7 +34,7 @@ export const useTableSorting = (rows: Rows, config: Record<'enable', boolean>) =
     }
   }, [sortColumn, sortDirection, rows]);
 
-  if (!config.enable) {
+  if (!options.enable) {
     return {
       sortedRows: undefined,
       handleSorting: undefined,