From f3b333bfe11a99a94651038dcaeedef739af7539 Mon Sep 17 00:00:00 2001
From: jongwon <wengers1004@naver.com>
Date: Sun, 20 Dec 2020 20:32:54 +0900
Subject: [PATCH 1/3] Refactor: real time update on view thread button

---
 backend/chatServer.js                       |  1 +
 frontend/src/container/ChatRoom/ChatRoom.js | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/backend/chatServer.js b/backend/chatServer.js
index f59ac4f..2e3bc2f 100644
--- a/backend/chatServer.js
+++ b/backend/chatServer.js
@@ -44,6 +44,7 @@ namespace.on('connection', socket => {
         _id: result._id,
         createdAt: result.createdAt,
         reactions: [],
+        reply: [],
       },
     })
   })
diff --git a/frontend/src/container/ChatRoom/ChatRoom.js b/frontend/src/container/ChatRoom/ChatRoom.js
index 06f87ef..7e33e7c 100644
--- a/frontend/src/container/ChatRoom/ChatRoom.js
+++ b/frontend/src/container/ChatRoom/ChatRoom.js
@@ -18,6 +18,7 @@ import Icon from '../../presenter/Icon'
 import { ArrowDown } from '../../constant/icon'
 import { getChannelHeaderInfo } from '../../api/channel'
 import { SOCKET_EVENT } from '../../constant'
+import produce from 'immer'
 
 const ChatRoom = ({ width }) => {
   const viewport = useRef(null)
@@ -123,6 +124,15 @@ const ChatRoom = ({ width }) => {
 
         if (message.userInfo._id === workspaceUserInfo._id) scrollTo()
       })
+      socket.on(SOCKET_EVENT.NEW_REPLY, ({ message }) => {
+        setMessages(messages =>
+          messages.map(target =>
+            target._id === message.parentId
+              ? { ...target, reply: [...target.reply, message] }
+              : target,
+          ),
+        )
+      })
       socket.on(SOCKET_EVENT.UPDAETE_REACTION, ({ reaction }) => {
         setMessages(messages =>
           chageReactionState(messages, reaction, workspaceUserInfo),
@@ -131,11 +141,13 @@ const ChatRoom = ({ width }) => {
     }
     return () => {
       if (socket) {
+        socket.off(SOCKET_EVENT.NEW_REPLY)
         socket.off(SOCKET_EVENT.NEW_MESSAGE)
         socket.off(SOCKET_EVENT.UPDAETE_REACTION)
       }
     }
   }, [socket, channelId, document.hidden, params])
+
   useEffect(() => {
     const handleIntersection = (entries, observer) => {
       entries.forEach(entry => {

From b6ec50ffeaee10b6a5479f3479b6e1a5477ab1bd Mon Sep 17 00:00:00 2001
From: jongwon <wengers1004@naver.com>
Date: Sun, 20 Dec 2020 20:35:37 +0900
Subject: [PATCH 2/3] Refactor: remove unnecessary module
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

사용하지않는 immer 제거
---
 frontend/src/container/ChatRoom/ChatRoom.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/container/ChatRoom/ChatRoom.js b/frontend/src/container/ChatRoom/ChatRoom.js
index 7e33e7c..19833a6 100644
--- a/frontend/src/container/ChatRoom/ChatRoom.js
+++ b/frontend/src/container/ChatRoom/ChatRoom.js
@@ -18,7 +18,6 @@ import Icon from '../../presenter/Icon'
 import { ArrowDown } from '../../constant/icon'
 import { getChannelHeaderInfo } from '../../api/channel'
 import { SOCKET_EVENT } from '../../constant'
-import produce from 'immer'
 
 const ChatRoom = ({ width }) => {
   const viewport = useRef(null)

From 0aabbe361d8ad6c02ec56b50b8aa964dd9bef56e Mon Sep 17 00:00:00 2001
From: jongwon <wengers1004@naver.com>
Date: Sun, 20 Dec 2020 20:54:26 +0900
Subject: [PATCH 3/3] Refactor: change the conditions which unread message
 appear

---
 frontend/src/container/ChatRoom/ChatRoom.js                 | 6 +++---
 .../src/presenter/ChannelBrowserCard/ChannelBrowserCard.js  | 5 ++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend/src/container/ChatRoom/ChatRoom.js b/frontend/src/container/ChatRoom/ChatRoom.js
index 19833a6..9ecaaf0 100644
--- a/frontend/src/container/ChatRoom/ChatRoom.js
+++ b/frontend/src/container/ChatRoom/ChatRoom.js
@@ -108,11 +108,12 @@ const ChatRoom = ({ width }) => {
             ...messages,
             ...hasMyReaction([message], workspaceUserInfo),
           ])
-          if (isReading.current && document.hasFocus()) {
+          if (message.userInfo._id === workspaceUserInfo._id) {
             setHasUnreadMessage(false)
             scrollTo()
-          } else if (message.userInfo._id !== workspaceUserInfo._id)
+          } else if (!isReading.current && !document.hasFocus()) {
             setHasUnreadMessage(true)
+          }
         }
 
         if (document.hidden) {
@@ -257,7 +258,6 @@ const UnreadMessage = styled.div`
   background-color: ${COLOR.STARBLUE};
   color: ${COLOR.WHITE};
   width: 170px;
-  height: 50px;
   margin-left: auto;
   margin-right: auto;
   position: sticky;
diff --git a/frontend/src/presenter/ChannelBrowserCard/ChannelBrowserCard.js b/frontend/src/presenter/ChannelBrowserCard/ChannelBrowserCard.js
index 218eb3f..6eded92 100644
--- a/frontend/src/presenter/ChannelBrowserCard/ChannelBrowserCard.js
+++ b/frontend/src/presenter/ChannelBrowserCard/ChannelBrowserCard.js
@@ -40,7 +40,6 @@ function ChannelBrowserCard({
     setChannels()
     handleClose()
   }
-
   return (
     <ChannelBrowserCardStyle>
       <ContentsArea>{title}</ContentsArea>
@@ -48,9 +47,9 @@ function ChannelBrowserCard({
         <Button
           handleClick={clickEvent}
           type={joined ? 'leave' : undefined}
-          disabled={channelType == 0 || _id === defaultChannel}
+          disabled={_id === defaultChannel || (channelType === 0 && !joined)}
           children={
-            channelType == 0
+            channelType === 0
               ? 'private'
               : _id === defaultChannel
               ? 'Default channel'