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 | import { usePostUserRewardProvisionMutation } from '@lib/api/mutations';
import { useGetUsersQuery } from '@lib/api/queries';
import {
AccountInfo,
ManageRewardResponseDto,
PaidUserRewardDto
} from '@uniquegood/realworld-adventure-interface';
import { Form, Modal, ModalProps, Select, Table, message } from 'antd';
import Search from 'antd/es/input/Search';
import { ColumnsType } from 'antd/es/table';
import React from 'react';
interface ProvisionUserRewardModalProps {
modalData: ModalProps;
closeModal: () => unknown;
totalRewards: ManageRewardResponseDto[];
}
export default function ProvisionUserRewardModal({
modalData,
closeModal,
totalRewards
}: ProvisionUserRewardModalProps) {
const [form] = Form.useForm();
const [searchKeyword, setSearchKeyword] = React.useState('');
const [currentPage, setCurrentPage] = React.useState(0);
const [selectedUserId, setSelectedUserId] = React.useState('');
const { data: users, isLoading: isUsersLoading } = useGetUsersQuery({
page: currentPage,
size: 10,
keyword: searchKeyword
});
const { mutateAsync: provisionUserReward } = usePostUserRewardProvisionMutation();
const handleSubmit = async (values: PaidUserRewardDto) => {
const { success } = await provisionUserReward({
rewardId: values.rewardId,
userId: selectedUserId
});
if (success) {
message.success('보상 지급이 완료되었습니다.');
closeModal();
} else {
message.error('보상 지급에 실패했습니다.');
}
};
const columns: ColumnsType<AccountInfo> = [
{
key: 'id',
dataIndex: 'id',
title: 'ID'
},
{
key: 'name',
dataIndex: 'name',
title: '유저 이름'
}
];
return (
<Modal
{...modalData}
title="보상 지급"
onOk={form.submit}
okText="확인"
cancelText="닫기"
afterClose={() => {
setSearchKeyword('');
setCurrentPage(0);
}}
>
<Form
form={form}
onFinish={handleSubmit}
preserve={false}
// eslint-disable-next-line no-template-curly-in-string
validateMessages={{ required: '${label}은(는) 필수로 선택해주세요.' }}
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
>
<Form.Item name="rewardId" label="보상" rules={[{ required: true }]}>
<Select
options={totalRewards.map((reward) => ({ label: reward.name, value: reward.id }))}
placeholder="보상을 선택해주세요."
showSearch
filterOption={(input, option) => {
return option?.label?.includes(input) || false;
}}
/>
</Form.Item>
<Form.Item
name="userId"
label="유저"
rules={[
{
required: true,
validator: () => {
if (selectedUserId) {
return Promise.resolve();
}
return Promise.reject(new Error('유저를 선택해주세요.'));
}
}
]}
>
<Search
placeholder="지급할 유저를 선택해주세요."
onSearch={(value) => setSearchKeyword(value)}
/>
<Table
columns={columns}
loading={isUsersLoading}
dataSource={users?.data?.content}
pagination={{
total: users?.data?.totalElements,
showSizeChanger: false,
onChange: (page) => setCurrentPage(page - 1)
}}
rowKey="id"
rowSelection={{
type: 'radio',
onSelect: (record) => {
setSelectedUserId(record.id);
}
}}
/>
</Form.Item>
</Form>
</Modal>
);
}
|