Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00
Code Issues Activity

feat(console): store filters in url search params (#493)

Browse source
This commit is contained in:
Wang Sijie 2022-04-06 14:08:11 +08:00 committed by GitHub
parent 4a904f2953
commit 766156fb6b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/console/src/pages/Users/index.tsx
View file

@ -4,7 +4,7 @@ import classNames from 'classnames';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import Modal from 'react-modal'; import Modal from 'react-modal';
import { useNavigate } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import useSWR from 'swr'; import useSWR from 'swr';
import Button from '@/components/Button'; import Button from '@/components/Button';
@ -29,8 +29,9 @@ const pageSize = 20;
const Users = () => { const Users = () => {
const [isCreateFormOpen, setIsCreateFormOpen] = useState(false); const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
const [pageIndex, setPageIndex] = useState(1); const [query, setQuery] = useSearchParams();
const [keyword, setKeyword] = useState<string>(); const pageIndex = Number(query.get('page') ?? '1');
const keyword = query.get('search') ?? '';
const { data, error, mutate } = useSWR<[User[], number], RequestError>( const { data, error, mutate } = useSWR<[User[], number], RequestError>(
`/api/users?page=${pageIndex}&page_size=${pageSize}${conditionalString( `/api/users?page=${pageIndex}&page_size=${pageSize}${conditionalString(
keyword && `&search=${keyword}` keyword && `&search=${keyword}`
@ -68,7 +69,12 @@ const Users = () => {
</Modal> </Modal>
</div> </div>
<div className={styles.filter}> <div className={styles.filter}>
<Search defaultValue={keyword} onSearch={setKeyword} /> <Search
defaultValue={keyword}
onSearch={(value) => {
setQuery({ search: value });
}}
/>
</div> </div>
<div className={classNames(styles.table, tableStyles.scrollable)}> <div className={classNames(styles.table, tableStyles.scrollable)}>
<table> <table>
@ -133,7 +139,9 @@ const Users = () => {
<Pagination <Pagination
pageCount={Math.ceil(totalCount / pageSize)} pageCount={Math.ceil(totalCount / pageSize)}
pageIndex={pageIndex} pageIndex={pageIndex}
onChange={setPageIndex} onChange={(page) => {
setQuery({ page: String(page) });
}}
/> />
)} )}
</div> </div>