HomePage.js 8.06 KB
Newer Older
Soo Hyun Kim's avatar
Soo Hyun Kim committed
1
import React, { useState, useEffect } from 'react';
Soo Hyun Kim's avatar
Soo Hyun Kim committed
2
3
import axios from 'axios';
import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap';
우지원's avatar
ul    
우지원 committed
4
5
6
7
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';
import ClosedList from '../Components/ClosedList';
import OpenList from '../Components/OpenList';
Choi Ga Young's avatar
Choi Ga Young committed
8
import Menu from '../Components/Menu';
Soo Hyun Kim's avatar
Soo Hyun Kim committed
9
import catchErrors from '../utils/catchErrors';
10
import { io } from "socket.io-client";   //모듈 가져오기
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
11
import Chat from "../Components/Chat";
12

13
const socket = io();
우지원's avatar
ul    
우지원 committed
14

Soo Hyun Kim's avatar
Soo Hyun Kim committed
15
16
const INIT_ROOM = {
    roomName: '',
Soo Hyun Kim's avatar
Soo Hyun Kim committed
17
18
19
    interest: '',
    isOpen: false
}
우지원's avatar
ul    
우지원 committed
20
21

function Home() {
Soo Hyun Kim's avatar
Soo Hyun Kim committed
22
23
24
    const [show, setShow] = useState(false);
    const [show2, setShow2] = useState(false);
    const [chat, setChat] = useState(false);
Soo Hyun Kim's avatar
Soo Hyun Kim committed
25
    const [room, setRoom] = useState(INIT_ROOM);
Soo Hyun Kim's avatar
Soo Hyun Kim committed
26
    const [disabled, setDisabled] = useState(true);
Soo Hyun Kim's avatar
Soo Hyun Kim committed
27
    const [error, setError] = useState('');
Soo Hyun Kim's avatar
Soo Hyun Kim committed
28

Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
29
30
31
    const [singleChat, setSingleChat] = useState('')
    const [roomName, setRoomName] = useState('')

Soo Hyun Kim's avatar
Soo Hyun Kim committed
32
33
34
35
36
37
38
39
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
    const handleChato = () => setChat(true);
    const handleChatc = () => setChat(false);
    const handleClose2 = () => setShow2(false);
    const handleShow2 = () => setShow2(true);

    useEffect(() => {
Soo Hyun Kim's avatar
Soo Hyun Kim committed
40
41
42
        const isRoom = Object.values(room).every(el => Boolean(el))
        isRoom ? setDisabled(false) : setDisabled(true)
    }, [room])
Soo Hyun Kim's avatar
Soo Hyun Kim committed
43

Soo Hyun Kim's avatar
Soo Hyun Kim committed
44
45
    function handleChange(event) {
        const { name, value } = event.target
Soo Hyun Kim's avatar
Soo Hyun Kim committed
46
47
        setRoom({ ...room, [name]: value })
        console.log(room)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
48
49
    }

Soo Hyun Kim's avatar
Soo Hyun Kim committed
50
    async function handleSubmit(event) {
Soo Hyun Kim's avatar
Soo Hyun Kim committed
51
        event.preventDefault()
Soo Hyun Kim's avatar
Soo Hyun Kim committed
52
53
        try {
            setError('')
54
            await axios.post('/room/makeRoom', room)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
55
            setRoom(INIT_ROOM)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
56
57
58
        } catch (error){
            catchErrors(error, setError)
        }
Soo Hyun Kim's avatar
Soo Hyun Kim committed
59
60
    }

Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
    //SOCKET 관련 시작

    function enterChatroom(rName) {    //방 입장하기
        socket.emit('joinRoom', rName)
        console.log(`joinRoom : ${rName} 입장`)
    }

    const sendMsg = (e) => {
        e.preventDefault()
    }

    useEffect(() => {
        socket.emit("chat", {
            roomName: roomName,
            msg: singleChat
        })
        socket.on('broadcast', (msg) => {
            console.log(msg)
            setSingleChat(msg)
        })
    }, [singleChat])

Soo Hyun Kim's avatar
Soo Hyun Kim committed
83
84
85
86
87
88
89
    return (
        <>
            <Menu />
            <Row className="mr-0">
                <Col className="list" md={5}>
                    <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
                        <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
90
                            <ClosedList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
91
92
                        </Tab>
                        <Tab eventKey="open" title="공개방" >
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
93
                            <OpenList enterChatroom={enterChatroom} setRoomName={setRoomName}/>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
94
95
96
97
                        </Tab>
                    </Tabs>
                </Col>
                <Col style={{ padding: "0" }}>
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
98
                    {chat ? <Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} setSingleChat={setSingleChat} roomName={roomName}/> : null}
우지원's avatar
ul    
우지원 committed
99

Soo Hyun Kim's avatar
Soo Hyun Kim committed
100
101
102
103
                    <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                        <Button variant="primary" onClick={handleShow} size="lg" block>
                            생성
                        </Button>
우지원's avatar
ul    
우지원 committed
104

Soo Hyun Kim's avatar
Soo Hyun Kim committed
105
106
107
108
                        <Button variant="secondary" onClick={handleShow2} size="lg" block>
                            참가
                        </Button>
                    </div>
우지원's avatar
ul    
우지원 committed
109

Soo Hyun Kim's avatar
Soo Hyun Kim committed
110
111
112
113
                    <Modal show={show} onHide={handleClose}>
                        <Modal.Header closeButton>
                            <Modal.Title> 생성</Modal.Title>
                        </Modal.Header>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
114
115
116
                        {error && <Alert variant='danger'>
                            {error}
                        </Alert>}
Soo Hyun Kim's avatar
Soo Hyun Kim committed
117
118
119
120
121
                        <Modal.Body>
                            <Form onSubmit={handleSubmit}>
                                <Form.Group as={Row} controlId="chatName">
                                    <Form.Label column sm={4}> 이름</Form.Label>
                                    <Col>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
122
                                        <Form.Control name='roomName' type='text' value={room.roomName} onChange={handleChange} />
Soo Hyun Kim's avatar
Soo Hyun Kim committed
123
124
125
126
127
                                    </Col>
                                </Form.Group>
                                <Form.Group as={Row} controlId="chatInterest">
                                    <Form.Label column sm={4}>관심 분야</Form.Label>
                                    <Col>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
128
                                        <Form.Control as="select" defaultValue="Choose..." name='interest' type='text' value={room.interest} onChange={handleChange}>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
                                            <option>Choose...</option>
                                            <option>과학</option>
                                            <option>수학</option>
                                            <option>예술</option>
                                            <option>언어</option>
                                            <option>취미</option>
                                        </Form.Control>
                                        {/* <Form.Control type="text" /> */}
                                    </Col>
                                </Form.Group>
                                <Form.Group as={Row} controlId="chatIsOpen">
                                    <Form.Label column sm={4}>공개방</Form.Label>
                                    <Col>
                                        <Form.Check
                                            type="checkbox"
Soo Hyun Kim's avatar
Soo Hyun Kim committed
144
                                            checked={room.isOpen}
Soo Hyun Kim's avatar
Soo Hyun Kim committed
145
                                            name='isOpen'
Soo Hyun Kim's avatar
Soo Hyun Kim committed
146
                                            onChange={() => setRoom({ ...room, isOpen: !room.isOpen })} />
Soo Hyun Kim's avatar
Soo Hyun Kim committed
147
148
149
                                    </Col>
                                </Form.Group>
                                {
Soo Hyun Kim's avatar
Soo Hyun Kim committed
150
                                    (room.isOpen)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
151
152
153
154
155
156
157
158
159
160
161
                                        ? (<p><b>공개방</b>으로 개설되어 공개방 목록에 공개되며, 코드를 공유하여 참가할 수도 있습니다.</p>)
                                        : (<p><b>비밀방</b>으로 개설되며, 참여자들에게 코드를 공유해야합니다.</p>)
                                }
                                <Form.Group as={Row}>
                                    <Col sm={{ span: 5, offset: 4 }}>
                                        <Button type="submit" > 생성</Button>
                                    </Col>
                                </Form.Group>
                            </Form>
                        </Modal.Body>
                    </Modal>
우지원's avatar
ul    
우지원 committed
162

Soo Hyun Kim's avatar
Soo Hyun Kim committed
163
                    <Modal show={show2} onHide={handleClose2}>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
                        <Modal.Header closeButton>
                            <Modal.Title>참여 코드로 채팅 참가</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <Form onSubmit={() => { console.log('제출') }}>
                                <Form.Group as={Row} controlId="formCodeE">
                                    <Form.Label column sm={4}>참여 코드</Form.Label>
                                    <Col>
                                        <Form.Control type="text" />
                                    </Col>
                                </Form.Group>
                                <Form.Group as={Row}>
                                    <Col sm={{ span: 5, offset: 4 }}>
                                        <Button type="submit">참가</Button>
                                    </Col>
                                </Form.Group>
                            </Form>
                        </Modal.Body>
                    </Modal>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
183
184
185
186
                </Col>
            </Row>
        </>
    );
우지원's avatar
ul    
우지원 committed
187
188
189
}

export default Home;
190