Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

feat(console): support pagination for webhooks page (#3914)

Browse source
This commit is contained in:
Xiao Yijun 2023-05-29 11:57:57 +08:00 committed by GitHub
parent 51f61b455a
commit 708303349e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
packages/console/src/pages/Webhooks/index.tsx
View file

@ -17,8 +17,10 @@ import ItemPreview from '@/components/ItemPreview';
import ListPage from '@/components/ListPage'; import ListPage from '@/components/ListPage';
import TablePlaceholder from '@/components/Table/TablePlaceholder'; import TablePlaceholder from '@/components/Table/TablePlaceholder';
import Tag from '@/components/Tag'; import Tag from '@/components/Tag';
import { defaultPageSize } from '@/consts';
import { hookEventLabel } from '@/consts/webhooks'; import { hookEventLabel } from '@/consts/webhooks';
import { type RequestError } from '@/hooks/use-api'; import { type RequestError } from '@/hooks/use-api';
import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher';
import useTheme from '@/hooks/use-theme'; import useTheme from '@/hooks/use-theme';
import { buildUrl } from '@/utils/url'; import { buildUrl } from '@/utils/url';
@ -26,6 +28,7 @@ import CreateFormModal from './components/CreateFormModal';
import SuccessRate from './components/SuccessRate'; import SuccessRate from './components/SuccessRate';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
const pageSize = defaultPageSize;
const webhooksPathname = '/webhooks'; const webhooksPathname = '/webhooks';
const createWebhookPathname = `${webhooksPathname}/create`; const createWebhookPathname = `${webhooksPathname}/create`;
@ -33,12 +36,20 @@ const buildDetailsPathname = (id: string) => `${webhooksPathname}/${id}`;
function Webhooks() { function Webhooks() {
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const { pathname } = useLocation(); const { pathname, search } = useLocation();
const isCreateNew = pathname === createWebhookPathname; const isCreateNew = pathname === createWebhookPathname;
const { data, error, mutate } = useSWR<HookResponse[], RequestError>( const [{ page }, updateSearchParameters] = useSearchParametersWatcher({
buildUrl('api/hooks', { includeExecutionStats: String(true) }) page: 1,
});
const { data, error, mutate } = useSWR<[HookResponse[], number], RequestError>(
buildUrl('api/hooks', {
includeExecutionStats: String(true),
page: String(page),
page_size: String(pageSize),
})
); );
const isLoading = !data && !error; const isLoading = !data && !error;
const [webhooks, totalCount] = data ?? [];
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme(); const theme = useTheme();
const WebhookIcon = theme === Theme.Light ? Webhook : WebhookDark; const WebhookIcon = theme === Theme.Light ? Webhook : WebhookDark;
@ -50,11 +61,11 @@ function Webhooks() {
createButton={{ createButton={{
title: 'webhooks.create', title: 'webhooks.create',
onClick: () => { onClick: () => {
navigate(createWebhookPathname); navigate({ pathname: createWebhookPathname, search });
}, },
}} }}
table={{ table={{
rowGroups: [{ key: 'hooks', data }], rowGroups: [{ key: 'hooks', data: webhooks }],
rowIndexKey: 'id', rowIndexKey: 'id',
isLoading, isLoading,
errorMessage: error?.body?.message ?? error?.message, errorMessage: error?.body?.message ?? error?.message,
@ -131,12 +142,20 @@ function Webhooks() {
size="large" size="large"
icon={<Plus />} icon={<Plus />}
onClick={() => { onClick={() => {
navigate(createWebhookPathname); navigate({ pathname: createWebhookPathname, search });
}} }}
/> />
} }
/> />
), ),
pagination: {
page,
totalCount,
pageSize,
onChange: (page) => {
updateSearchParameters({ page });
},
},
}} }}
widgets={ widgets={
<CreateFormModal <CreateFormModal
@ -149,7 +168,7 @@ function Webhooks() {
return; return;
} }
navigate(webhooksPathname); navigate({ pathname: webhooksPathname, search });
}} }}
/> />
} }