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 | 'use client';
import { useGetUsersQuery } from '@lib/api/queries';
import { HeaderContainer } from '@lib/components/styledComponents';
import useModalState from '@lib/hooks/useModalState';
import { AccountInfo } from '@uniquegood/realworld-adventure-interface';
import { Input, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import React from 'react';
import ScoreModal from './Modal/ScoreModal';
export default function UsersPage() {
const [currentPage, setCurrentPage] = React.useState(0);
const [currentUserId, setCurrentUserId] = React.useState('');
const [searchKeyword, setSearchKeyword] = React.useState('');
const {
openModal: openScoreModal,
closeModal: closeScoreModal,
modal: scoreModal
} = useModalState();
const { data: users, isLoading: isUsersLoading } = useGetUsersQuery({
page: currentPage,
size: 20,
keyword: searchKeyword
});
const columns: ColumnsType<AccountInfo> = [
{
key: 'id',
dataIndex: 'id',
title: 'ID'
},
{
key: 'name',
dataIndex: 'name',
title: '이름'
}
];
return (
<>
<HeaderContainer>
<h1>유저 조회</h1>
</HeaderContainer>
<Input.Search
placeholder="검색 키워드를 입력해주세요."
enterButton
onSearch={(value) => {
setCurrentPage(0);
setSearchKeyword(value);
}}
style={{ width: '300px', marginBottom: '16px' }}
/>
<Table
columns={columns}
dataSource={users?.data?.content}
pagination={{
showSizeChanger: false,
pageSize: 20,
total: users?.data?.totalElements,
onChange: (page) => setCurrentPage(page - 1)
}}
loading={isUsersLoading}
onRow={(record) => ({
onClick: () => {
setCurrentUserId(record.id);
openScoreModal({});
}
})}
rowKey="id"
/>
<ScoreModal modalData={scoreModal} closeModal={closeScoreModal} userId={currentUserId} />
</>
);
}
|