refactor(ui): add page query param to logs page & user list, and fix log timestamps (#1218)

* refactor(ui): add page query param to logs & fix timestamp

* refactor(ui): add page query param to user list as well
This commit is contained in:
TheCatLady
2021-03-18 21:53:31 -04:00
committed by GitHub
parent b53d099211
commit 4a5a9cce48
2 changed files with 60 additions and 11 deletions

View File

@@ -80,10 +80,12 @@ const UserList: React.FC = () => {
const intl = useIntl();
const router = useRouter();
const { addToast } = useToasts();
const [pageIndex, setPageIndex] = useState(0);
const [currentSort, setCurrentSort] = useState<Sort>('created');
const [currentPageSize, setCurrentPageSize] = useState<number>(10);
const page = router.query.page ? Number(router.query.page) : 1;
const pageIndex = page - 1;
const { data, error, revalidate } = useSWR<UserResultsResponse>(
`/api/v1/user?take=${currentPageSize}&skip=${
pageIndex * currentPageSize
@@ -433,8 +435,8 @@ const UserList: React.FC = () => {
id="sort"
name="sort"
onChange={(e) => {
setPageIndex(0);
setCurrentSort(e.target.value as Sort);
router.push(router.pathname);
}}
value={currentSort}
className="rounded-r-only"
@@ -622,8 +624,10 @@ const UserList: React.FC = () => {
id="pageSize"
name="pageSize"
onChange={(e) => {
setPageIndex(0);
setCurrentPageSize(Number(e.target.value));
router
.push(router.pathname)
.then(() => window.scrollTo(0, 0));
}}
value={currentPageSize}
className="inline short"
@@ -641,13 +645,33 @@ const UserList: React.FC = () => {
<div className="flex justify-center flex-auto space-x-2 sm:justify-end sm:flex-1">
<Button
disabled={!hasPrevPage}
onClick={() => setPageIndex((current) => current - 1)}
onClick={() =>
router
.push(
`${router.pathname}?page=${page - 1}`,
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
}
>
{intl.formatMessage(messages.previous)}
</Button>
<Button
disabled={!hasNextPage}
onClick={() => setPageIndex((current) => current + 1)}
onClick={() =>
router
.push(
`${router.pathname}?page=${page + 1}`,
undefined,
{
shallow: true,
}
)
.then(() => window.scrollTo(0, 0))
}
>
{intl.formatMessage(messages.next)}
</Button>