Skip to content

GitLab

Commit 7b2efa8f authored by Soo Hyun Kim's avatar Soo Hyun Kim
Browse files

0126머지후

parents 650999ad 108b1b94
Hide whitespace changes
Inline Side-by-side
client/src/Components/Chat.js
View file @ 7b2efa8f
......@@ -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 (
<>
<Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "#BDBDBD", background: '' }}>
<Row className="justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "#FFD75F", height: "80px" }}>
<Container id="chat" style={{ overflow: 'auto', padding: '20px', border: "2px solid", height: "500px", margin: "1%", borderColor: "9174ad", background: '' }}>
<Row className="d-flex justify-content-center" style={{ border: "2px solid", borderWidth: "medium", borderColor: "9174ad", height: "80px", margin: "1%" }}>
<Col md="auto">
<Button variant="light" onClick={handleClick} >{`<`}</Button>
</Col>
......@@ -103,30 +145,35 @@ function Chat(props) {
<Col md="auto"><Button variant="light" onClick={exitAndCloseRoom} style={{fontWeight:"bold"}}>{"나가기"}</Button></Col>
</Row>
: null}
<p>{props.newUser}님이 입장하셨습니다.</p>
{chat.map((value, index) => {
if (!(value == '')) {
if (!(sender[index] === user.nickname)) {
if (!(value.msg === '')) {
if (value.sender === "system") {
return (
<Row className='border' style={{ background: "#FFFAFA" }}>
{value.msg}
</Row>
)
} else if (!(value.sender === user.nickname)) {
return (
<Row key={index} className='m-1' >
<Col xs={2}>
<Image src={img && `/images/${img[index]}`} style={{ width: "50px", height: "50px" }} roundedCircle />
<Image src={value.img && `/images/${value.img}`} style={{ width: "50px", height: "50px" }} roundedCircle />
</Col>
<Col xs={8}>
<Row><strong>{sender[index]}</strong></Row>
<Row><strong>{value.sender}</strong></Row>
<Row className='d-flex flex-wrap-nowrap'>
<Row className='border border-dark' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'white', borderRadius: '5px', fontSize: 'x-large' }}>{value}</Row>
<Col className='ml-1'>{time}</Col>
<Row className='border' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: '#f1ebf7', borderRadius: '5px', fontSize: 'x-large' }}>{value.msg}</Row>
<Col className='ml-1'>{value.time}</Col>
</Row>
</Col>
</Row>
)
} else {
return (
return ( //내가 보낸 메시지
<Row key={index} className='m-1 justify-content-end'>
<Row className='d-flex flex-wrap-nowrap' >
<Col className='mr-1'>{time}</Col>
<Row className='mr-2' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: 'yellow', borderRadius: '3px', fontSize: 'x-large' }}>{value}</Row>
<Col className='mr-1'>{value.time}</Col>
<Row className='mr-2' name='msg' style={{ width: 'max-content', maxWidth: '300px', height: 'auto', paddingLeft: '15px', paddingRight: '15px', background: "#d6c8e3", borderRadius: '3px', fontSize: 'x-large' }}>{value.msg}</Row>
</Row>
</Row>
)
......@@ -140,9 +187,8 @@ function Chat(props) {
</Container >
<Form onSubmit={sendMsgCH} fluid>
<Form.Group className='d-flex flex-wrap-nowrap justify-content-center m-3'>
<Form.Control className='border border-warning' name='chat' type="text" value={inner} onChange={handleChange} style={{ width: '85%' }} />
<Button variant="warning" type="submit" disabled={disabled} style={{ width: '10%' }}>
전송
<Form.Control name='chat' type="text" value={inner} onChange={handleChange} style={{ borderColor: "#9174ad" }} />
<Button className="ml-1" type="submit" disabled={disabled} style={{ width: '25%', backgroundColor: "#9174ad", borderColor: "#9174ad" }}>전송
</Button>
</Form.Group>
</Form>
......
client/src/Components/ClosedList.js
View file @ 7b2efa8f
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 (
<div>
{list.map((item, index) =>
<ListGroup key={index} >
{props.closedlist.map((item, index) =>
<ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
{item.roomName}
{/* {[index] ? <Badge className='ml-2' pill variant='danger'>{unreadnumber[index]}</Badge> : ''} */}
</ListGroup.Item>
</ListGroup>
)}
</div>
)
}
</div >
)
}
......
client/src/Components/EnterRoom.js
View file @ 7b2efa8f
......@@ -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)
}
}
......
client/src/Components/Menu.js
View file @ 7b2efa8f
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 (
<Navbar bg="dark" variant="dark">
<Navbar.Brand href="/home">YDK Messenger</Navbar.Brand>
{name ?
<>
<div className='ml-1 mr-2' style={{ color: 'white' }}>{name}님 환영합니다</div>
<Nav className="mr-auto">
<Nav.Link href="/profile">Profile</Nav.Link>
</Nav>
<Button className="ml-auto" onClick={() => handleLogout()} variant="light">Logout</Button>
</>
: <Nav className="ml-auto">
<Nav.Link href='/login'>로그인</Nav.Link>
<Nav.Link href='/signup'>회원가입</Nav.Link>
</Nav>}
<Navbar style={{ backgroundColor: "#61477a" }} variant="dark">
<div className="container-fluid">
<Navbar.Brand className="navbar-brand" href="/home">YDK Messenger</Navbar.Brand>
{name ?
<>
<Nav className="nav navbar-nav mr-auto" style={{ color: 'white' }}>
<Nav.Item className="mt-2 mr-4">{name}님 환영합니다</Nav.Item>
<Nav.Link href="/profile">Profile</Nav.Link>
<Nav.Link onClick={() => handleLogout()} href="/login">logout</Nav.Link>
</Nav>
</>
: <>
<Nav className="nav navbar-nav">
<Nav.Link href="/login">Login</Nav.Link>
<Nav.Link href="/signup">Signup</Nav.Link>
</Nav>
</>}
</div>
</Navbar>
)
}
export default Menu
client/src/Components/OpenList.js
View file @ 7b2efa8f
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 (
<div>
{openlist.map((item, index) =>
{props.openlist.map((item, index) =>
<ListGroup key={index}>
<ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId}>
{item.roomName}
......
client/src/Components/RoomMake.js
View file @ 7b2efa8f
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)
}
}
......
client/src/Pages/HomePage.js
View file @ 7b2efa8f
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() {
<Nav> */}
<Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
<Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
<ClosedList enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
<ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
</Tab>
<Tab eventKey="open" title="공개방" onClick={handleChatc}>
<OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
<OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
</Tab>
</Tabs>
{/* </Nav>
......@@ -155,12 +192,12 @@ function Home() {
{(show || chat) ?
null
: <div style={{ position: "fixed", bottom: "20px", right: "30px" }}>
<Button variant="primary" onClick={handleShowModal} size="lg" block>생성</Button>
<Button variant="secondary" onClick={handleShowEnter} size="lg" block>참가</Button>
<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>
}
{chat ?
<Chat handleChatc={handleChatc} sendMsg={sendMsg} singleChat={singleChat} singleUser={singleUser} singleImg={singleImg} recievedMsg={recievedMsg} recievedUser={recievedUser} recievedImg={recievedImg} setSingleChat={setSingleChat} setRecievedMsg={setRecievedMsg} setSingleUser={setSingleUser} setSingleImg={setSingleImg} roomCode={roomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} />
<Chat handleChatc={handleChatc} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} 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} />
: null}
{open ?
<div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">
......@@ -171,8 +208,8 @@ function Home() {
<h5>▷ 참여인원 : {room.member.length}</h5>
<h5 className="mb-3">▷ 방코드(방코드를 통해서도 참여할 수 있습니다.) : {room.roomId}</h5>
<Row className='justify-content-center'>
<Button variant="outline-warning" size="sm" className="mr-4" onClick={enterButton}>뒤로가기</Button>
<Button variant="outline-warning" size="sm" className="ml-4" type='submit' onClick={attendListRoom}>참가</Button>
<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>
</div>
</div>
......@@ -182,10 +219,9 @@ function Home() {
</Col>
</Row>
<RoomMake showModal={showModal} handleCloseModal={handleCloseModal} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} />
<EnterRoom showEnter={showEnter} enterChatRoom={enterChatRoom} handleCloseEnter={handleCloseEnter} handleChato={handleChato} setRoomCode={setRoomCode} setRoomName={setRoomName} sysmsg={sysmsg} setSysmsg={setSysmsg} />
</>
);
}
export default Home;
export default Home;
\ No newline at end of file
client/src/Pages/LogInPage.js
View file @ 7b2efa8f
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() {
<Button
disabled={disabled || loading}
type="submit"
variant="outline-success"
variant="outline"
size="lg"
className="mr-4"
style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' />} {' '} 로그인
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />} {' '} 로그인
</Button>
{error && <Alert variant='danger'>
{error}
......
client/src/Pages/ProfilePage.js
View file @ 7b2efa8f
......@@ -113,7 +113,7 @@ function ProfilePage() {
</Col>
<Col xs={3}>
<Form className="d-flex" onSubmit={handleSubmitHidVis}>
<Button className="ml-3 d-flex justify-content-end" variant="outline-primary" size="sm" type='submit'>수정</Button>
<Button className="ml-3 d-flex justify-content-end" variant="outline" style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white' }} size="sm" type='submit'>수정</Button>
</Form>
</Col>
</Row>
......@@ -123,9 +123,9 @@ function ProfilePage() {
</Row>
<Row className='m-3 justify-content-center'>
<Form onSubmit={handleSubmit}>
<Button variant="outline-success" size="sm" className="mr-4" type='submit'>저장</Button>
<Button variant="outline-success" size="sm" className="mr-4" type='submit' variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>저장</Button>
<Link to='/'>
<Button variant="outline-success" size="sm" className="ml-4" >홈 화면으로</Button>
<Button variant="outline-success" size="sm" className="ml-4" variant="outline" style={{ border: "3px solid", borderColor: "#9174ad", background: 'white' }}>홈 화면으로</Button>
</Link>
</Form>
</Row>
......
client/src/Pages/SignUpPage.js
View file @ 7b2efa8f
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 <Redirect to='/login' />
}
return (
<>
<Menu />
<Form onSubmit={handleSubmit} className='vh-100 flex-column align-items-center justify-content-center mt-2'>
<Container className="d-flex justify-content-center">
<div className="mt-5 p-5 shadow w-75">
......@@ -127,10 +119,12 @@ function SingUp() {
<Button
disabled={disabled}
type='submit'
variant="outline-success"
variant="outline"
size="lg"
className="mr-4"
block>가입</Button>
style={{ border: "3px solid", borderColor: "#b49dc9", background: 'white', font: 'dark' }}
block>
{loading && <Spinner as='span' animation='border' size='sm' role='status' aria-hidden='true' style={{ color: "#b49dc9" }} />}가입</Button>
{error && <Alert variant='danger'>
{error}
</Alert>}
......
client/src/utils/auth.js
View file @ 7b2efa8f
......@@ -10,7 +10,7 @@ export async function handleLogout() {
sessionStorage.clear();
await axios.get('/auth/logout')
//login페이지로 이동
window.location.href='/login'
// window.location.href='/login'
}
export function isAuthenticated() {
......
server/controllers/room.controller.js
View file @ 7b2efa8f
import Room from "../models/Room.js"
import { customAlphabet } from 'nanoid'
import isLength from 'validator/lib/isLength.js'
import Chat from "../models/Chat.js"
const nanoid = customAlphabet('1234567890abcdef', 10)
......@@ -56,7 +57,7 @@ const getOpenList = async (req, res) => {
const getRoomName = async (req, res) => {
const roomId = req.query.roomCode
console.log(req.query.roomCode)
console.log('getRoomName', req.query.roomCode)
try {
let roominfo = await Room.findOne({ roomId: roomId }).select('roomName')
......@@ -82,7 +83,6 @@ const changemember = async (req, res) => {
else {
return res.json(false)
}
res.end()
} catch (error) {
res.status(500).send('멤버 업데이트 실패')
}
......@@ -107,7 +107,6 @@ const deleteUserId = async (req, res) => {
const roomInf = async (req, res) => {
try {
console.log(req.query.roomId)
// let roomInf = await Room.findOne({ member: req.query.roomId }).select('interest roomId member').exec()
let roomInf = await Room.find({ roomId: req.query.roomId })
console.log('room_member로 정보 가져오기:', roomInf)
return res.json(roomInf)
......@@ -116,4 +115,43 @@ const roomInf = async (req, res) => {
}
}
export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, deleteUserId, roomInf }
const unreadMessage = async (req, res) => {
let leaveInfo = req.query.leaveInfo
const roomId = req.query.roomId
let leaveTime = ''
console.log('서버에서 초기 leaveInfo',leaveInfo)
for (let i = 1; i < leaveInfo.length; i++) { //일단 형식좀 맞추고
leaveInfo[i] = JSON.parse(leaveInfo[i])
}
//findOne으로 해보자
for (let i = 1; i <= leaveInfo.length - 1; i++) { //그 방의 id와 나간기록의 방과 일치하는지 확인하고
if (leaveInfo[i].roomName === roomId) {
leaveTime = leaveInfo[i].leaveTime //그 방에서 나간 시간을 찾아옴
break;
}
}
const room_id = await Room.find({ roomId: roomId }).select('_id') //id로 _id를 찾아와서
let unreadMsg = await Chat.find({ room: room_id }).select('createdAt') //그 방의 메세지와 전송시간을 가져옴
let count = 0
//mongoose 시간비교 방법이 있음 (gte...)
for (let i = 0; i <= unreadMsg.length - 1; i++) {
const dbtime = Date.parse(unreadMsg[i].createdAt)
const parsedleaveTime = Date.parse(leaveTime)
if (parsedleaveTime < dbtime) { //시간 비교를하고 이후에 온 메세지의 개수를 count함
console.log('이번째부터 나중에온 메세지', i)
count += 1
}
}
res.json(count)
}
const dbChat = async (req, res) => {
const roomId = req.query.roomId
const room_id = await Room.find({ roomId: roomId }).select('_id')
let chatlist = await Chat.find({ room: room_id }).select('message')
res.json(chatlist)
}
export default { makeRoom, getClosedList, getOpenList, getRoomName, changemember, roomInf, unreadMessage, dbChat, deleteUserId }
server/controllers/roomEnter.controller.js
View file @ 7b2efa8f
import Room from "../models/Room.js"
import Chat from "../models/Chat.js";
import User from "../models/User.js";
const roomEnter = async (req, res) => {
const roomId = req.body.enterCode
// console.log(req)
try {
const room = await Room.findOne({ roomId })
if (!room) {
return res.status(404).send(`참여코드가 존재하지 않습니다.`)
}
console.log('roomId존재')
const name = await Room.findOne({ roomId: roomId }).select('roomName')
return res.json(name.roomName)
......@@ -22,4 +21,17 @@ const roomEnter = async (req, res) => {
}
}
export default { roomEnter }
\ No newline at end of file
const getChatInfo = async (req, res) => {
const roomId = req.query.roomCode
try {
const room_id = await Room.find({ roomId: roomId }).select('_id') //roomId로 해당 방의 _id를 찾아옴
let infolist = await Chat.find({ room: room_id }).select('message username createdAt profileimg')
res.json(infolist)
} catch (error) {
res.status(500).send('이전 채팅 정보 불러오기를 실패하였습니다!')
}
}
export default { roomEnter, getChatInfo }
\ No newline at end of file
server/controllers/user.controller.js
View file @ 7b2efa8f
......@@ -9,11 +9,10 @@ const profileUpload = upload.fields([
{ name: 'imageUrl', maxCount: 1 },
])
const signup = async (req, res) => {
const { username, nickname, email, password } = req.body
try {
if (!isLength(username, { min: 3, max: 10 })) {
return res.status(422).send('이름은 3-10자 사이입니다')
......@@ -84,6 +83,15 @@ const getProfile = (req, res) => {
res.json(req.user)
}
const checkUser = async (req, res) => {
try {
const info = await User.findOne({ _id: req.query._id })
return res.json(info)
} catch (error) {
console.log(error)
res.status(500).send('사용자 검색 실패')
}
}
const loginNavbar = async (req, res) => {
try {
......@@ -94,5 +102,5 @@ const loginNavbar = async (req, res) => {
}
}
export default { signup, profileUpload, update, userById, getProfile, loginNavbar }
export default { signup, profileUpload, update, userById, getProfile, loginNavbar, checkUser }
// {} : 객체로 return함
server/models/Chat.js
View file @ 7b2efa8f
......@@ -16,6 +16,10 @@ const ChatSchema = new mongoose.Schema({
type: String,
required: true
},
profileimg :{
type: String,
default: '3cd14b9bcb2007f324fcb82e0b566cce'
}
}, {
timestamps: true
})
......
server/models/Room.js
View file @ 7b2efa8f
......@@ -25,7 +25,7 @@ const RoomSchema = new mongoose.Schema({
member: {
type: Array,
required: true,
}
},
}, {
timestamps: true
})
......
server/models/User.js
View file @ 7b2efa8f
......@@ -3,6 +3,7 @@
import mongoose from 'mongoose'
const { String } = mongoose.Schema.Types
const { Array } = mongoose.Schema.Types
//원래 java의 string이 아니라 mongoose의 string을 쓰기 위해 불러옴.
//object의 id를 쓸때에도 추가시켜줘야됨.
......@@ -31,14 +32,16 @@ const UserSchema = new mongoose.Schema({
},
profileimg: {
type: String,
default : '3cd14b9bcb2007f324fcb82e0b566cce',
default: '3cd14b9bcb2007f324fcb82e0b566cce',
},
entrylog: {
type: Array,
}
}, {
//옵셥을 정의함.
timestamps: true
//기본이 false로 되어있음
//user가 추가될때마다 createdAt(만들어진 시간 저장)과 updatedAt(수정될때 시간이 변경되어 저장)가 추가되어 시간을 저장함.
})
export default mongoose.models.User || mongoose.model('User', UserSchema)
//user라는 이름이 있으면 앞을 return하고 없으면 뒤를 실행함
server/routes/auth.routes.js
View file @ 7b2efa8f
......@@ -10,11 +10,6 @@ router.route('/auth/login')
router.route('/auth/logout')
.get(authCtrl.logout)
// /api/users/signup로 들어오는 것을 post (method) 를 통해 useCtrl.signup 이것이 처리함
//browser에서 주소창에 치고 들어가면 get (method) 을 타고 들어간것임
//post를 띄우고 싶으면 앱에서 ARC실행해서 post를 실행하게 만들면됨.
//객체에 접근할때는 .을 찍고 접근함/ ex) .hello
//express middleware : (req, res) => {}
//node(req(client의 정보), res)를 넘겨줌.
export default router
\ No newline at end of file
server/routes/room.routers.js
View file @ 7b2efa8f
......@@ -22,7 +22,15 @@ router.route('/room/member')
router.route('/room/getRoomName')
.get(roomCtrl.getRoomName)
// router.route('/room/unreadMessage')
// .get(roomCtrl.unreadMessage)
router.route('/room/unreadMessage')
.get(roomCtrl.unreadMessage)
router.route('/room/dbChat')
.get(roomCtrl.dbChat)
router.route('/room/deleteMem')
.put(roomCtrl.deleteUserId)
export default router
\ No newline at end of file
export default router
server/routes/roomEnter.routers.js
View file @ 7b2efa8f
......@@ -5,4 +5,9 @@ const router = express.Router()
router.route('/room/enterRoom')
.post(roomEnterCtrl.roomEnter)
router.route('/room/getChatInfo')
.get(roomEnterCtrl.getChatInfo)
export default router
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment