Merge pull request #208 from boostcamp-2020/dev

v0.0.7 배포

backend/chatServer.js

@@ -4,6 +4,7 @@ import { createServer } from 'http'
 import createChatServer from 'socket.io'
 import { createChatMessage, createReplyMessage } from './service/chat'
 import { addReaction, removeReaction } from './service/reaction'
+import { SOCKET_EVENT } from './util/constant'
 dotenv()
 
 const server = createServer(express())
@@ -20,31 +21,34 @@ namespace.use((socket, next) => {
 namespace.on('connection', socket => {
  const { workspaceUserInfoId } = socket.handshake.query
  socket.join(workspaceUserInfoId)
- socket.on('invite channel', ({ channelId, origin, newMember }) => {
+ socket.on(SOCKET_EVENT.INVITE_CHANNEL, ({ channelId, origin, newMember }) => {
  origin
  .concat(newMember)
  .forEach(member =>
- namespace.in(member).emit('invited channel', { channelId, newMember }),
+ namespace
+ .in(member)
+ .emit(SOCKET_EVENT.INVITED_CHANNEL, { channelId, newMember }),
  )
  })
- socket.on('new message', async data => {
+ socket.on(SOCKET_EVENT.NEW_MESSAGE, async data => {
  const { contents, channelId, file } = data
  const { data: result } = await createChatMessage({
  creator: workspaceUserInfoId,
  channelId,
  contents,
  file,
  })
- namespace.in(channelId).emit('new message', {
+ namespace.in(channelId).emit(SOCKET_EVENT.NEW_MESSAGE, {
  message: {
  ...data,
  _id: result._id,
  createdAt: result.createdAt,
  reactions: [],
+ reply: [],
  },
  })
  })
- socket.on('new reply', async data => {
+ socket.on(SOCKET_EVENT.NEW_REPLY, async data => {
  const { contents, channelId, parentId, file } = data
  const { data: result } = await createReplyMessage({
  creator: workspaceUserInfoId,
@@ -53,7 +57,7 @@ namespace.on('connection', socket => {
  parentId,
  file,
  })
- namespace.in(channelId).emit('new reply', {
+ namespace.in(channelId).emit(SOCKET_EVENT.NEW_REPLY, {
  message: {
  ...data,
  _id: result._id,
@@ -63,7 +67,7 @@ namespace.on('connection', socket => {
  },
  })
  })
- socket.on('update reaction', async data => {
+ socket.on(SOCKET_EVENT.UPDAETE_REACTION, async data => {
  const { emoji, chatId, userInfo, channelId, type, parentId } = data
  //1 = add, 0 = remove
  const result =
@@ -79,7 +83,7 @@ namespace.on('connection', socket => {
  emoticon: emoji,
  })
 
- namespace.in(channelId).emit('update reaction', {
+ namespace.in(channelId).emit(SOCKET_EVENT.UPDAETE_REACTION, {
  reaction: {
  chatId: chatId,
  emoji: emoji,
@@ -91,10 +95,10 @@ namespace.on('connection', socket => {
  })
  })
 
- socket.on('join-room', (channelList = []) => {
+ socket.on(SOCKET_EVENT.JOIN_ROOM, (channelList = []) => {
  socket.join(channelList)
  })
- socket.on('leave-room', roomId => {
+ socket.on(SOCKET_EVENT.LEAVE_ROOM, roomId => {
  socket.leave(roomId)
  })
 })

backend/model/Channel.js

@@ -33,6 +33,7 @@ const channelSchema = mongoose.Schema(
  },
  { timestamps: true },
 )
+channelSchema.index({ workspaceId: 1, channelType: 1 })
 
 channelSchema.statics.getChannelBrowserData = async function (
  workspaceId,

backend/model/ChannelConfig.js

@@ -29,6 +29,9 @@ const channelConfigSchema = mongoose.Schema(
  { timestamps: true },
 )
 
+channelConfigSchema.index({ channelId: 1, workspaceUserInfoId: 1 })
+channelConfigSchema.index({ workspaceUserInfoId: 1 })
+
 channelConfigSchema.statics.getChannelHeaderInfo = async function (
  channelId,
  workspaceUserInfoId,

backend/model/Chat.js

@@ -33,6 +33,12 @@ const chatSchema = mongoose.Schema(
  },
  { timestamps: true },
 )
+
+chatSchema.index({ createdAt: 1, channel: 1 })
+chatSchema.index({ channel: 1, parentId: 1 })
+chatSchema.index({ pinned: 1 })
+chatSchema.index({ parentId: 1 })
+
 chatSchema.statics.getChatMessages = ({ channelId, currentCursor, fromDate }) =>
  Chat.aggregate([
  { $sort: { createdAt: -1 } },

backend/model/Reaction.js

@@ -14,5 +14,8 @@ const reactionSchema = mongoose.Schema({
  type: String,
  },
 })
+reactionSchema.index({ workspaceUserInfoId: 1, chatId: 1 })
+reactionSchema.index({ chatId: 1 })
+
 const Reaction = mongoose.model('Reaction', reactionSchema)
 module.exports = { Reaction }

backend/model/Workspace.js

@@ -20,5 +20,7 @@ const workspaceSchema = mongoose.Schema(
  },
  { timestamps: true },
 )
+workspaceSchema.index({ name: 1 })
+
 const Workspace = mongoose.model('Workspace', workspaceSchema)
 module.exports = { Workspace }

backend/model/WorkspaceUserInfo.js

@@ -52,6 +52,9 @@ const workspaceUserInfoSchema = mongoose.Schema(
  { timestamps: true },
 )
 
+workspaceUserInfoSchema.index({ workspaceId: 1, userId: 1 })
+workspaceUserInfoSchema.index({ userId: 1 })
+
 workspaceUserInfoSchema.statics.getWorkspaceUserInfo = async function (
  workspaceUserInfoId,
 ) {

backend/util/constant.js

@@ -1 +1,10 @@
 export const MAX_CHAT_MESSAGE = 20
+export const SOCKET_EVENT = {
+ INVITE_CHANNEL: 'invite channel',
+ INVITED_CHANNEL: 'invited channel',
+ NEW_MESSAGE: 'new message',
+ NEW_REPLY: 'new reply',
+ UPDAETE_REACTION: 'update reaction',
+ JOIN_ROOM: 'join room',
+ LEAVE_ROOM: 'leave room',
+}

frontend/package.json

@@ -22,6 +22,7 @@
  "immer": "^8.0.0",
  "qs": "^6.9.4",
  "react": "^17.0.1",
+ "react-copy-to-clipboard": "^5.0.2",
  "react-dom": "^17.0.1",
  "react-router-dom": "^5.2.0",
  "react-scripts": "4.0.0",

frontend/src/api/user.js

@@ -0,0 +1,6 @@
+import Request from '../util/request'
+
+export const signOut = async () => {
+ const data = await Request.DELETE('/api/user/sign-out')
+ return data
+}

frontend/src/constant/index.js

@@ -0,0 +1,9 @@
+export const SOCKET_EVENT = {
+ INVITE_CHANNEL: 'invite channel',
+ INVITED_CHANNEL: 'invited channel',
+ NEW_MESSAGE: 'new message',
+ NEW_REPLY: 'new reply',
+ UPDAETE_REACTION: 'update reaction',
+ JOIN_ROOM: 'join room',
+ LEAVE_ROOM: 'leave room',
+}

frontend/src/container/ChannelHeader/ChannelHeader.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { useSetRecoilState } from 'recoil'
+import { useSetRecoilState, useRecoilValue } from 'recoil'
 
 import Icon from '../../presenter/Icon'
 import { ADDUSER, INFOCIRCLE } from '../../constant/icon'
@@ -9,15 +9,14 @@ import ChannelStarBtn from '../ChannelStarBtn'
 import ChannelPinBtn from '../../presenter/ChannelPinBtn'
 import ChannelTopicBtn from '../../presenter/ChannelTopicBtn'
 import ChannelMemberThumbnail from '../../presenter/ChannelMemberThumbnail'
-import { modalRecoil } from '../../store'
+import { modalRecoil, currentChannelInfoRecoil } from '../../store'
 import InviteUserToChannelModal from '../Modal/InviteUserToChannelModal'
 import { COLOR } from '../../constant/style'
-import useChannelInfo from '../../hooks/useChannelInfo'
 import { isEmpty } from '../../util'
 
 function ChannelHeader() {
  const setModal = useSetRecoilState(modalRecoil)
- const [channelInfo] = useChannelInfo()
+ const channelInfo = useRecoilValue(currentChannelInfoRecoil)
  const openAddUserModal = () => {
  setModal(<InviteUserToChannelModal handleClose={() => setModal(null)} />)
  }

frontend/src/container/ChatMessage/ChatMessage.js

@@ -7,11 +7,11 @@ import ChatContent from '../../presenter/ChatContent'
 import ThreadReactionList from '../../presenter/ThreadReactionList'
 import ActionBar from '../ActionBar'
 import ViewThreadButton from '../../presenter/Button/ViewThreadButton'
-import { isEmpty, isImage } from '../../util'
+import { isEmpty } from '../../util'
 import { SIZE, COLOR } from '../../constant/style'
 import { workspaceRecoil, socketRecoil } from '../../store'
 import FilePreview from '../FilePreview'
-
+import { SOCKET_EVENT } from '../../constant'
 const ChatMessage = forwardRef(
  (
  {
@@ -45,7 +45,7 @@ const ChatMessage = forwardRef(
  displayName: workspaceUserInfo.displayName,
  },
  }
- socket.emit('update reaction', reaction)
+ socket.emit(SOCKET_EVENT.UPDAETE_REACTION, reaction)
  }
 
  const updateReactionHandler = emoji => {

frontend/src/container/ChatRoom/ChatRoom.js

@@ -1,18 +1,23 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react'
 import styled from 'styled-components'
 import { useParams } from 'react-router-dom'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import ChatMessage from '../ChatMessage'
 import { COLOR } from '../../constant/style'
 import { getChatMessage } from '../../api/chat'
 import MessageEditor from '../MessageEditor/MessageEditor'
-import { workspaceRecoil, socketRecoil } from '../../store'
+import {
+ workspaceRecoil,
+ socketRecoil,
+ currentChannelInfoRecoil,
+} from '../../store'
 import ChannelHeader from '../ChannelHeader'
 import { isEmpty } from '../../util'
 import { hasMyReaction, chageReactionState } from '../../util/reactionUpdate'
-import useChannelInfo from '../../hooks/useChannelInfo'
 import Icon from '../../presenter/Icon'
 import { ArrowDown } from '../../constant/icon'
+import { getChannelHeaderInfo } from '../../api/channel'
+import { SOCKET_EVENT } from '../../constant'
 
 const ChatRoom = ({ width }) => {
  const viewport = useRef(null)
@@ -23,7 +28,7 @@ const ChatRoom = ({ width }) => {
  const isAllMessageFetched = useRef(false)
  const isReading = useRef(false)
  const workspaceUserInfo = useRecoilValue(workspaceRecoil)
- const [channelInfo] = useChannelInfo()
+ const [channelInfo, setChannelInfo] = useRecoilState(currentChannelInfoRecoil)
  const { workspaceId, channelId } = useParams()
  const params = useParams()
  const socket = useRecoilValue(socketRecoil)
@@ -52,6 +57,20 @@ const ChatRoom = ({ width }) => {
  [messages],
  )
 
+ const updateChannelInfo = useCallback(async () => {
+ if (workspaceUserInfo && channelId)
+ setChannelInfo(
+ await getChannelHeaderInfo({
+ workspaceUserInfoId: workspaceUserInfo._id,
+ channelId,
+ }),
+ )
+ }, [channelId, workspaceUserInfo, setChannelInfo])
+
+ useEffect(() => {
+ updateChannelInfo()
+ }, [channelId, workspaceUserInfo, updateChannelInfo])
+
  useEffect(() => {
  setMessages([])
  isLoading.current = false
@@ -74,7 +93,7 @@ const ChatRoom = ({ width }) => {
  profileUrl: workspaceUserInfo.profileUrl,
  },
  }
- socket.emit('new message', chat)
+ socket.emit(SOCKET_EVENT.NEW_MESSAGE, chat)
  }
 
  useEffect(() => {
@@ -83,17 +102,18 @@ const ChatRoom = ({ width }) => {
 
  useEffect(() => {
  if (socket) {
- socket.on('new message', ({ message }) => {
+ socket.on(SOCKET_EVENT.NEW_MESSAGE, ({ message }) => {
  if (message.channelId === channelId) {
  setMessages(messages => [
  ...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) {
@@ -104,17 +124,30 @@ const ChatRoom = ({ width }) => {
 
  if (message.userInfo._id === workspaceUserInfo._id) scrollTo()
  })
- socket.on('update reaction', ({ reaction }) => {
- setMessages(messages => chageReactionState(messages, reaction))
+ 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),
+ )
  })
  }
  return () => {
  if (socket) {
- socket.off('new message')
- socket.off('update reaction')
+ 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 => {
@@ -225,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;