feat: Reply Reaction 생성 / 삭제 구현 (#229)

* refactor: chat-type renaming

- chat-type이 아닌 chatroom에 대한 타입이므로 이름 재정의를 함

* refactor: type명 변경에 따른 수정

* feat: chat-type 타입 정의

- Message, Reply의 상태를 관리하기 위한 타입 정의

* feat: Reply Actionbar 생성

- actionbarType을 둠으로 Message와 reply actionbar 분기

* feat: Message, Reply actionbar 적용

- chatId로 변경하면서 Actionbar 분기

* fix: replyTitle 액션바 잘리는 현상 해결

* refactor: emojiPicker modal type 변경

- message만이 아닌 reply에 대해서도 처리를 해줘야하므로 변경하였음.

* refactor: store reactions타입 변경

- reply에서도 동일한 타입을 사용하게 되므로 파일명과 변수명을 변경하였음

* feat: reply reaction emit socket 정의

* feat: store thread create/delete 로직 구현

* fix: chatroomId request에서 제거

* feat: reply reaction 생성/삭제 socket event 등록

* refactor: EmojiBox 클릭에 따른 이벤트 매개변수화

* feat: EmojiPicker 누를 시 reply 소켓 이벤트 발생

* feat: Message / Reply 리액션 생성 삭제 구현

client/src/common/constants/chat-type.ts

@@ -1,6 +1,7 @@
 const ChatType = {
-  DM: 'DM',
-  Channel: 'Channel'
+  Message: 'Message',
+  ReplyTitle: 'ReplyTitle',
+  Reply: 'Reply'
 };
 
 export { ChatType };

client/src/common/constants/chatroom-type.ts

@@ -0,0 +1,6 @@
+const ChatroomType = {
+  DM: 'DM',
+  Channel: 'Channel'
+};
+
+export { ChatroomType };

client/src/common/constants/index.ts

@@ -1,7 +1,8 @@
 import { DefaultSectionName } from './default-section-name';
 import { KeyCode } from './key-code';
 import { ScrollEventType } from './scroll-event-type';
+import { ChatroomType } from './chatroom-type';
 import { ChatType } from './chat-type';
 import { HttpStatusCode } from './http-status-code';
 
-export { DefaultSectionName, KeyCode, ScrollEventType, ChatType, HttpStatusCode };
+export { DefaultSectionName, KeyCode, ScrollEventType, ChatroomType, ChatType, HttpStatusCode };

client/src/common/socket/emits/reaction.ts

@@ -1,8 +1,12 @@
 import {
   CREATE_MESSAGE_REACTION,
   DELETE_MESSAGE_REACTION,
+  CREATE_REPLY_REACTION,
+  DELETE_REPLY_REACTION,
   createMessageReactionState,
-  deleteMessageReactionState
+  deleteMessageReactionState,
+  createReplyReactionState,
+  deleteReplyReactionState
 } from '@socket/types/reaction-types';
 import socket from '../socketIO';
 
@@ -13,3 +17,11 @@ export const createMessageReaction = (reaction: createMessageReactionState) => {
 export const deleteMessageReaction = (reaction: deleteMessageReactionState) => {
   socket.emit(DELETE_MESSAGE_REACTION, reaction);
 };
+
+export const createReplyReaction = (reaction: createReplyReactionState) => {
+  socket.emit(CREATE_REPLY_REACTION, reaction);
+};
+
+export const deleteReplyReaction = (reaction: deleteReplyReactionState) => {
+  socket.emit(DELETE_REPLY_REACTION, reaction);
+};

client/src/common/socket/types/reaction-types.ts

@@ -1,5 +1,7 @@
 export const CREATE_MESSAGE_REACTION = 'create reaction';
 export const DELETE_MESSAGE_REACTION = 'delete reaction';
+export const CREATE_REPLY_REACTION = 'create reply reaction';
+export const DELETE_REPLY_REACTION = 'delete reply reaction';
 
 interface userInfo {
   displayName: string;
@@ -17,6 +19,17 @@ export interface deleteMessageReactionState {
   reactionId: number;
 }
 
+export interface createReplyReactionState {
+  replyId: number;
+  title: string;
+  emoji: string;
+}
+
+export interface deleteReplyReactionState {
+  replyId: number;
+  reactionId: number;
+}
+
 export interface socketMessageReactionState {
   authors: Array<userInfo>;
   chatroomId: number;
@@ -25,3 +38,12 @@ export interface socketMessageReactionState {
   reactionId: number;
   title: string;
 }
+
+export interface socketReplyReactionState {
+  reactionId: number;
+  title: string;
+  emoji: string;
+  replyId: number;
+  authors: Array<userInfo>;
+  messageId: number;
+}

client/src/common/store/actions/thread-action.ts

@@ -1,5 +1,15 @@
-import { LOAD_THREAD_ASYNC, INSERT_REPLY, LOAD_NEXT_REPLIES_ASYNC, replyState } from '@store/types/thread-types';
+import { socketReplyReactionState } from '@socket/types/reaction-types';
+import {
+  LOAD_THREAD_ASYNC,
+  INSERT_REPLY,
+  LOAD_NEXT_REPLIES_ASYNC,
+  ADD_REPLY_REACTION,
+  DELETE_REPLY_REACTION,
+  replyState
+} from '@store/types/thread-types';
 
 export const loadThread = (messageId: number) => ({ type: LOAD_THREAD_ASYNC, payload: { messageId } });
 export const InsertReply = (payload: replyState) => ({ type: INSERT_REPLY, payload });
 export const loadNextReplies = (payload: any) => ({ type: LOAD_NEXT_REPLIES_ASYNC, payload });
+export const createReplyReaction = (payload: socketReplyReactionState) => ({ type: ADD_REPLY_REACTION, payload });
+export const deleteReplyReaction = (payload: socketReplyReactionState) => ({ type: DELETE_REPLY_REACTION, payload });

client/src/common/store/reducers/chatroom-reducer.ts

@@ -4,7 +4,7 @@
 import { uriParser } from '@utils/index';
 import { joinChatroom, joinDM } from '@socket/emits/chatroom';
 import { messageState } from '@store/types/message-types';
-import { messageReactionsState } from '@store/types/message-reactions-type';
+import { reactionsState } from '@store/types/reactions-type';
 import {
   chatroomState,
   LOAD,
@@ -155,7 +155,7 @@ const chatroomReducer = (state = initialState, action: ChatroomTypes) => {
         addReactionMessages.forEach((message: messageState) => {
           if (message.messageId === action.payload.messageId) {
             let isExistReaction = false;
-            message.messageReactions.forEach((reaction: messageReactionsState) => {
+            message.messageReactions.forEach((reaction: reactionsState) => {
               if (reaction.reactionId === action.payload.reactionId) {
                 reaction.reactionCount += 1;
                 reaction.reactionDisplayNames = action.payload.authors.reduce((acc: Array<string>, val: any) => {
@@ -183,7 +183,7 @@ const chatroomReducer = (state = initialState, action: ChatroomTypes) => {
       if (state.selectedChatroomId === action.payload.chatroomId) {
         deleteReactionMessages.forEach((message: messageState) => {
           if (message.messageId === action.payload.messageId) {
-            message.messageReactions.forEach((reaction: messageReactionsState) => {
+            message.messageReactions.forEach((reaction: reactionsState) => {
               if (reaction.reactionId === action.payload.reactionId) {
                 reaction.reactionCount -= 1;
                 reaction.reactionDisplayNames = action.payload.authors.reduce((acc: Array<string>, val: any) => {

client/src/common/store/reducers/modal-reducer.ts

@@ -12,13 +12,14 @@ import {
   EMOJI_PICKER_CLOSE,
   EMOJI_PICKER_OPEN
 } from '@store/types/modal-types';
+import { ChatType } from '@constants/index';
 
 const initialState: ModalState = {
   createModal: { isOpen: false },
   channelModal: { isOpen: false, x: 0, y: 0 },
   userboxModal: { isOpen: false },
   profileModal: { isOpen: false, x: 0, y: 0, userId: 0, profileUri: '', displayName: '' },
-  emojiPicker: { isOpen: false, x: 0, y: 0, messageId: null }
+  emojiPicker: { isOpen: false, x: 0, y: 0, chatId: null, type: ChatType.Message }
 };
 
 const ModalReducer = (state = initialState, action: ModalTypes) => {
@@ -41,8 +42,8 @@ const ModalReducer = (state = initialState, action: ModalTypes) => {
     case PROFILE_MODAL_CLOSE:
       return { ...state, profileModal: { isOpen: false } };
     case EMOJI_PICKER_OPEN:
-      const { x, y, messageId } = action.payload;
-      return { ...state, emojiPicker: { isOpen: true, x, y, messageId } };
+      const { x, y, chatId, type } = action.payload;
+      return { ...state, emojiPicker: { isOpen: true, x, y, chatId, type } };
     case EMOJI_PICKER_CLOSE:
       return { ...state, emojiPicker: { isOpen: false } };
     default:

client/src/common/store/reducers/thread-reducer.ts

@@ -1,4 +1,16 @@
-import { LOAD_THREAD, threadState, INSERT_REPLY, ThreadTypes, LOAD_NEXT_REPLIES } from '@store/types/thread-types';
+/* eslint-disable no-param-reassign */
+import { reactionsState } from '@store/types/reactions-type';
+import {
+  LOAD_THREAD,
+  threadState,
+  INSERT_REPLY,
+  ThreadTypes,
+  LOAD_NEXT_REPLIES,
+  ADD_REPLY_REACTION,
+  DELETE_REPLY_REACTION,
+  replyState
+} from '@store/types/thread-types';
+import { uriParser } from '@utils/index';
 
 const initialState: threadState = {
   message: {
@@ -15,7 +27,8 @@ const initialState: threadState = {
     chatroom: {},
     messageReactions: []
   },
-  replies: []
+  replies: [],
+  selectedThreadId: uriParser.getThreadId()
 };
 
 export default function threadReducer(state = initialState, action: ThreadTypes) {
@@ -24,7 +37,8 @@ export default function threadReducer(state = initialState, action: ThreadTypes)
       return {
         ...state,
         message: action.payload.message,
-        replies: action.payload.replies
+        replies: action.payload.replies,
+        selectedThreadId: uriParser.getThreadId()
       };
     case INSERT_REPLY:
       const newReplies = state.replies;
@@ -42,6 +56,58 @@ export default function threadReducer(state = initialState, action: ThreadTypes)
         ...state,
         replies: nextreplies
       };
+    case ADD_REPLY_REACTION: {
+      const NewReplies = state.replies;
+      const { messageId, reactionId, replyId } = action.payload;
+      if (state.selectedThreadId === messageId) {
+        NewReplies.forEach((reply: replyState) => {
+          if (reply.replyId === replyId) {
+            let bExistReaction = false;
+            reply.replyReactions.forEach((reaction: any) => {
+              if (reaction.reactionId === reactionId) {
+                reaction.reactionCount += 1;
+                reaction.replyDisplayNames = action.payload.authors.reduce((acc: Array<string>, val: any) => {
+                  acc.push(val.displayName);
+                  return acc;
+                }, []);
+                bExistReaction = true;
+              }
+            });
+            if (!bExistReaction) {
+              reply.replyReactions.push({
+                reactionCount: 1,
+                emoji: action.payload.emoji,
+                replyDisplayNames: [action.payload.authors[0].displayName],
+                reactionId: action.payload.reactionId,
+                title: action.payload.title
+              });
+            }
+          }
+        });
+      }
+
+      return { ...state, replies: NewReplies };
+    }
+    case DELETE_REPLY_REACTION: {
+      const NewReplies = state.replies;
+      const { messageId, reactionId, replyId } = action.payload;
+      if (state.selectedThreadId === messageId) {
+        NewReplies.forEach((reply: replyState) => {
+          if (reply.replyId === replyId) {
+            reply.replyReactions.forEach((reaction: any) => {
+              if (reaction.reactionId === action.payload.reactionId) {
+                reaction.reactionCount -= 1;
+                reaction.replyDisplayNames = action.payload.authors.reduce((acc: Array<string>, val: any) => {
+                  acc.push(val.displayName);
+                  return acc;
+                }, []);
+              }
+            });
+          }
+        });
+      }
+      return { ...state, replies: NewReplies };
+    }
     default:
       return state;
   }

client/src/common/store/sagas/chatroom-saga.ts

@@ -1,6 +1,6 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
 import API from '@utils/api';
-import { ChatType } from '@constants/index';
+import { ChatroomType } from '@constants/index';
 import {
   LOAD,
   LOAD_ASYNC,
@@ -59,7 +59,7 @@ function* pickChannelSaga(action: any) {
 function* addChannel(action: any) {
   try {
     const chatroomId = yield call(API.createChannel, action.payload.title, action.payload.description, action.payload.isPrivate);
-    const payload = { chatroomId, chatType: ChatType.Channel, isPrivate: action.payload.isPrivate, title: action.payload.title };
+    const payload = { chatroomId, chatType: ChatroomType.Channel, isPrivate: action.payload.isPrivate, title: action.payload.title };
     yield put({ type: ADD_CHANNEL, payload });
     yield put({ type: PICK_CHANNEL_ASYNC, payload: { selectedChatroomId: chatroomId } });
   } catch (e) {
@@ -72,7 +72,7 @@ function* addDM(action: any) {
     const { invitedUserId } = action.payload;
     const chatroomId = yield call(API.createDM, invitedUserId);
     const { profileUri, displayName } = yield call(API.getUser, invitedUserId);
-    yield put({ type: ADD_DM, payload: { chatroomId, chatProfileImg: profileUri, chatType: ChatType.DM, title: displayName, invitedUserId } });
+    yield put({ type: ADD_DM, payload: { chatroomId, chatProfileImg: profileUri, chatType: ChatroomType.DM, title: displayName, invitedUserId } });
     yield put({ type: PICK_CHANNEL_ASYNC, payload: { selectedChatroomId: chatroomId } });
   } catch (e) {
     console.log(e);

client/src/common/store/types/message-types.ts

@@ -1,13 +1,13 @@
 import { userState } from './user-types';
-import { messageReactionsState } from './message-reactions-type';
+import { reactionsState } from './reactions-type';
 import { chatroomThreadState } from './chatroom-types';
 
 export interface messageState {
   messageId: number;
   createdAt: Date;
   updatedAt: Date;
   user: userState;
-  messageReactions: Array<messageReactionsState>;
+  messageReactions: Array<reactionsState>;
   thread: chatroomThreadState;
 }
 

client/src/common/store/types/modal-types.ts

@@ -35,7 +35,8 @@ export interface EmojiPickerState {
   isOpen: boolean;
   x: number;
   y: number;
-  messageId: number | null;
+  chatId: number | null;
+  type: string;
 }
 
 export interface ModalState {

client/src/common/store/types/message-reactions-type.ts → client/src/common/store/types/reactions-type.ts

@@ -1,4 +1,4 @@
-export interface messageReactionsState {
+export interface reactionsState {
   reactionId: number;
   title: string;
   reactionCount: number;

client/src/common/store/types/thread-types.ts

@@ -1,10 +1,13 @@
+import { socketReplyReactionState } from '@socket/types/reaction-types';
 import { userState } from '@store/types/user-types';
 
 export const LOAD_THREAD = 'LOAD_THREAD';
 export const LOAD_THREAD_ASYNC = 'LOAD_THREAD_ASYNC';
 export const INSERT_REPLY = 'INSERT_REPLY';
 export const LOAD_NEXT_REPLIES = 'LOAD_NEXT_REPLIES';
 export const LOAD_NEXT_REPLIES_ASYNC = 'LOAD_NEXT_REPLIES_ASYNC';
+export const ADD_REPLY_REACTION = 'ADD_MESSAGE_REACTION';
+export const DELETE_REPLY_REACTION = 'DELETE_MESSAGE_REACTION';
 
 export interface threadMessageState {
   messageId: number;
@@ -18,13 +21,13 @@ export interface threadMessageState {
 }
 
 export interface replyState {
-  messageId?: number;
-  replyId: number;
+  messageId: number;
   content: string;
   createdAt: Date;
-  updateAt: Date;
+  updatedAt: Date;
+  replyId: number;
+  replyReactions: Array<any>;
   user: userState;
-  replyReactions: Array<object>;
 }
 
 export interface repliesState {
@@ -34,6 +37,7 @@ export interface repliesState {
 export interface threadState {
   message: threadMessageState;
   replies: Array<replyState>;
+  selectedThreadId: number | null;
 }
 
 interface LoadThreadAction {
@@ -51,4 +55,14 @@ interface LoadNextReplies {
   payload: repliesState;
 }
 
-export type ThreadTypes = LoadThreadAction | InsertReply | LoadNextReplies;
+interface AddReplyReaction {
+  type: typeof ADD_REPLY_REACTION;
+  payload: socketReplyReactionState;
+}
+
+interface DeleteReplyReaction {
+  type: typeof DELETE_REPLY_REACTION;
+  payload: socketReplyReactionState;
+}
+
+export type ThreadTypes = LoadThreadAction | InsertReply | LoadNextReplies | AddReplyReaction | DeleteReplyReaction;

client/src/components/molecules/Actionbar/Actionbar.stories.tsx

@@ -11,5 +11,5 @@ const Template: Story<ActionbarProps> = (args) => <Actionbar {...args} />;
 
 export const BlackActionbar = Template.bind({});
 BlackActionbar.args = {
-  messageId: 1
+  chatId: 1
 };