All files / lib/pages/QuestionGroup/Modal ManageQuestionModal.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { usePostMappingQuestionGroupMutation } from '@lib/api/mutations';
import { useGetAllQuestionsQuery, useGetQuestionGroupQuery } from '@lib/api/queries';
import { MappingQuestionWithQuestionGroupRequestDto } from '@uniquegood/realworld-adventure-interface';
import { Form, Modal, ModalProps, Select, message } from 'antd';
import axios from 'axios';
import React from 'react';
 
type ManageQuestionModalProps = {
  modalData: ModalProps;
  closeModal: () => unknown;
  questionGroupId: string;
};
 
export default function ManageQuestionModal({
  modalData,
  closeModal,
  questionGroupId
}: ManageQuestionModalProps) {
  const [form] = Form.useForm();
 
  const { data: questions } = useGetAllQuestionsQuery('Random');
  const { data: questionGroup } = useGetQuestionGroupQuery({ questionGroupId });
  const { mutateAsync: modifyQuestions } = usePostMappingQuestionGroupMutation({ questionGroupId });
 
  const handleSubmit = async (values: MappingQuestionWithQuestionGroupRequestDto) => {
    try {
      const data = await modifyQuestions(values);
 
      if (data.success) {
        message.success('연결된 랜덤 문제 목록이 수정되었습니다.');
 
        closeModal();
      }
    } catch (e) {
      if (axios.isAxiosError(e)) {
        console.error(e);
 
        message.error(e.response?.data.message);
      }
    }
  };
 
  React.useEffect(() => {
    form.setFieldsValue({
      questionIds: questionGroup?.data?.questionList.map((question) => question.id)
    });
  }, [questionGroup]);
 
  return (
    <Modal {...modalData} title="연결된 랜덤 문제 관리" onOk={form.submit}>
      <Form form={form} onFinish={handleSubmit} wrapperCol={{ span: 24 }} labelCol={{ span: 24 }}>
        <Form.Item name="questionIds" label="연결된 랜덤 문제 목록">
          <Select
            placeholder="연결할 랜덤 문제를 선택해주세요."
            mode="multiple"
            showSearch
            filterOption={(input, option) => {
              return option?.label?.includes(input) || false;
            }}
            options={questions?.data?.content.map((question) => ({
              label: question.title,
              value: question.id
            }))}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
}