Merge pull request #206 from boostcamp-2020/refactor/real-time-update…

…-view-threads-button Refactor: real time update on view thread button
boostcamp-2020 · Dec 20, 2020 · 2370261 · 2370261
2 parents b83a683 + 0aabbe3
commit 2370261
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git 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
@@ -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) {
@@ -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 => {
@@ -246,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
@@ -40,17 +40,16 @@ function ChannelBrowserCard({
  setChannels()
  handleClose()
  }
-
  return (
  <ChannelBrowserCardStyle>
  <ContentsArea>{title}</ContentsArea>
  <ButtonArea>
  <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'