1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
unleash.unleash/frontend/src/hooks/usePagination.ts

61 lines
1.3 KiB
TypeScript
Raw Normal View History

import { useEffect, useState } from 'react';
import { paginate } from 'utils/paginate';
Feature list table (#908) * experiment with generic table * feat: example implementation of sortable table interfaces * add enhanced table header Co-authored-by: Nuno Góis <github@nunogois.com> * table cleanup Co-authored-by: Nuno Góis Co-authored-by: Fredrik Strand Oseberg * useSort hook interface surface Co-authored-by: Nuno Góis <github@nunogois.com> * sort handler initial implementation Co-authored-by: Tymoteusz Czech <Tymek@users.noreply.github.com> * new table unified components * feature flags table components Co-authored-by: Nuno Góis <github@nunogois.com> * feat: new table sort hook * feat: table sort * useSearch hook implementation * update new sort hook tests * sortable headers hook * feat: add sort to other table features * move experimental table hooks to a directory * update new table header styles * fix: header, tableActions * add some details like pagination and highlighter so we keep them in mind * feature table cells * update new table sort logic * new pagination * fix formatting and remove unused component * fix: adapt useSearch default search to text instead of regex (PR #924) * fix: update table title based on visible rows * fix: remove test route * refactor: move table experiment files * features table experimentation * feat: enhanced feature flags table * fix: features default sort * feat: enhanced table loading * fix: table theme after mui5 update * features list placeholder * add react-table * update snapshots after theme change * remove unused files * fix: improve features table after review * refactor: rename feature type cell variables Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com> Co-authored-by: Nuno Góis <github@nunogois.com> Co-authored-by: Tymoteusz Czech <Tymek@users.noreply.github.com>
2022-05-05 15:34:46 +02:00
/**
* @deprecated
*/
const usePagination = <T>(
data: T[],
2022-01-26 12:27:34 +01:00
limit: number,
filterFunc?: (item: T) => boolean
2022-01-26 12:27:34 +01:00
) => {
const [paginatedData, setPaginatedData] = useState<T[][]>([[]]);
const [pageIndex, setPageIndex] = useState(0);
useEffect(() => {
2022-01-26 12:27:34 +01:00
let dataToPaginate = data;
if (filterFunc) {
dataToPaginate = data.filter(filterFunc);
}
const result = paginate(dataToPaginate, limit);
2022-05-19 14:27:19 +02:00
setPageIndex(0);
setPaginatedData(result);
2022-01-26 12:27:34 +01:00
/* eslint-disable-next-line */
}, [JSON.stringify(data), limit]);
const nextPage = () => {
if (pageIndex < paginatedData.length - 1) {
setPageIndex(prev => prev + 1);
}
};
const prevPage = () => {
if (pageIndex > 0) {
setPageIndex(prev => prev - 1);
}
};
const lastPage = () => {
setPageIndex(paginatedData.length - 1);
};
const firstPage = () => {
setPageIndex(0);
};
return {
page: paginatedData[pageIndex] || [],
pages: paginatedData,
nextPage,
prevPage,
lastPage,
firstPage,
setPageIndex,
pageIndex,
};
};
export default usePagination;