feat: chatroom 정보 연동 (#104)

* refactor: reducer 데이터 저장 호출 변경

* feat: chatroom reducer 정의

* feat: chatroom dispatch 정의

* feat: getChatroom axios api 정의

* feat: channel 이동 시 chatroom 정보 얻어오는 로직 추가

* feat: Chatroom Container 정의 및 Chatroom 정보 불러오기

Author: Do-ho

client/src/common/dispatch/chatroom-dispatch.ts

@@ -0,0 +1,9 @@
+import { api } from '@utils/index';
+import store from '@store/index';
+
+const getChatroomInfo = async (selectedChatroomId: number) => {
+  const chatroomInfo = await api.getChatroom(selectedChatroomId);
+  store.dispatch({ type: 'LOAD', ...chatroomInfo });
+};
+
+export { getChatroomInfo };

client/src/common/dispatch/index.ts

@@ -1,4 +1,5 @@
 import { getUserInfo } from './user-dispatch';
 import { getUserChatroom } from './user-chatroom-dispatch';
+import { getChatroomInfo } from './chatroom-dispatch';
 
-export { getUserInfo, getUserChatroom };
+export { getUserInfo, getUserChatroom, getChatroomInfo };

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

@@ -0,0 +1,29 @@
+const initialState = {
+  chatType: '',
+  description: '',
+  isPrivate: false,
+  title: '',
+  topic: null,
+  userCount: 0,
+  users: []
+};
+
+const chatroomReducer = (state = initialState, action: any) => {
+  switch (action.type) {
+    case 'LOAD':
+      return {
+        ...state,
+        chatType: action.chatType,
+        description: action.description,
+        isPrivate: action.isPrivate,
+        title: action.title,
+        topic: action.topic,
+        userCount: action.userCount,
+        users: action.users
+      };
+    default:
+      return state;
+  }
+};
+
+export default chatroomReducer;

client/src/common/reducer/rootReducer.ts

@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import userReducer from './user-reducer';
 import sidebarReducer from './sidebar-reducer';
+import chatroomReducer from './chatroom-reducer';
 
 const rootReducer = combineReducers({
-  userReducer,
-  sidebarReducer
+  userData: userReducer,
+  sidebarData: sidebarReducer,
+  chatroomData: chatroomReducer
 });
 
 export default rootReducer;

client/src/common/reducer/sidebar-reducer.ts

@@ -19,7 +19,6 @@ const sidebarReducer = (state = initialState, action: any) => {
         directMessages: action.directMessages
       };
     case 'UPDATESIDEBAR':
-    case 'SELECTCHATROOM':
       return {
         ...state,
         selectedChatroomId: action.selectedChatroomId

client/src/common/utils/api.ts

@@ -22,4 +22,9 @@ const getUserChatroom = async () => {
   return response.data;
 };
 
-export { getToken, oauthLogin, getUserInfo, getUserChatroom };
+const getChatroom = async (id: number) => {
+  const response = await axios.get(`/api/chatrooms/${id}`);
+  return response.data;
+};
+
+export { getToken, oauthLogin, getUserInfo, getUserChatroom, getChatroom };

client/src/components/molecules/Channel/ChannelContainer.tsx

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
+import { getChatroomInfo } from '@dispatch/index';
 import { Channel } from './Channel';
 
 function mapDispatchToProps(dispatch: any) {
   return {
     chatroomClick(selectedChatroomId: number) {
       dispatch({ type: 'UPDATESIDEBAR', selectedChatroomId });
+      getChatroomInfo(selectedChatroomId);
     }
   };
 }

client/src/components/molecules/DM/DMContainer.tsx

@@ -1,10 +1,12 @@
 import { connect } from 'react-redux';
+import { getChatroomInfo } from '@dispatch/index';
 import { DM } from './DM';
 
 function mapDispatchToProps(dispatch: any) {
   return {
     chatroomClick(selectedChatroomId: number) {
       dispatch({ type: 'UPDATESIDEBAR', selectedChatroomId });
+      getChatroomInfo(selectedChatroomId);
     }
   };
 }

client/src/components/organisms/Header/HeaderContainer.tsx

@@ -1,10 +1,9 @@
 import { connect } from 'react-redux';
 import { Header } from './Header';
 
-function mapReduxStateToReactProps(reducer: any) {
-  const state = reducer.userReducer;
+function mapReduxStateToReactProps(state: any) {
   return {
-    profileUri: state.profileUri
+    profileUri: state.userData.profileUri
   };
 }
 

client/src/components/organisms/Sidebar/SidebarContainer.tsx

@@ -1,14 +1,13 @@
 import { connect } from 'react-redux';
 import { Sidebar } from './Sidebar';
 
-function mapReduxStateToReactProps(reducer: any) {
-  const state = reducer.sidebarReducer;
+function mapReduxStateToReactProps(state: any) {
   return {
-    starred: state.starred,
-    otherSections: state.otherSections,
-    channels: state.channels,
-    directMessages: state.directMessages,
-    selectedChatroomId: state.selectedChatroomId
+    starred: state.sidebarData.starred,
+    otherSections: state.sidebarData.otherSections,
+    channels: state.sidebarData.channels,
+    directMessages: state.sidebarData.directMessages,
+    selectedChatroomId: state.sidebarData.selectedChatroomId
   };
 }