All files / lib/pages/User/Modal ScoreModal.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
71
72
73
74
75
76
77
78
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useGetUserScoresByUserId } from '@lib/api/queries';
import { UserScoreLogDto } from '@uniquegood/realworld-adventure-interface';
import { Button, Modal, ModalProps, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import React from 'react';
 
interface ScoreModalProps {
  modalData: ModalProps;
  closeModal: () => unknown;
  userId: string;
}
 
export default function ScoreModal({ modalData, closeModal, userId }: ScoreModalProps) {
  const [currentPage, setCurrentPage] = React.useState(0);
 
  const { data: userScoreLogs, isLoading } = useGetUserScoresByUserId({
    userId,
    page: currentPage,
    size: 20
  });
 
  const columns: ColumnsType<UserScoreLogDto> = [
    {
      key: 'id',
      dataIndex: 'id',
      title: 'ID'
    },
    {
      key: 'note',
      dataIndex: 'note',
      title: '메모'
    },
    {
      key: 'playLogId',
      dataIndex: 'playLogId',
      title: '플레이 로그 ID'
    },
    {
      key: 'score',
      dataIndex: 'score',
      title: '점수'
    },
    {
      key: 'createdAt',
      dataIndex: 'createdAt',
      title: '생성일',
      render: (value) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '')
    }
  ];
 
  return (
    <Modal
      title="유저 점수 로그 조회"
      width={1000}
      footer={[
        <Button key="close-button" onClick={closeModal}>
          닫기
        </Button>
      ]}
      {...modalData}
    >
      <Table
        columns={columns}
        dataSource={userScoreLogs?.data?.content}
        loading={isLoading}
        pagination={{
          showSizeChanger: false,
          total: userScoreLogs?.data?.totalElements,
          pageSize: 20,
          onChange: (page) => setCurrentPage(page - 1)
        }}
        rowKey="id"
      />
    </Modal>
  );
}