EnterRoom.js 2.38 KB
Newer Older
Soo Hyun Kim's avatar
Soo Hyun Kim committed
1
2
import React, { useState } from 'react'
import axios from 'axios';
3
import { Row, Col, Modal, Button, Form } from 'react-bootstrap';
Soo Hyun Kim's avatar
Soo Hyun Kim committed
4
5
6
7
8
9
import catchErrors from '../utils/catchErrors'


function EnterRoom(props) {
    const [enterCode, setEnterCode] = useState('');
    const [error, setError] = useState('');
Soo Hyun Kim's avatar
Soo Hyun Kim committed
10

Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
11
12
    const userId = sessionStorage.getItem('userId');

Soo Hyun Kim's avatar
Soo Hyun Kim committed
13
14
15
16
17
    function handleChange(event) {
        const { name, value } = event.target
        setEnterCode(value)
        console.log(enterCode)
    }
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
18

Soo Hyun Kim's avatar
Soo Hyun Kim committed
19
20
21
22
    async function handleSubmit(event) {
        event.preventDefault()
        try {
            setError('')
Soo Hyun Kim's avatar
Soo Hyun Kim committed
23
            let res = await axios.post('/room/enterRoom', { enterCode })
Soo Hyun Kim's avatar
Soo Hyun Kim committed
24
            await axios.put('/room/member', { userId: userId, roomId: enterCode })
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
25
26
            const response = await axios.get('/users/check', { params: { '_id': userId } })
            const userNick = response.data.nickname;
Soo Hyun Kim's avatar
Soo Hyun Kim committed
27
            props.setRoomName(res.data)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
28
            props.setRoomCode(enterCode)
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
29
            props.setSysmsg(`${userNick}님이 들어왔습니다.`)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
30
            props.enterChatRoom(enterCode)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
31
32
            props.handleCloseEnter()
            props.handleChato()
Soo Hyun Kim's avatar
Soo Hyun Kim committed
33
            setEnterCode('')
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
34
        } catch (error) {
Soo Hyun Kim's avatar
Soo Hyun Kim committed
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
            catchErrors(error, setError)
        }
    }

    return (
        <>
            <Modal show={props.showEnter} onHide={props.handleCloseEnter}>
                <Modal.Header closeButton>
                    <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={handleSubmit}>
                        <Form.Group as={Row} controlId="formCodeE">
                            <Form.Label column sm={4}>참여 코드</Form.Label>
                            <Col>
                                <Form.Control name='roomCode' type='text' value={enterCode} onChange={handleChange} />
                            </Col>
                        </Form.Group>
                        <Form.Group as={Row}>
                            <Col sm={{ span: 5, offset: 4 }}>
Choi Ga Young's avatar
Choi Ga Young committed
55
                                <Button type="submit" style={{backgroundColor:"#9174ad", borderColor:"#9174ad"}} >참가</Button>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
56
57
58
59
60
61
62
63
64
65
                            </Col>
                        </Form.Group>
                    </Form>
                </Modal.Body>
            </Modal>
        </>
    )
}

export default EnterRoom