프로필 사진 미리보기, 안읽은 메세지 완성

client/src/Components/Chat.js

@@ -44,6 +44,8 @@ function Chat(props) {
     e.preventDefault()
     setInner(e.target.value)
     setDisabled(false)
+
+    console.log(props.leftInfo)
   }
 
   function sendMsgCH(e) {
@@ -56,6 +58,8 @@ function Chat(props) {
     props.sendMsg(e)
     setInner('')
     setDisabled(true)
+
+    recordEntryLog()  //그냥 새로고침해도 최신화
   }
 
 
@@ -81,24 +85,8 @@ function Chat(props) {
     props.handleChatc()
     setChat([''])
 
-
     recordEntryLog()
-
-    //아니 0으로 바꿔도 개수 세는걸 업데이트안하니까 소용없음 usestate해서 useEffect에 leaveInfo를 달아줘야할듯@@@@
-    //누르면 now를 0으로
-    // for (let i = 0; i < props.closedlist.length; i++) {
-    //   props.leaveInfo[i].now = 0  //그냥 싹다 0으로 해도되잖아?
-    //   if (props.leaveInfo[i].roomCode === props.roomCode) {
-    //     // setLeftInfo(leftInfo[i].now='보는중')
-    //     props.leaveInfo[i].now = 0   // 방 나가면 안 보는중으로 하기 위해 0으로 바꾸기!!!!!@@@@@@@@@@
-    //     //usestate로 해보기@@@@@@
-    //     console.log(i, '아아아아아아아아')
-    //   } else {
-    //     props.leaveInfo[i].now = 0
-    //   }
-    // }
-
-
+    props.setRoomCode('')
   }
 
   function settingtime(hour) {

client/src/Components/ClosedList.js

@@ -44,6 +44,7 @@ function ClosedList(props) {
   useEffect(() => { // 누군가 보내면 다시 개수 셈
     console.log('chat 클라이언트 변경!')
     props.unreadMessage()
+    console.log('새 메세지가 도착했습니다.',props.leftInfo)
   }, [props.checknew])
 
   useEffect(() => { //일단 들오면 실행해야지

client/src/Pages/HomePage.js

 import React, { useState, useEffect } from 'react';
-import { Row, Col, Button, Tabs, Tab } from 'react-bootstrap';
+import { Row, Col, Button, Tabs, Tab, Form } from 'react-bootstrap';
 import ClosedList from '../Components/ClosedList';
 import OpenList from '../Components/OpenList';
 import Menu from '../Components/Menu';
@@ -167,39 +167,31 @@ function Home() {
 
 
 
-  // const INIT_LEFT = {
-  //   userId: '',
-  //   roomCode: '',
-  //   now: '',
-  // }
-  // const [leftInfo, setLeftInfo] = useState(INIT_LEFT)
-  let leaveInfo = []
+  const INIT_LEFT = {
+    userId: '',
+    roomCode: '',
+    now: '',
+  }
+  const [leftInfo, setLeftInfo] = useState(INIT_LEFT)
+
   async function unreadMessage() {
     const userId = sessionStorage.getItem('userId')
+    let leaveInfo = []
     try {
       for (let i = 0; i < closedlist.length; i++) {
         leaveInfo.push({ userId: userId, roomCode: closedlist[i].roomId, now: 0 })
       }
-      // setLeftInfo(leaveInfo)
       for (let i = 0; i < closedlist.length; i++) {
         if (leaveInfo[i].roomCode === roomCode) {
-          // setLeftInfo(leftInfo[i].now='보는중')
-          leaveInfo[i].now = '보는중'   // 방 나가면 안 보는중으로 하기 위해 0으로 바꾸기!!!!!@@@@@@@@@@
-          //usestate로 해보기@@@@@@
-          console.log(i, '아아아아아아아아')
+          leaveInfo[i].now = '보는중'
         } else {
           leaveInfo[i].now = 0
         }
       }
-      // leaveInfo[0].now='시발'
-
-      console.log('클ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ', leaveInfo)
-
       setUnreadnumber([''])
       const respond = await axios.get('/room/unreadMessage', { params: leaveInfo })
-      console.log('~~~~~~~~~~~~~~~~~~~~~~~~~', respond.data)
-
       setUnreadnumber(respond.data)
+      setLeftInfo(leaveInfo)
     } catch (error) {
       console.log(error)
     }
@@ -225,7 +217,7 @@ function Home() {
         <Col className="list" md={5}>
           <Tabs defaultActiveKey="closed" id="uncontrolled-tab-example" >
             <Tab eventKey="closed" title="내 채팅" onClick={handleChato} >
-              <ClosedList checknew={checknew} unreadMessage={unreadMessage} unreadnumber={unreadnumber} setUnreadnumber={setUnreadnumber} setChecknew={setChecknew} closedlist={closedlist} userId={userId} singleChat={singleChat} recievedMsg={recievedMsg} enterChatRoom={enterChatRoom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
+              <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} />
             </Tab>
             <Tab eventKey="open" title="공개방" onClick={handleChatc}>
               <OpenList openlist={openlist} enterChatRoom={enterChatRoom} openListroom={openListroom} setRoomCode={setRoomCode} setRoomName={setRoomName} roomCode={roomCode} closeChatRoom={closeChatRoom} />
@@ -242,7 +234,7 @@ function Home() {
               </div>
             }
             {chat ?
-              <Chat leaveInfo={leaveInfo} 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} closedlist={closedlist}/>
+              <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} setRoomCode={setRoomCode} roomName={roomName} closeChatRoom={closeChatRoom} exitRoom={exitRoom} closedlist={closedlist} />
               : null}
             {open ?
               <div className="vh-90 flex-column align-items-center justify-content-center mt-2" variant="dark">

client/src/Pages/ProfilePage.js

@@ -19,6 +19,7 @@ function ProfilePage() {
 
     const [hidden, setHidden] = useState(true)
     const [changed, setChanged] = useState(false)
+    const [selectedImg, setSelectedImg] = useState('')
 
     const userId = isAuthenticated()
 
@@ -39,6 +40,7 @@ function ProfilePage() {
             setHidden(true)
         }
     }
+
     function handleChange(e) {
         const { name, value, files } = e.target
         if (files) {
@@ -47,6 +49,14 @@ function ProfilePage() {
             setUser({ ...user, [name]: value })
         }
         setChanged(true)
+
+        if (files) {
+            let reader = new FileReader()
+            reader.onload = function (e) {
+                setSelectedImg(e.target.result)
+            }
+            reader.readAsDataURL(e.target.files[0])
+        }
     }
     async function handleSubmit(e) {
         e.preventDefault()
@@ -75,6 +85,8 @@ function ProfilePage() {
         getProfile(userId)
     }, [userId])
 
+
+
     return (
         <>
             <Menu />
@@ -82,7 +94,8 @@ function ProfilePage() {
                 <Row >
                     <Col sm={4}>
                         <Row className='justify-content-center'>
-                            <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle />
+                            {!selectedImg ? <Image src={user.profileimg && `/images/${user.profileimg}`} style={{ width: "300px", height: "300px" }} roundedCircle /> :
+                                <Image src={selectedImg} style={{ width: "300px", height: "300px" }} roundedCircle />}
                         </Row>
                         <Row className='ml-3 mt-3 justify-content-center'>
                             <Form className="d-flex">

server/controllers/room.controller.js

@@ -138,30 +138,25 @@ const roomInf = async (req, res) => {
 }
 
 
-////////////////////////////////////////////////////////////////////////////////////////////
 const unreadMessage = async (req, res) => {
     const nowTime = new Date().toISOString()
     let leaveInfo = req.query
-    console.log('서버의 언리드 리브인포', leaveInfo)
     try {
         for (const key in Object.keys(leaveInfo)) {
             leaveInfo[key] = JSON.parse(leaveInfo[key]) //형식좀 제대로 맞춰주고
         }
-
+        
         let countArr = []
         for (const key in Object.keys(leaveInfo)) {
             const room = await Room.findOne({ roomId: leaveInfo[key].roomCode })    //들어온 방 코드로 그 방의 정보 찾아옴
             const entrylog = await EntryLog.findOne({ userId: leaveInfo[key].userId, room: room._id }) //그 방에서 나간시간 가져옴
             if (entrylog) {
-                console.log('자이거는 서버다!', leaveInfo[key].now)
                 if (leaveInfo[key].now) { //보는중이면 현재시간과 비교. 즉, 없음
                     const count = await Chat.find({ room: room._id, createdAt: { $gte: nowTime } })  //채팅 전체에서 그 방의 채팅중 떠난시간 이후의 것들을 가져옴
                     countArr.push({ roomCode: room.roomId, unreadcount: count.length })
-                    // countArr.push({ roomCode: room.roomId, unreadcount: count })
                 } else {
                     const count = await Chat.find({ room: room._id, createdAt: { $gte: entrylog.updatedAt } })  //채팅 전체에서 그 방의 채팅중 떠난시간 이후의 것들을 가져옴
                     countArr.push({ roomCode: room.roomId, unreadcount: count.length })
-                    // countArr.push({ roomCode: room.roomId, unreadcount: count })
                 }
             } else {
                 countArr.push(0)