diff --git a/client/src/Components/Chat.js b/client/src/Components/Chat.js index a5a7aab484d11beb1ece679cbfaa3b3bed769514..3df287b954ce19263e98d48fb3a13daade2cc58a 100644 --- a/client/src/Components/Chat.js +++ b/client/src/Components/Chat.js @@ -4,15 +4,23 @@ import { Form, Button, Row, Image, Col, Container } from 'react-bootstrap'; import { isAuthenticated } from '../utils/auth'; import catchErrors from '../utils/catchErrors'; -function Chat(props) { - // let defaultname = sessionStorage.getItem('name'); - const [sender, setSender] = useState([]) +const INIT_CHAT = { + msg: '', + sender: '', + img: '', + time: '' +} +function Chat(props) { + //const [sender, setSender] = useState([]) + //const [roomName, setRoomName] = useState('') const [inner, setInner] = useState(['']) - const [chat, setChat] = useState([]) //object로 key는 보낸사람 value는 메세지 + const [chat, setChat] = useState([INIT_CHAT]) //object로 key는 보낸사람 value는 메세지 - const [img, setImg] = useState([]) + const simpleTime = new Date().toLocaleTimeString() + const usualTime = simpleTime.substring(0, simpleTime.length - 3) + const realTime = new Date().toISOString() const [disabled, setDisabled] = useState(true) const [user, setUser] = useState('') @@ -35,15 +43,16 @@ function Chat(props) { e.preventDefault() setInner(e.target.value) setDisabled(false) + //console.log(chat) } function sendMsgCH(e) { e.preventDefault() + props.setSingleTime(usualTime) props.setSingleImg(user.profileimg) props.setSingleUser(user.nickname) props.setSingleChat(inner) - props.sendMsg(e) setInner('') setDisabled(true) @@ -52,40 +61,73 @@ function Chat(props) { function handleClick() { props.closeChatRoom(props.roomCode) props.setRecievedMsg('') - console.log(chat) props.handleChatc() + props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }]) + console.log('나간시간', realTime, usualTime) + setChat(['']) + + props.handleChatc() + props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }]) + } + + function settingtime(hour) { + let newhour = parseInt(hour) + 9 + if (newhour >= 24) { + newhour -= 24 + } + if (newhour >= 13) { + newhour -= 12 + newhour = '오후 ' + newhour + } else { + newhour = '오전 ' + newhour + } + return newhour } - async function exitAndCloseRoom(){ + //이전 채팅 내용에 대한 것 불러오기 + //프사 닉네임 메세지가 각각의 배열로 들어가서 띄워지는 방식 + async function getPreviousChat() { + const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } }) + console.log(respond) + const info = respond.data + + let intochat = [] + for (let prop in info) { + let hour = info[prop].createdAt.split('T')[1].split(':') + hour = settingtime(hour[0]) + ':' + hour[1] + intochat.push({ msg: info[prop].message, sender: info[prop].username, img: info[prop].profileimg, time: hour }) + } + setChat(intochat) + } + + async function exitAndCloseRoom() { props.exitRoom(props.roomCode) setExit(false) props.handleChatc() } - useEffect(() => { getProfile(userId) }, [userId]) useEffect(() => { - setImg([...img, props.singleImg]) - setSender([...sender, props.singleUser]) - setChat([...chat, props.singleChat]) - console.log('chat', chat) - console.log('sender', sender) + setChat([...chat, { msg: props.singleChat, sender: props.singleUser, img: props.singleImg, time: props.singleTime }]) }, [props.singleChat]) useEffect(() => { - setImg([...img, props.recievedImg]) - setSender([...sender, props.recievedUser]) - setChat([...chat, props.recievedMsg]) + setChat([...chat, { msg: props.recievedMsg, sender: props.recievedUser, img: props.recievedImg, time: props.recievedTime }]) }, [props.recievedMsg]) - const time = new Date().toLocaleTimeString() + useEffect(() => { + getPreviousChat() + // console.log('겟 룸네임', chat) + }, [props.roomCode]) + + return ( <> - - + + @@ -103,30 +145,35 @@ function Chat(props) { : null} -

{props.newUser}님이 입장하셨습니다.

{chat.map((value, index) => { - if (!(value == '')) { - if (!(sender[index] === user.nickname)) { + if (!(value.msg === '')) { + if (value.sender === "system") { + return ( + + {value.msg} + + ) + } else if (!(value.sender === user.nickname)) { return ( - + - {sender[index]} + {value.sender} - {value} - {time} + {value.msg} + {value.time} ) } else { - return ( + return ( //내가 보낸 메시지 - {time} - {value} + {value.time} + {value.msg} ) @@ -140,9 +187,8 @@ function Chat(props) {
- -
diff --git a/client/src/Components/ClosedList.js b/client/src/Components/ClosedList.js index cf28d54590b65f67fa940b12918fc741fd878b54..0666c34f9fdf12b0f54b6823c82a2e18b9df3975 100644 --- a/client/src/Components/ClosedList.js +++ b/client/src/Components/ClosedList.js @@ -1,23 +1,17 @@ -import React, { useState, useEffect } from 'react' -import { ListGroup } from 'react-bootstrap'; -import axios from 'axios' +import React from 'react' +import { Badge, ListGroup } from 'react-bootstrap'; +const INIT_LIST = [{ + interest: '', + isOpen: '', + memeber: [], + roomId: '', + roomName: '', +}] function ClosedList(props) { - const [list, setList] = useState([]); - - useEffect(() => { - getClosedList(); - }, [props.roomCode]); - - async function getClosedList() { - const userid = sessionStorage.getItem('userId') - let res = await axios.get('/room/closedlist', { params: { '_id': userid } }) - setList(res.data) - } - function enterChatRoomCH(e) { - if (props.roomCode){ + if (props.roomCode) { props.closeChatRoom(props.roomCode) } const roomCode = e.target.name @@ -25,18 +19,57 @@ function ClosedList(props) { props.enterChatRoom(roomCode) props.setRoomCode(roomCode) props.setRoomName(roomName) + + // console.log('rrrrrrrrrrrrrrr', props.closedlist) + // console.log('1111111111111111111', props.leaveInfo, typeof (props.leaveInfo)) } + // const [checknew, setChecknew] = useState([]) + // const [unreadnumber, setUnreadnumber] = useState(['']) + // async function dbChat() { + // for (let i = 0; i <= props.closedlist.length - 1; i++) { + // const respond = await axios.get('/room/dbChat', { params: { 'roomId': props.closedlist[i].roomId } }) + // setChecknew(respond.data) + // } + // } + // useEffect(() => { + // dbChat() + // }, [props.singleChat, props.recievedMsg]) + + // useEffect(() => { + // // console.log('chat 클라이언트 변경!') + // unreadMessage() + // }, [checknew]) + + // async function unreadMessage() { + // //여기서 나간시간과 db의 메세지와 시간비교해서 개수를 count해주면 됨 + // //물론 그 방 별로 찾아서 list를 맵써서 하던? + // // console.log('ddddddddd', list[0].roomId) + + // setUnreadnumber(['']) + // let arr = [] + // for (let i = 0; i <= props.closedlist.length - 1; i++) { + // const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': props.closedlist[i].roomId } }) + // // setUnreadnumber([...unreadnumber, respond.data]) + // arr = [...arr, respond.data] + // } + // setUnreadnumber(arr) + // // console.log('클라이언트 클로즈드 카운드', unreadnumber, list.length) + + // } + return (
- {list.map((item, index) => - + {props.closedlist.map((item, index) => + {item.roomName} + {/* {[index] ? {unreadnumber[index]} : ''} */} - )} -
+ ) + } + ) } diff --git a/client/src/Components/EnterRoom.js b/client/src/Components/EnterRoom.js index 0473b21e64ae524be4b818ba3766268d21179c53..f679d310e0d337b2da5dbaaa6e416009b6cc8a47 100644 --- a/client/src/Components/EnterRoom.js +++ b/client/src/Components/EnterRoom.js @@ -8,28 +8,30 @@ function EnterRoom(props) { const [enterCode, setEnterCode] = useState(''); const [error, setError] = useState(''); - const userId = sessionStorage.getItem('userId'); //sessionStorage에 저장된 userId가져옴 - - + const userId = sessionStorage.getItem('userId'); + function handleChange(event) { const { name, value } = event.target setEnterCode(value) console.log(enterCode) } - + async function handleSubmit(event) { event.preventDefault() try { setError('') let res = await axios.post('/room/enterRoom', { enterCode }) await axios.put('/room/member', { userId: userId, roomId: enterCode }) + const response = await axios.get('/users/check', { params: { '_id': userId } }) + const userNick = response.data.nickname; props.setRoomName(res.data) props.setRoomCode(enterCode) + props.setSysmsg(`${userNick}님이 들어왔습니다.`) props.enterChatRoom(enterCode) props.handleCloseEnter() props.handleChato() setEnterCode('') - } catch (error){ + } catch (error) { catchErrors(error, setError) } } diff --git a/client/src/Components/Menu.js b/client/src/Components/Menu.js index f4caf3a0427132ca3b91fd21983a6d8ec1380ef9..15ad44070511e940538e59bfbc9986a58f10b5a3 100644 --- a/client/src/Components/Menu.js +++ b/client/src/Components/Menu.js @@ -1,5 +1,5 @@ import React from 'react' -import { Navbar, Nav, Button } from 'react-bootstrap'; +import { Navbar, Nav } from 'react-bootstrap'; import { handleLogout } from '../utils/auth'; @@ -8,22 +8,27 @@ function Menu() { const name = sessionStorage.getItem('name'); return ( - - YDK Messenger - {name ? - <> -
{name}님 환영합니다
- - - - : } + +
+ YDK Messenger + {name ? + <> + + + : <> + + } +
) } + export default Menu diff --git a/client/src/Components/OpenList.js b/client/src/Components/OpenList.js index 83a809ea5b5a890cd20711677d28105990a9eb8e..062517a1a62cba33fe895d09eb3340d9968087c1 100644 --- a/client/src/Components/OpenList.js +++ b/client/src/Components/OpenList.js @@ -1,19 +1,7 @@ -import React, { useState, useEffect } from 'react' +import React from 'react' import { ListGroup } from 'react-bootstrap'; -import axios from 'axios' function OpenList(props) { - const [openlist, setOpenlist] = useState([]) - - useEffect(() => { - getOpenList(); - }, [props.roomCode]); - - async function getOpenList() { - let res = await axios.get('/room/openlist') - setOpenlist(res.data) - } - function enterChatRoomCH(e) { if (props.roomCode){ @@ -30,7 +18,7 @@ function OpenList(props) { return (
- {openlist.map((item, index) => + {props.openlist.map((item, index) => {item.roomName} diff --git a/client/src/Components/RoomMake.js b/client/src/Components/RoomMake.js index 97eab6b6a7827aa9626f077ba542fbc0979c40ab..ffa8e5db06149cdffe0f6fdf1d4387cec11a3451 100644 --- a/client/src/Components/RoomMake.js +++ b/client/src/Components/RoomMake.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React, { useState } from 'react' import axios from 'axios'; import { Row, Col, Modal, Button, Form, Alert } from 'react-bootstrap'; import catchErrors from '../utils/catchErrors'; @@ -11,19 +11,13 @@ const INIT_ROOM = { function RoomMake(props) { const [room, setRoom] = useState(INIT_ROOM); - const [disabled, setDisabled] = useState(true); const [error, setError] = useState(''); - useEffect(() => { - const isRoom = Object.values(room).every(el => Boolean(el)) - isRoom ? setDisabled(false) : setDisabled(true) - }, [room]) - const member = sessionStorage.getItem('userId'); function handleChange(event) { const { name, value } = event.target - setRoom({ ...room, [name]: value , member}) - console.log(room) + setRoom({ ...room, [name]: value, member }) + // console.log(room) } async function handleSubmit(event) { @@ -36,7 +30,7 @@ function RoomMake(props) { props.handleCloseModal() props.handleChato() setRoom(INIT_ROOM) - } catch (error){ + } catch (error) { catchErrors(error, setError) } } diff --git a/client/src/Pages/HomePage.js b/client/src/Pages/HomePage.js index 527116c1bd0a0901fa51736099aee4222b4027ad..e97d6a3d9992f6a173899a1c10bfc78d079fd375 100644 --- a/client/src/Pages/HomePage.js +++ b/client/src/Pages/HomePage.js @@ -1,7 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Row, Col, Button, Navbar, Nav } from 'react-bootstrap'; -import Tabs from 'react-bootstrap/Tabs'; -import Tab from 'react-bootstrap/Tab'; +import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap'; import ClosedList from '../Components/ClosedList'; import OpenList from '../Components/OpenList'; import Menu from '../Components/Menu'; @@ -19,10 +17,17 @@ const INIT_ROOM = { roomId: '', member: '', } +const INIT_LIST = [{ + interest: '', + isOpen: '', + memeber: [], + roomId: '', + roomName: '', +}] function Home() { const userName = sessionStorage.getItem('name') - const userId = sessionStorage.getItem('userId'); + const userId = sessionStorage.getItem('userId') const [showModal, setShowModal] = useState(false); const [showEnter, setShowEnter] = useState(false); @@ -35,7 +40,7 @@ function Home() { const [singleChat, setSingleChat] = useState('') const [recievedMsg, setRecievedMsg] = useState('') const [roomCode, setRoomCode] = useState('') - const [newUser, setNewUser] = useState('') + const [sysmsg, setSysmsg] = useState('') const [roomName, setRoomName] = useState('') const [singleUser, setSingleUser] = useState('') @@ -44,25 +49,27 @@ function Home() { const [singleImg, setSingleImg] = useState('') const [recievedImg, setRecievedImg] = useState('') + const [singleTime, setSingleTime] = useState('') + const [recievedTime, setRecievedTime] = useState('') + const [leaveInfo, setLeaveInfo] = useState([{ roomName: "", leaveTime: "" }]) + const handleCloseModal = () => setShowModal(false); const handleShowModal = () => setShowModal(true); const handleCloseEnter = () => setShowEnter(false); const handleShowEnter = () => setShowEnter(true); const handleChato = () => setChat(true); const handleChatc = () => setChat(false); + const [closedlist, setClosedList] = useState(INIT_LIST); + const [openlist, setOpenlist] = useState([]) - - //SOCKET 방 enter, close, exit event - function enterChatRoom(rCode) { //방 입장하기 + //SOCKET 관련 시작 + async function enterChatRoom(rCode) { //방 입장하기 socket.emit('joinRoom', rCode) socket.emit('newUser', { rmIf: rCode, userInfo: userName }) console.log(`joinRoom : ${rCode} 입장`) + //여기서 채팅 불러와서 넘겨주던가 해야할거 같은데 } - socket.on("sendUser", (data) => { - setNewUser(data) - }) - function closeChatRoom(rCode) { socket.emit('closeRoom', rCode) console.log(`${rCode}방 보기 중단`) @@ -74,13 +81,22 @@ function Home() { setRoomCode("") } + async function getClosedList() { + const userid = sessionStorage.getItem('userId') + let res = await axios.get('/room/closedlist', { params: { '_id': userid } }) + setClosedList(res.data) + } + + async function getOpenList() { + let res = await axios.get('/room/openlist') + console.log('getOpenlist', res.data) + setOpenlist(res.data) + } + //오픈채팅방에서 참가하기 async function openListroom(roomId) { console.log(roomId) const roomInf = await axios.get('/room/changeMem', { params: { 'roomId': roomId } }) - console.log(roomInf) - console.log(roomInf.data) - console.log(roomInf.data[0]) setRoom(roomInf.data[0]) setOpen(true) setShow(false) @@ -89,8 +105,11 @@ function Home() { async function attendListRoom() { const roomId = room.roomId const tf = await axios.put('/room/changeMem', { userId: userId, roomId: roomId }) + const response = await axios.get('/users/check', { params: { '_id': userId } }) + const userNick = response.data.nickname; if (tf.data) { alert('참가되었습니다.') + setSysmsg(`${userNick}님이 들어왔습니다.`) } else { alert('이미 참가된 방입니다.') } @@ -103,24 +122,42 @@ function Home() { e.preventDefault() } + useEffect(() => { + getClosedList(); + getOpenList(); + }, [roomCode]); useEffect(() => { - if (!(singleChat == "")) { + if (!(singleChat === "")) { socket.emit("chat", { roomInfo: roomCode, sendInfo: { msg: singleChat, sender: singleUser, - img: singleImg + img: singleImg, + time: singleTime } }) setSingleChat("") } }, [singleChat]) + useEffect(() => { + if (!(sysmsg === '')) { + socket.emit("chat", { + roomInfo: roomCode, + sendInfo: { + msg: sysmsg, + sender: "system", + } + }) + setSysmsg('') + } + }, [sysmsg]) useEffect(() => { socket.on("sendedMSG", (sendInfo) => { + setRecievedTime(sendInfo.time) setRecievedImg(sendInfo.img) setRecievedUser(sendInfo.sender) setRecievedMsg(sendInfo.msg) @@ -139,10 +176,10 @@ function Home() { @@ -155,12 +192,12 @@ function Home() { {(show || chat) ? null :
- - + +
} {chat ? - + : null} {open ?
@@ -171,8 +208,8 @@ function Home() {
▷ 참여인원 : {room.member.length}
▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}
- - + +
@@ -182,10 +219,9 @@ function Home() { - + ); } -export default Home; - +export default Home; \ No newline at end of file diff --git a/client/src/Pages/LogInPage.js b/client/src/Pages/LogInPage.js index d49d9d516dcc9cb0bff4de62c9c58dca8acd6a91..501297dca3628eec222a847fe68cb91eaa6415d6 100644 --- a/client/src/Pages/LogInPage.js +++ b/client/src/Pages/LogInPage.js @@ -1,8 +1,8 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios' -import { Button, Form, Container, Navbar, Spinner, Alert } from 'react-bootstrap'; +import { Button, Form, Container, Spinner, Alert } from 'react-bootstrap'; import catchErrors from '../utils/catchErrors' -import { Link, Redirect } from 'react-router-dom' +import { Redirect } from 'react-router-dom' import { handleLogin } from '../utils/auth' import Menu from '../Components/Menu'; @@ -91,11 +91,12 @@ function LogIn() { {error && {error} diff --git a/client/src/Pages/ProfilePage.js b/client/src/Pages/ProfilePage.js index 310c8f44fddc670c10a445eedcbb056ac07476ef..f23d3583c723e3dead3cb49319ab2e666929941b 100644 --- a/client/src/Pages/ProfilePage.js +++ b/client/src/Pages/ProfilePage.js @@ -113,7 +113,7 @@ function ProfilePage() {
- +
@@ -123,9 +123,9 @@ function ProfilePage() {
- + - +
diff --git a/client/src/Pages/SignUpPage.js b/client/src/Pages/SignUpPage.js index 699f21f5f3d96c1edf2d49379067e272959cc9d3..b368da0c596797f169c2550a16ee3647f3d9522e 100644 --- a/client/src/Pages/SignUpPage.js +++ b/client/src/Pages/SignUpPage.js @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios' -import { Button, Form, Container, Alert, Navbar } from 'react-bootstrap'; +import { Button, Form, Container, Alert, Spinner} from 'react-bootstrap'; import catchErrors from '../utils/catchErrors'; import { Redirect } from 'react-router-dom'; import Menu from '../Components/Menu'; @@ -17,7 +17,8 @@ function SingUp() { const [user, setUser] = useState(INIT_USER) const [error, setError] = useState('') const [disabled, setDisabled] = useState(true) - const [success, setSuccess] = useState(false) + const [success, setSuccess] = useState(false) + const [loading, setLoading] = useState(false) useEffect(() => { const isUser = Object.values(user).every(el => Boolean(el)) @@ -32,22 +33,15 @@ function SingUp() { async function handleSubmit(event) { event.preventDefault(); - //빈문자열 입력 시 오류 문자 출력 - //const form = event.currentTarget; - //if (form.checkValidity() === false) { - // event.preventDefault(); - // event.stopPropagation(); - // //event.stopPropagation() : 이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다. - //} - //setValidated(true); - // console.log(user) - try { + setLoading(true) setError('') await axios.post('/users/signup', user) setSuccess(true) } catch (error) { catchErrors(error, setError) + } finally { + setLoading(false) } } @@ -57,11 +51,9 @@ function SingUp() { return } - return ( <> -
@@ -127,10 +119,12 @@ function SingUp() { + style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }} + block> + {loading &&