mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
refactor(console): keep pagination when the table is loading (#2661)
This commit is contained in:
parent
a134ea14b9
commit
c7add49165
6 changed files with 33 additions and 8 deletions
|
@ -145,7 +145,7 @@ const AuditLogTable = ({ userId }: Props) => {
|
||||||
</div>
|
</div>
|
||||||
<Pagination
|
<Pagination
|
||||||
pageIndex={pageIndex}
|
pageIndex={pageIndex}
|
||||||
totalCount={totalCount ?? 0}
|
totalCount={totalCount}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
className={styles.pagination}
|
className={styles.pagination}
|
||||||
onChange={(page) => {
|
onChange={(page) => {
|
||||||
|
|
|
@ -2,6 +2,8 @@ import classNames from 'classnames';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import ReactPaginate from 'react-paginate';
|
import ReactPaginate from 'react-paginate';
|
||||||
|
|
||||||
|
import useCacheValue from '@/hooks/use-cache-value';
|
||||||
|
|
||||||
import Button from '../Button';
|
import Button from '../Button';
|
||||||
import DangerousRaw from '../DangerousRaw';
|
import DangerousRaw from '../DangerousRaw';
|
||||||
import Next from './Next';
|
import Next from './Next';
|
||||||
|
@ -10,7 +12,7 @@ import * as styles from './index.module.scss';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
pageIndex: number;
|
pageIndex: number;
|
||||||
totalCount: number;
|
totalCount?: number;
|
||||||
pageSize: number;
|
pageSize: number;
|
||||||
className?: string;
|
className?: string;
|
||||||
onChange?: (pageIndex: number) => void;
|
onChange?: (pageIndex: number) => void;
|
||||||
|
@ -18,19 +20,27 @@ type Props = {
|
||||||
|
|
||||||
const Pagination = ({ pageIndex, totalCount, pageSize, className, onChange }: Props) => {
|
const Pagination = ({ pageIndex, totalCount, pageSize, className, onChange }: Props) => {
|
||||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||||
const pageCount = Math.ceil(totalCount / pageSize);
|
|
||||||
|
/**
|
||||||
|
* Note:
|
||||||
|
* The `totalCount` will become `undefined` temporarily when fetching data on page changes, and this causes the pagination to disappear.
|
||||||
|
* Cache `totalCount` to solve this problem.
|
||||||
|
*/
|
||||||
|
const cachedTotalCount = useCacheValue(totalCount) ?? 0;
|
||||||
|
|
||||||
|
const pageCount = Math.ceil(cachedTotalCount / pageSize);
|
||||||
|
|
||||||
if (pageCount <= 1) {
|
if (pageCount <= 1) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const min = (pageIndex - 1) * pageSize + 1;
|
const min = (pageIndex - 1) * pageSize + 1;
|
||||||
const max = Math.min(pageIndex * pageSize, totalCount);
|
const max = Math.min(pageIndex * pageSize, cachedTotalCount);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classNames(styles.container, className)}>
|
<div className={classNames(styles.container, className)}>
|
||||||
<div className={styles.positionInfo}>
|
<div className={styles.positionInfo}>
|
||||||
{t('general.page_info', { min, max, total: totalCount })}
|
{t('general.page_info', { min, max, total: cachedTotalCount })}
|
||||||
</div>
|
</div>
|
||||||
<ReactPaginate
|
<ReactPaginate
|
||||||
className={styles.pagination}
|
className={styles.pagination}
|
||||||
|
|
15
packages/console/src/hooks/use-cache-value.ts
Normal file
15
packages/console/src/hooks/use-cache-value.ts
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
const useCacheValue = <T>(value: T) => {
|
||||||
|
const [cachedValue, setCachedValue] = useState<T>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (value !== undefined) {
|
||||||
|
setCachedValue(value);
|
||||||
|
}
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
|
return cachedValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useCacheValue;
|
|
@ -145,7 +145,7 @@ const ApiResources = () => {
|
||||||
</div>
|
</div>
|
||||||
<Pagination
|
<Pagination
|
||||||
pageIndex={pageIndex}
|
pageIndex={pageIndex}
|
||||||
totalCount={totalCount ?? 0}
|
totalCount={totalCount}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
className={styles.pagination}
|
className={styles.pagination}
|
||||||
onChange={(page) => {
|
onChange={(page) => {
|
||||||
|
|
|
@ -137,7 +137,7 @@ const Applications = () => {
|
||||||
</div>
|
</div>
|
||||||
<Pagination
|
<Pagination
|
||||||
pageIndex={pageIndex}
|
pageIndex={pageIndex}
|
||||||
totalCount={totalCount ?? 0}
|
totalCount={totalCount}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
className={styles.pagination}
|
className={styles.pagination}
|
||||||
onChange={(page) => {
|
onChange={(page) => {
|
||||||
|
|
|
@ -164,7 +164,7 @@ const Users = () => {
|
||||||
</div>
|
</div>
|
||||||
<Pagination
|
<Pagination
|
||||||
pageIndex={pageIndex}
|
pageIndex={pageIndex}
|
||||||
totalCount={totalCount ?? 0}
|
totalCount={totalCount}
|
||||||
pageSize={pageSize}
|
pageSize={pageSize}
|
||||||
className={styles.pagination}
|
className={styles.pagination}
|
||||||
onChange={(page) => {
|
onChange={(page) => {
|
||||||
|
|
Loading…
Reference in a new issue