1
1
import React , { Component } from 'react' ;
2
- import { Modal , Input , message } from 'antd ' ;
3
- import { createGroup } from '../../util/APIUtils ' ;
2
+ import { createGroup , getAllUsers } from '../../util/APIUtils ' ;
3
+ import { Modal , Input , message , Checkbox , Spin } from 'antd ' ;
4
4
5
5
6
6
class GroupCreateModal extends Component {
@@ -9,19 +9,42 @@ class GroupCreateModal extends Component {
9
9
this . state = {
10
10
name : '' ,
11
11
description : '' ,
12
- imageUrl : ''
12
+ imageUrl : '' ,
13
+ users : [ ] ,
14
+ selectedUserIds : [ ] ,
15
+ loading : false
13
16
} ;
14
17
}
15
18
19
+ componentDidMount ( ) {
20
+ this . setState ( { loading : true } ) ;
21
+ getAllUsers ( )
22
+ . then ( users => {
23
+ this . setState ( { users, loading : false } ) ;
24
+ } )
25
+ . catch ( ( ) => {
26
+ message . error ( '유저 목록을 불러오는 데 실패했습니다.' ) ;
27
+ this . setState ( { loading : false } ) ;
28
+ } ) ;
29
+ }
30
+
16
31
handleChange = ( field , value ) => {
17
32
this . setState ( { [ field ] : value } ) ;
18
33
}
19
34
35
+ handleUserSelect = userId => {
36
+ const { selectedUserIds } = this . state ;
37
+ const newList = selectedUserIds . includes ( userId )
38
+ ? selectedUserIds . filter ( id => id !== userId )
39
+ : [ ...selectedUserIds , userId ] ;
40
+ this . setState ( { selectedUserIds : newList } ) ;
41
+ }
42
+
20
43
handleSubmit = ( ) => {
21
44
22
- const { name, description, imageUrl } = this . state ;
45
+ const { name, description, imageUrl, selectedUserIds } = this . state ;
23
46
24
- createGroup ( { name, description, imageUrl } )
47
+ createGroup ( { name, description, imageUrl, memberIds : selectedUserIds } )
25
48
. then ( data => {
26
49
if ( ! data || ! data . name ) {
27
50
throw new Error ( "응답에 그룹 이름이 없습니다." ) ;
@@ -46,7 +69,7 @@ class GroupCreateModal extends Component {
46
69
47
70
render ( ) {
48
71
const { visible, onClose } = this . props ;
49
- const { name, description, imageUrl } = this . state ;
72
+ const { name, description, imageUrl, users , selectedUserIds , loading } = this . state ;
50
73
51
74
return (
52
75
< Modal
@@ -75,6 +98,20 @@ class GroupCreateModal extends Component {
75
98
value = { imageUrl }
76
99
onChange = { e => this . handleChange ( 'imageUrl' , e . target . value ) }
77
100
/>
101
+ < div style = { { maxHeight : 150 , overflowY : 'auto' , border : '1px solid #eee' , padding : 8 } } >
102
+ { loading ? (
103
+ < Spin />
104
+ ) : users . map ( user => (
105
+ < Checkbox
106
+ key = { user . id }
107
+ checked = { selectedUserIds . includes ( user . id ) }
108
+ onChange = { ( ) => this . handleUserSelect ( user . id ) }
109
+ style = { { display : 'block' , marginBottom : 6 } }
110
+ >
111
+ { user . name } ({ user . username } )
112
+ </ Checkbox >
113
+ ) ) }
114
+ </ div >
78
115
</ Modal >
79
116
) ;
80
117
}
0 commit comments