Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | import { useGetUsersQuery } from '@lib/api/queries';
import { AccountInfo } from '@uniquegood/realworld-adventure-interface';
import { Button, Input, Modal, ModalProps, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import React from 'react';
interface AddBlackListModalProps {
modalData: ModalProps;
closeModal: () => unknown;
onRowClick: (id: string) => unknown;
}
export default function AddBlackListModal({
modalData,
closeModal,
onRowClick
}: AddBlackListModalProps) {
const [page, setPage] = React.useState(0);
const [size, setSize] = React.useState(20);
const [keyword, setKeyword] = React.useState('');
const { data: users, isLoading: isUserLoading } = useGetUsersQuery({
page,
size,
keyword
});
const handleSearch = (value: string) => {
setKeyword(value);
setPage(0);
};
const handleClose = () => {
setPage(0);
setSize(20);
setKeyword('');
closeModal();
};
const columns: ColumnsType<AccountInfo> = [
{
title: '유저 ID',
dataIndex: 'id',
key: 'id'
},
{
title: '닉네임',
dataIndex: 'name',
key: 'name'
}
];
return (
<Modal {...modalData} title="유저 검색" footer={<Button onClick={handleClose}>닫기</Button>}>
<Input.Search placeholder="닉네임을 검색해보세요." onSearch={handleSearch} />
<Table
dataSource={users?.data?.content}
columns={columns}
loading={isUserLoading}
pagination={{
current: page + 1,
pageSize: size,
total: users?.data?.totalElements,
onChange: (page, size) => {
setPage(page - 1);
setSize(size);
}
}}
scroll={{
y: 800
}}
onRow={(record) => ({
onClick: () => onRowClick(record.id)
})}
rowKey="id"
/>
</Modal>
);
}
|