chat 배열 변경 & 방목록 HomePage로 이동

client/src/Components/Chat.js

@@ -12,20 +12,14 @@ const INIT_CHAT = {
   time: ''
 }
 function Chat(props) {
-  const [sender, setSender] = useState([])
-
   const [roomName, setRoomName] = useState('')
   const [inner, setInner] = useState([''])
   const [chat, setChat] = useState([INIT_CHAT])   //object로 key는 보낸사람 value는 메세지
 
-  const [img, setImg] = useState([])
-  const [time, setTime] = 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('')
   const [error, setError] = useState('');
@@ -75,29 +69,12 @@ function Chat(props) {
     props.setRecievedMsg('')
     setChat([''])
 
-    // props.handleChatc()
-    // console.log("22222222222222222", props.leaveInfo)
-
-    // let find1 = props.leaveInfo.findIndex((ele) => ele.roomName === props.roomCode)
-    // console.log("33333333333333333", find1)
-
-    // let find=0
-    // for(let i=0;i<=props.leaveInfo.length-1;i++){
-    //   if(props.leaveInfo[i].roomName===props.roomCode){
-    //     find = i
-    //     break;
-    //   }
-    //   console.log('찾자',find)
-    // }
-
-    // if (props.leaveInfo[find1]) {
-    //   props.setLeaveInfo(props.leaveInfo[find1] = { roomName: props.roomCode, leaveTime: realTime })
-    //   console.log('트루')
-    // } else {
-    //   props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
-    //   console.log('폴스')
-    // }
-    // console.log('나간다', props.leaveInfo)
+    props.handleChatc()
+
+
+    
+    props.setLeaveInfo([...props.leaveInfo, { roomName: props.roomCode, leaveTime: realTime }])
+  
   }
 
   function settingtime(hour) {
@@ -118,27 +95,14 @@ function Chat(props) {
   //이전 채팅 내용에 대한 것 불러오기
   //프사 닉네임 메세지가 각각의 배열로 들어가서 띄워지는 방식
   async function getPreviousChat() {
-    //메세지, 닉네임, 시간 불러오기
     const respond = await axios.get('/room/getChatInfo', { params: { 'roomCode': props.roomCode } })
     const info = respond.data
 
     let intochat = []
-    let msglist = []
-    let userlist = []
-    let hourlist = []
-    let imglist = []
     for (let prop in info) {
       let hour = info[prop].createdAt.split('T')[1].split(':')
       hour = settingtime(hour[0]) + ':' + hour[1]
-      msglist.push(info[prop].message)
-      userlist.push(info[prop].username)
-      hourlist.push(hour)
-    }
-    const respond2 = await axios.get('/room/getProfileImage', { params: { 'userlist': userlist } })
-    imglist = respond2.data
-    console.log('확인해보자', imglist)
-    for (let i = 0; i < msglist.length; i++) {
-      intochat.push({ msg: msglist[i], sender: userlist[i], img: imglist[i].profileimg, time: hourlist[i] })
+      intochat.push({ msg: info[prop].message, sender: info[prop].username, img: info[prop].profileimg, time: hour })
     }
     setChat(intochat)
   }

client/src/Components/ClosedList.js

@@ -11,19 +11,6 @@ const INIT_LIST = [{
 }]
 function ClosedList(props) {
 
-  const [list, setList] = useState(INIT_LIST);
-
-  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)
-  }
-
   const realTime = new Date().toISOString()
 
   function enterChatRoomCH(e) {
@@ -32,7 +19,7 @@ function ClosedList(props) {
     props.enterChatRoom(roomCode)
     props.setRoomCode(roomCode)
 
-
+console.log('rrrrrrrrrrrrrrr',props.closedlist)
 console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
   }
 
@@ -41,8 +28,8 @@ console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
   const [checknew, setChecknew] = useState([])
   const [unreadnumber, setUnreadnumber] = useState([''])
   async function dbChat() {
-    for (let i = 0; i <= list.length - 1; i++) {
-      const respond = await axios.get('/room/dbChat', { params: { 'roomId': list[i].roomId } })
+    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)
     }
   }
@@ -62,8 +49,8 @@ console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
 
     setUnreadnumber([''])
     let arr = []
-    for (let i = 0; i <= list.length - 1; i++) {
-      const respond = await axios.get('/room/unreadMessage', { params: { 'leaveInfo': props.leaveInfo, 'roomId': list[i].roomId } })
+    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]
     }
@@ -75,7 +62,7 @@ console.log('1111111111111111111',props.leaveInfo, typeof(props.leaveInfo))
 
   return (
     <div>
-      {list.map((item, index) =>
+      {props.closedlist.map((item, index) =>
         <ListGroup key={index}>
           <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} value={item.roomName}>
             {item.roomName}

client/src/Components/OpenList.js

@@ -3,18 +3,6 @@ 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')
-    console.log('getOpenlist', res.data)
-    setOpenlist(res.data)
-  }
-
 
   function enterChatRoomCH(e) {
     console.log('e확인', e.target)
@@ -27,7 +15,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/Pages/HomePage.js

@@ -19,6 +19,13 @@ const INIT_ROOM = {
   roomId: '',
   member: '',
 }
+const INIT_LIST = [{
+  interest: '',
+  isOpen: '',
+  memeber: [],
+  roomId: '',
+  roomName: '',
+}]
 
 function Home() {
   const userName = sessionStorage.getItem('name')
@@ -44,8 +51,10 @@ function Home() {
 
   const [singleTime, setSingleTime] = useState('')
   const [recievedTime, setRecievedTime] = useState('')
-  const [leaveInfo, setLeaveInfo] = useState([{roomName:"" , leaveTime: ""}])
+  const [leaveInfo, setLeaveInfo] = useState([{ roomName: "", leaveTime: "" }])
 
+  const [closedlist, setClosedList] = useState(INIT_LIST);
+  const [openlist, setOpenlist] = useState([])
 
   //SOCKET 관련 시작
   function enterChatRoom(rCode) {    //방 입장하기
@@ -68,6 +77,18 @@ function Home() {
     setNewUser(data)
   })
 
+  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)
@@ -98,6 +119,10 @@ function Home() {
     e.preventDefault()
   }
 
+  useEffect(() => {
+    getClosedList();
+    getOpenList();
+  }, [roomCode]);
 
   useEffect(() => {
     if (!(singleChat == '')) {
@@ -114,7 +139,6 @@ function Home() {
     }
   }, [singleChat])
 
-
   useEffect(() => {
     socket.on("sendedMSG", (sendInfo) => {
       setRecievedTime(sendInfo.time)
@@ -131,10 +155,10 @@ function Home() {
         <Col className="list" md={5}>
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example">
             <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+              <ClosedList closedlist={closedlist} singleChat={singleChat} recievedMsg={recievedMsg} leaveInfo={leaveInfo} setLeaveInfo={setLeaveInfo} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
             </Tab>
             <Tab eventKey="open" title="공개방" onClick={handleChatc}>
-              <OpenList enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
+              <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} />
             </Tab>
           </Tabs>
         </Col>

server/controllers/room.controller.js

@@ -108,10 +108,12 @@ 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  //그 방에서 나간 시간을 찾아옴
@@ -122,6 +124,7 @@ const unreadMessage = async (req, res) => {
     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)

server/controllers/roomEnter.controller.js

@@ -28,27 +28,13 @@ 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')
+        let infolist = await Chat.find({ room: room_id }).select('message username createdAt profileimg')
         res.json(infolist)
     } catch (error) {
         res.status(500).send('이전 채팅 정보 불러오기를 실패하였습니다!')
     }
 }
 
-const getProfileImage = async (req, res) => {
-    const nicknamelist = req.query.userlist
-    try {
-        let imglist = []
-        for (let prop in nicknamelist) {
-            const getimg = await User.find({ nickname: nicknamelist[prop] }).select('profileimg')
-            const eachimg = { profileimg: getimg[0].profileimg }
-            imglist = [...imglist, eachimg]
-        }
-        res.json(imglist)
 
-    } catch (error) {
-        res.status(500).send('프로필 사진 정보 불러오기를 실패하였습니다!')
-    }
-}
 
-export default { roomEnter, getChatInfo, getProfileImage }
+export default { roomEnter, getChatInfo }
\ No newline at end of file

server/models/Chat.js

@@ -16,6 +16,10 @@ const ChatSchema = new mongoose.Schema({
         type: String,
         required: true
     },
+    profileimg :{
+        type: String,
+        default: '3cd14b9bcb2007f324fcb82e0b566cce'
+    }
 }, {
     timestamps: true
 })

server/routes/roomEnter.routers.js

@@ -9,7 +9,5 @@ router.route('/room/enterRoom')
 router.route('/room/getChatInfo')
     .get(roomEnterCtrl.getChatInfo)
 
-router.route('/room/getProfileImage')
-    .get(roomEnterCtrl.getProfileImage)
 
 export default router
\ No newline at end of file

server/server.js

@@ -42,7 +42,8 @@ io.on("connection", (socket) => { // 기본 연결
     const chat = await new Chat({
       room: room._id,
       username: data.sendInfo.sender,
-      message: data.sendInfo.msg
+      message: data.sendInfo.msg,
+      profileimg: data.sendInfo.img
     }).save()
     console.log('resChat확인', chat)