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

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

우지원's avatar
우지원 committed
16
const INIT_ROOM = {
17
18
19
20
  roomName: '',
  interest: '',
  roomId: '',
  member: '',
우지원's avatar
우지원 committed
21
}
22
23
24
25
26
27
28
const INIT_LIST = [{
  interest: '',
  isOpen: '',
  memeber: [],
  roomId: '',
  roomName: '',
}]
29
30
31
32
const INIT_UNREAD = {
  roomCode: '',
  unreadcount: '',
}
우지원's avatar
우지원 committed
33

우지원's avatar
ul    
우지원 committed
34
function Home() {
35
  const userName = sessionStorage.getItem('name')
Choi Ga Young's avatar
x    
Choi Ga Young committed
36
  const userId = sessionStorage.getItem('userId')
37

38
39
40
  const [checknew, setChecknew] = useState('')
  const [unreadnumber, setUnreadnumber] = useState(INIT_UNREAD)

JeongYeonwoo's avatar
JeongYeonwoo committed
41
  const [showModal, setShowModal] = useState(false);
Choi Ga Young's avatar
dmdk    
Choi Ga Young committed
42
  const [showEnter, setShowEnter] = useState(false);
JeongYeonwoo's avatar
JeongYeonwoo committed
43
  const [chat, setChat] = useState(false);
44
45
  const [open, setOpen] = useState(false);
  const [room, setRoom] = useState(INIT_ROOM)
46
  const [show, setShow] = useState(false)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
47

JeongYeonwoo's avatar
JeongYeonwoo committed
48
49
50
51
  //소켓
  const [singleChat, setSingleChat] = useState('')
  const [recievedMsg, setRecievedMsg] = useState('')
  const [roomCode, setRoomCode] = useState('')
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
52
  const [sysmsg, setSysmsg] = useState('')
Soo Hyun Kim's avatar
Soo Hyun Kim committed
53
  const [roomName, setRoomName] = useState('')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
54

JeongYeonwoo's avatar
JeongYeonwoo committed
55
56
  const [singleUser, setSingleUser] = useState('')
  const [recievedUser, setRecievedUser] = useState('')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
57

JeongYeonwoo's avatar
JeongYeonwoo committed
58
59
60
  const [singleImg, setSingleImg] = useState('')
  const [recievedImg, setRecievedImg] = useState('')

61
62
63
  const [singleTime, setSingleTime] = useState('')
  const [recievedTime, setRecievedTime] = useState('')

Choi Ga Young's avatar
Choi Ga Young committed
64
65
66
67
68
69
  const handleCloseModal = () => {
    setShowModal(false);
    getClosedList()
    getOpenList()

  }
JeongYeonwoo's avatar
JeongYeonwoo committed
70
  const handleShowModal = () => setShowModal(true);
71
72
  const handleCloseEnter = () => setShowEnter(false);
  const handleShowEnter = () => setShowEnter(true);
JeongYeonwoo's avatar
JeongYeonwoo committed
73
74
  const handleChato = () => setChat(true);
  const handleChatc = () => setChat(false);
75
76
  const [closedlist, setClosedList] = useState(INIT_LIST);
  const [openlist, setOpenlist] = useState([])
77

78
  //SOCKET 관련 시작
Choi Ga Young's avatar
x    
Choi Ga Young committed
79
  async function enterChatRoom(rCode) {    //방 입장하기
80
81
    socket.emit('joinRoom', rCode)
    socket.emit('newUser', { rmIf: rCode, userInfo: userName })
우지원's avatar
오픈    
우지원 committed
82
    setShow(true)
83
    console.log(`joinRoom : ${rCode} 입장`)
우지원's avatar
오픈    
우지원 committed
84
    console.log('show:', show)
85
    //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데
86
    console.log('HomePage/enterChatRoom 끝났습니다')
87
  }
Soo Hyun Kim's avatar
Soo Hyun Kim committed
88

Soo Hyun Kim's avatar
Soo Hyun Kim committed
89
90
91
92
  function closeChatRoom(rCode) {
    socket.emit('closeRoom', rCode)
    console.log(`${rCode}방 보기 중단`)
  }
Choi Ga Young's avatar
Choi Ga Young committed
93

94

Soo Hyun Kim's avatar
Soo Hyun Kim committed
95
  async function exitRoom(roomId) {
Choi Ga Young's avatar
퇴장    
Choi Ga Young committed
96
97
    const response = await axios.get('/users/check', { params: { '_id': userId } })
    const userNick = response.data.nickname;
Soo Hyun Kim's avatar
Soo Hyun Kim committed
98
    await axios.put('/room/deleteMem', { userId: userId, roomId: roomId })
Choi Ga Young's avatar
퇴장    
Choi Ga Young committed
99
    setSysmsg(`${userNick}님이 나갔습니다.`)
Soo Hyun Kim's avatar
Soo Hyun Kim committed
100
101
    setRoomCode("")
  }
JeongYeonwoo's avatar
JeongYeonwoo committed
102

103
104
105
  async function getClosedList() {
    const userid = sessionStorage.getItem('userId')
    let res = await axios.get('/room/closedlist', { params: { '_id': userid } })
106
    // console.log('getClosedList',res.data)
107
108
109
110
111
112
113
114
    setClosedList(res.data)
  }

  async function getOpenList() {
    let res = await axios.get('/room/openlist')
    setOpenlist(res.data)
  }

115
116
117
118
  async function openListroom(roomId) {
    const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } })
    setRoom(roomInf.data[0])
    setShow(false)
우지원's avatar
오픈    
우지원 committed
119
    setOpen(true)
120
  }
Choi Ga Young's avatar
Choi Ga Young committed
121
  //오픈채팅방에서 참가하기
122
123
124
  async function attendListRoom() {
    const roomId = room.roomId
    const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId })
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
125
126
    const response = await axios.get('/users/check', { params: { '_id': userId } })
    const userNick = response.data.nickname;
127
128
    if (tf.data) {
      alert('참가되었습니다.')
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
129
      setSysmsg(`${userNick}님이 들어왔습니다.`)
Choi Ga Young's avatar
Choi Ga Young committed
130
      getClosedList()
131
132
    } else {
      alert('이미 참가된 방입니다.')
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
133
    }
134
135
136
137
138
  }

  function enterButton() {
    setOpen(false)
  }
Choi Ga Young's avatar
Choi Ga Young committed
139
140
141
142
  const sendMsg = (e) => {
    e.preventDefault()
  }

143
144
145
146
  useEffect(() => {
    getClosedList();
    getOpenList();
  }, [roomCode]);
Choi Ga Young's avatar
Choi Ga Young committed
147

JeongYeonwoo's avatar
JeongYeonwoo committed
148
  useEffect(() => {
Choi Ga Young's avatar
Choi Ga Young committed
149
    if (!(singleChat === "")) {
JeongYeonwoo's avatar
JeongYeonwoo committed
150
151
      socket.emit("chat", {
        roomInfo: roomCode,
152
153
154
        sendInfo: {
          msg: singleChat,
          sender: singleUser,
155
156
          img: singleImg,
          time: singleTime
157
        }
JeongYeonwoo's avatar
JeongYeonwoo committed
158
      })
Soo Hyun Kim's avatar
Soo Hyun Kim committed
159
      setSingleChat("")
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
160
    }
JeongYeonwoo's avatar
JeongYeonwoo committed
161
  }, [singleChat])
Soo Hyun Kim's avatar
soo0115    
Soo Hyun Kim committed
162

Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
163
  useEffect(() => {
Choi Ga Young's avatar
Choi Ga Young committed
164
    if (!(sysmsg === '')) {
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
165
166
167
168
169
170
171
172
173
174
175
      socket.emit("chat", {
        roomInfo: roomCode,
        sendInfo: {
          msg: sysmsg,
          sender: "system",
        }
      })
      setSysmsg('')
    }
  }, [sysmsg])

176
177


178
179
180
181
182
183
184
  const INIT_LEFT = {
    userId: '',
    roomCode: '',
    now: '',
  }
  const [leftInfo, setLeftInfo] = useState(INIT_LEFT)

185
186
  async function unreadMessage() {
    const userId = sessionStorage.getItem('userId')
187
    let leaveInfo = []
188
189
190
191
192
193
    try {
      for (let i = 0; i < closedlist.length; i++) {
        leaveInfo.push({ userId: userId, roomCode: closedlist[i].roomId, now: 0 })
      }
      for (let i = 0; i < closedlist.length; i++) {
        if (leaveInfo[i].roomCode === roomCode) {
194
          leaveInfo[i].now = '보는중'
195
196
197
198
199
200
201
        } else {
          leaveInfo[i].now = 0
        }
      }
      setUnreadnumber([''])
      const respond = await axios.get('/room/unreadMessage', { params: leaveInfo })
      setUnreadnumber(respond.data)
202
      setLeftInfo(leaveInfo)
203
204
205
206
207
    } catch (error) {
      console.log(error)
    }
  }

JeongYeonwoo's avatar
JeongYeonwoo committed
208
  useEffect(() => {
Choi Ga Young's avatar
Choi Ga Young committed
209
    socket.on("sendedMSG", (sendInfo) => {
210
      setRecievedTime(sendInfo.time)
JeongYeonwoo's avatar
JeongYeonwoo committed
211
212
213
      setRecievedImg(sendInfo.img)
      setRecievedUser(sendInfo.sender)
      setRecievedMsg(sendInfo.msg)
214
215
216
217
    })
    socket.on('checking', (check) => {
      console.log('클라이언트', check)
      setChecknew(check)
Choi Ga Young's avatar
Choi Ga Young committed
218
    })
JeongYeonwoo's avatar
JeongYeonwoo committed
219
220
221
  }, [])

  return (
Soo Hyun Kim's avatar
Soo Hyun Kim committed
222
223
224
    <div style={{ weight: "100vw", height: "100vh", backgroundColor: "" }}>
      <Menu style={{ weight: "100%", height: "10%" }} />
      <Row className="mr-0" style={{ weight: "100%", height: "80%" }}>
JeongYeonwoo's avatar
JeongYeonwoo committed
225
        <Col className="list" md={5}>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
226
          <Sdiv chat={chat} open={open}>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
227
228
            <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
              <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
229
                <ClosedList closedlist={closedlist} leftInfo={leftInfo} checknew={checknew} unreadMessage={unreadMessage} unreadnumber={unreadnumber} setUnreadnumber={setUnreadnumber} userId={userId} singleChat={singleChat} recievedMsg={recievedMsg} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
Soo Hyun Kim's avatar
Soo Hyun Kim committed
230
231
232
233
234
235
              </Tab>
              <Tab eventKey="open" title="공개방" onClick={handleChatc}>
                <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
              </Tab>
            </Tabs>
          </Sdiv>
JeongYeonwoo's avatar
JeongYeonwoo committed
236
        </Col>
Soo Hyun Kim's avatar
Soo Hyun Kim committed
237
        <Col style={{ padding: "5px", marginLeft: "15px" }}>
우지원's avatar
오픈    
우지원 committed
238
          {show ? <>
Choi Ga Young's avatar
Choi Ga Young committed
239
            {chat ? <Chat leftInfo={leftInfo} setLeftInfo={setLeftInfo} handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} singleTime={singleTime} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} recievedTime={recievedTime} setSingleChat={setSingleChat} setSingleUser={setSingleUser} setSingleImg={setSingleImg} setSingleTime={setSingleTime} setRecievedMsg={setRecievedMsg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} setRoomCode={setRoomCode} />
240
              : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
241
242
                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
우지원's avatar
오픈    
우지원 committed
243
              </div>} </>
우지원's avatar
우지원 committed
244
245
            : <> {open ? 
            <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
우지원's avatar
오픈    
우지원 committed
246
              <div className="d-flex justify-content-center">
우지원's avatar
우지원 committed
247
                <div className="mt-5 p-5 mr-2" style={{ display: "flex", flexDirection: "column", borderStyle: "solid", borderRadius: "5px", borderColor: "#4A5D7E", backgroundColor: "#FFFFFF", padding: '15px', position: "relative" }}>
우지원's avatar
오픈    
우지원 committed
248
249
250
251
252
253
254
255
                  <h2 className="d-flex justify-content-center mb-3">현재 {room.roomName} 입니다.</h2>
                  <h5> 관심분야 : {room.interest}</h5>
                  <h5> 참여인원 : {room.member.length}</h5>
                  <h5 className="mb-3"> 방코드(방코드를 통해서도 참여할  있습니다.) : {room.roomId}</h5>
                  <Row className='justify-content-center'>
                    <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
                    <Button variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9" }} size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
                  </Row>
256
257
                </div>
              </div>
우지원's avatar
오픈    
우지원 committed
258
259
260
261
            </div> : <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowModal} size="lg" block>생성</Button>
                <Button style={{ borderColor: "#9174ad", backgroundColor: "#9174ad", color: 'white' }} onClick={handleShowEnter} size="lg" block>참가</Button>
              </div>} </>}
JeongYeonwoo's avatar
JeongYeonwoo committed
262
263
264
        </Col>
      </Row>
      <RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
Choi Ga Young's avatar
xxxxx    
Choi Ga Young committed
265
      <EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} />
Soo Hyun Kim's avatar
Soo Hyun Kim committed
266
    </div>
JeongYeonwoo's avatar
JeongYeonwoo committed
267
  );
우지원's avatar
ul    
우지원 committed
268
269
}

Soo Hyun Kim's avatar
Soo Hyun Kim committed
270
271
const Sdiv = styled.div`
    @media screen and (max-width: 768px) {
Soo Hyun Kim's avatar
Soo Hyun Kim committed
272
273
     display: ${({ chat, open }) => {
    return (chat || open) ? 'none' : 'block'
Choi Ga Young's avatar
Choi Ga Young committed
274
  }}
Soo Hyun Kim's avatar
Soo Hyun Kim committed
275
276
277
   }
`

우지원's avatar
e    
우지원 committed
278
export default Home;