fix(ui): correctly paginate request list

This commit is contained in:
sct
2021-03-29 15:45:10 +09:00
parent a9461f760d
commit 67fbb401ac
4 changed files with 145 additions and 68 deletions

View File

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWR from 'swr';
import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
import { useUpdateQueryParams } from '../../hooks/useUpdateQueryParams';
import { useUser } from '../../hooks/useUser';
import globalMessages from '../../i18n/globalMessages';
import Button from '../Common/Button';
@@ -42,6 +43,7 @@ const RequestList: React.FC = () => {
const page = router.query.page ? Number(router.query.page) : 1;
const pageIndex = page - 1;
const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
const { data, error, revalidate } = useSWR<RequestResultsResponse>(
`/api/v1/request?take=${currentPageSize}&skip=${
@@ -284,43 +286,13 @@ const RequestList: React.FC = () => {
<div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
<Button
disabled={!hasPrevPage}
onClick={() =>
router
.push(
{
pathname: `${router.pathname}?page=${page - 1}`,
query: router.query.userId
? { userId: router.query.userId }
: {},
},
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
}
onClick={() => updateQueryParams('page', (page - 1).toString())}
>
{intl.formatMessage(globalMessages.previous)}
</Button>
<Button
disabled={!hasNextPage}
onClick={() =>
router
.push(
{
pathname: `${router.pathname}?page=${page + 1}`,
query: router.query.userId
? { userId: router.query.userId }
: {},
},
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
}
onClick={() => updateQueryParams('page', (page + 1).toString())}
>
{intl.formatMessage(globalMessages.next)}
</Button>

View File

@@ -8,6 +8,7 @@ import {
LogMessage,
LogsResultsResponse,
} from '../../../../server/interfaces/api/settingsInterfaces';
import { useUpdateQueryParams } from '../../../hooks/useUpdateQueryParams';
import globalMessages from '../../../i18n/globalMessages';
import Error from '../../../pages/_error';
import Badge from '../../Common/Badge';
@@ -53,6 +54,7 @@ const SettingsLogs: React.FC = () => {
const page = router.query.page ? Number(router.query.page) : 1;
const pageIndex = page - 1;
const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
const toggleLogs = () => {
setRefreshInterval(refreshInterval === 5000 ? 0 : 5000);
@@ -456,15 +458,7 @@ const SettingsLogs: React.FC = () => {
<Button
disabled={!hasPrevPage}
onClick={() =>
router
.push(
`${router.pathname}?page=${page - 1}`,
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
updateQueryParams('page', (page - 1).toString())
}
>
{intl.formatMessage(globalMessages.previous)}
@@ -472,15 +466,7 @@ const SettingsLogs: React.FC = () => {
<Button
disabled={!hasNextPage}
onClick={() =>
router
.push(
`${router.pathname}?page=${page + 1}`,
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
updateQueryParams('page', (page + 1).toString())
}
>
{intl.formatMessage(globalMessages.next)}

View File

@@ -10,6 +10,7 @@ import * as Yup from 'yup';
import type { UserResultsResponse } from '../../../server/interfaces/api/userInterfaces';
import { hasPermission } from '../../../server/lib/permissions';
import AddUserIcon from '../../assets/useradd.svg';
import { useUpdateQueryParams } from '../../hooks/useUpdateQueryParams';
import { Permission, User, UserType, useUser } from '../../hooks/useUser';
import globalMessages from '../../i18n/globalMessages';
import Alert from '../Common/Alert';
@@ -79,6 +80,7 @@ const UserList: React.FC = () => {
const page = router.query.page ? Number(router.query.page) : 1;
const pageIndex = page - 1;
const updateQueryParams = useUpdateQueryParams({ page: page.toString() });
const { data, error, revalidate } = useSWR<UserResultsResponse>(
`/api/v1/user?take=${currentPageSize}&skip=${
@@ -675,15 +677,7 @@ const UserList: React.FC = () => {
<Button
disabled={!hasPrevPage}
onClick={() =>
router
.push(
`${router.pathname}?page=${page - 1}`,
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
updateQueryParams('page', (page - 1).toString())
}
>
{intl.formatMessage(globalMessages.previous)}
@@ -691,15 +685,7 @@ const UserList: React.FC = () => {
<Button
disabled={!hasNextPage}
onClick={() =>
router
.push(
`${router.pathname}?page=${page + 1}`,
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
updateQueryParams('page', (page + 1).toString())
}
>
{intl.formatMessage(globalMessages.next)}