Skip to content

Commit

Permalink
Clean up StudioTableLocalPagination
Browse files Browse the repository at this point in the history
  • Loading branch information
ErlingHauan committed May 13, 2024
1 parent 6d55742 commit 06f5f7f
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 28 deletions.
Original file line number Diff line number Diff line change
@@ -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} />

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
@@ -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} />

Expand Down
4 changes: 2 additions & 2 deletions frontend/libs/studio-components/src/hooks/useTableSorting.tsx
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit 06f5f7f

Please sign in to comment.