EnterRoom.js 3.1 KB
Newer Older
Soo Hyun Kim's avatar
Soo Hyun Kim committed
1
2
import React, { useState } from 'react'
import axios from 'axios';
Soo Hyun Kim's avatar
ppt    
Soo Hyun Kim committed
3
import { Row, Col, Modal, Button, Form, Alert } 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('');
10
    const realTime = new Date().toISOString()
Soo Hyun Kim's avatar
Soo Hyun Kim committed
11

Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
12
    const userId = sessionStorage.getItem('userId');
13
14
15
    async function recordEntryLog() {
        const leaveInfo = { userId: userId, roomCode: enterCode, leaveTime: realTime }
        try {
Soo Hyun Kim's avatar
ppt    
Soo Hyun Kim committed
16
17
18
19
20
21
            const check = await axios.get('/room/entrylog', { params: leaveInfo })
            if (check.data) {       //있으면 put으로
                await axios.put('/room/entrylog', leaveInfo)
            } else {        //없으면 post
                await axios.post('/room/entrylog', leaveInfo)
            }
22
        } catch (error) {
Soo Hyun Kim's avatar
ppt    
Soo Hyun Kim committed
23
            catchErrors(error, setError)
24
        }
Soo Hyun Kim's avatar
ppt    
Soo Hyun Kim committed
25
26

    }
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
27

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

    return (
        <>
            <Modal show={props.showEnter} onHide={props.handleCloseEnter}>
                <Modal.Header closeButton>
                    <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
                </Modal.Header>
Soo Hyun Kim's avatar
ppt    
Soo Hyun Kim committed
60
61
62
                {error && <Alert variant='danger'>
                    {error}
                </Alert>}
Soo Hyun Kim's avatar
Soo Hyun Kim committed
63
64
65
66
67
68
69
70
71
72
                <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 }}>
Soo Hyun Kim's avatar
ppt    
Soo Hyun Kim committed
73
                                <Button type="submit" style={{ backgroundColor: "#9174ad", borderColor: "#9174ad" }} >참가</Button>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
74
75
76
77
78
79
80
81
82
83
                            </Col>
                        </Form.Group>
                    </Form>
                </Modal.Body>
            </Modal>
        </>
    )
}

export default EnterRoom