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 | import { UploadOutlined } from '@ant-design/icons';
import { usePatchQuestMutation, usePostImageUploadMutation } from '@lib/api/mutations';
import { useGetQuestQuery } from '@lib/api/queries';
import { CreateOrUpdateQuestRequestDto } from '@uniquegood/realworld-adventure-interface';
import { Button, DatePicker, Form, Input, Modal, ModalProps, Upload, message } from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import React from 'react';
interface ModifyModalProps {
modalData: ModalProps;
closeModal: () => unknown;
campaignId: string;
questId: string;
}
export default function ModifyModal({
modalData,
closeModal,
campaignId,
questId
}: ModifyModalProps) {
const [form] = Form.useForm();
const { data: quest } = useGetQuestQuery({ campaignId, questId });
const { mutateAsync: patchQuest } = usePatchQuestMutation({ campaignId, questId });
const { mutateAsync: postImage } = usePostImageUploadMutation();
const handleSubmit = async (
values: CreateOrUpdateQuestRequestDto & {
date: [Dayjs, Dayjs];
image: { file: File; fileList: FileList };
}
) => {
if (values.image.fileList.length === 0) {
message.error('이미지를 업로드해주세요.');
return;
}
const [startAt, endAt] = values.date || [null, null];
const prevFile = values.image.fileList[0] as File & { uid: string; url: string };
const imageUrl = prevFile.uid.includes('prev')
? prevFile.url
: (await postImage({ file: values.image.file })).data.url || '';
const { success } = await patchQuest({
...values,
startAt: startAt.format('YYYY-MM-DDTHH:mm'),
endAt: endAt?.format('YYYY-MM-DDTHH:mm') || null,
imageUrl
});
if (success) {
message.success('퀘스트를 수정했습니다.');
closeModal();
}
};
const setInitialValues = () => {
const startAt = dayjs(quest?.data?.startAt);
const endAt = quest?.data?.endAt ? dayjs(quest?.data?.endAt) : null;
form.setFieldsValue({
...quest?.data,
date: [startAt, endAt],
image: {
file: null,
fileList: [{ uid: 'prev-image', name: '이전 이미지', url: quest?.data?.imageUrl }]
}
});
};
React.useEffect(() => {
setInitialValues();
}, [quest]);
return (
<Modal
{...modalData}
title="퀘스트 수정"
onOk={form.submit}
okText="확인"
cancelText="닫기"
afterClose={setInitialValues}
>
<Form
form={form}
onFinish={handleSubmit}
labelCol={{ span: 24 }}
wrapperCol={{ span: 24 }}
// eslint-disable-next-line no-template-curly-in-string
validateMessages={{ required: '${label}은(는) 필수값입니다.' }}
>
<Form.Item name="title" label="이름" rules={[{ required: true }]}>
<Input placeholder="이름을 입력해주세요." />
</Form.Item>
<Form.Item name="description" label="설명" rules={[{ required: true }]}>
<Input placeholder="설명을 입력해주세요." />
</Form.Item>
<Form.Item name="image" label="이미지" rules={[{ required: true }]}>
{quest?.data?.imageUrl && (
<Upload
defaultFileList={[
{ uid: 'prev-image', name: '이전 이미지', url: quest?.data?.imageUrl || undefined }
]}
listType="picture"
maxCount={1}
beforeUpload={() => false}
>
<Button icon={<UploadOutlined />}>이미지 업로드</Button>
</Upload>
)}
</Form.Item>
<Form.Item
name="date"
label="퀘스트 기간"
rules={[{ required: true, message: '시작일은 필수값입니다.' }]}
>
<DatePicker.RangePicker
format="YYYY-MM-DD HH:mm:00"
showTime={{ format: 'HH:mm' }}
style={{ width: '100%' }}
allowEmpty={[false, true]}
/>
</Form.Item>
</Form>
</Modal>
);
}
|