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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 'use client';
import { useGetUserScoresQuery } from '@lib/api/queries';
import { HeaderContainer } from '@lib/components/styledComponents';
import useModalState from '@lib/hooks/useModalState';
import { UserScoreLogInfoDto } from '@uniquegood/realworld-adventure-interface';
import { Button, Input, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useRouter, useSearchParams } from 'next/navigation';
import React from 'react';
import UserScoreDeleteModal from './Modal';
export default function UserScorePage() {
const router = useRouter();
const searchParams = useSearchParams();
const [page, setPage] = React.useState(0);
const [size, setSize] = React.useState(20);
const [keyword, setKeyword] = React.useState(searchParams.get('keyword') || '');
const [currentUserId, setCurrentUserId] = React.useState('');
const { openModal, closeModal, modal } = useModalState();
const { data: userScores, isLoading: isUserScoreLoading } = useGetUserScoresQuery({
page,
size,
sort: [],
keyword
});
const handleSearch = (value: string) => {
setKeyword(value);
setPage(0);
router.push(`?keyword=${value}`);
};
const handleDelete = async (userId: string) => {
openModal({});
setCurrentUserId(userId);
};
const columns: ColumnsType<UserScoreLogInfoDto> = [
{
title: 'ID',
dataIndex: 'id',
key: 'id'
},
{
title: '유저 ID',
dataIndex: 'userId',
key: 'userId'
},
{
title: '유저 이름',
dataIndex: 'userName',
key: 'userName'
},
{
title: '점수',
dataIndex: 'score',
key: 'score'
},
{
title: '캠페인 ID',
dataIndex: 'campaignId',
key: 'campaignId'
},
{
title: '캠페인 이름',
dataIndex: 'campaignName',
key: 'campaignName'
},
{
title: '생성일',
dataIndex: 'createdAt',
key: 'createdAt',
render: (value) => dayjs(value).format('YYYY-MM-DD HH:mm:ss')
},
{
title: '삭제일',
dataIndex: 'deletedAt',
key: 'deletedAt',
render: (value) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-')
},
{
title: '메모',
dataIndex: 'note',
key: 'note'
},
{
title: '동작',
render: (_, record) => {
return (
!record.deletedAt && (
<Button onClick={() => handleDelete(record.userId)} danger size="small">
기록 삭제
</Button>
)
);
}
}
];
return (
<>
<HeaderContainer>
<h1>유저 점수 조회</h1>
</HeaderContainer>
<Input.Search
placeholder="검색 키워드를 입력해주세요."
enterButton
defaultValue={keyword}
onSearch={handleSearch}
style={{ width: '300px', marginBottom: '16px' }}
/>
<Table
dataSource={userScores?.data?.content}
columns={columns}
pagination={{
current: page + 1,
pageSize: size,
total: userScores?.data?.totalElements,
onShowSizeChange(_, size) {
setSize(size);
},
onChange(page) {
setPage(page - 1);
}
}}
loading={isUserScoreLoading}
rowKey="id"
/>
<UserScoreDeleteModal modalData={modal} closeModal={closeModal} userId={currentUserId} />
</>
);
}
|