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
   };
 }
 

client/src/pages/Chatroom.tsx renamed to client/src/pages/Chatroom/Chatroom.tsx

@@ -1,17 +1,22 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
+import { getChatroomInfo } from '@dispatch/index';
 import { ChatroomHeader, ChatroomBody } from '@components/organisms';
 
 interface ChatroomProps {
   children: React.ReactNode;
   title: string;
+  selectedChatroomId: number;
 }
 
 const ChatroomContainer = styled.div<any>`
   height: 100%;
 `;
 
-const Chatroom: React.FC<ChatroomProps> = ({ title = '5주-그룹-프로젝트-슬랙b', children, ...props }) => {
+const Chatroom: React.FC<ChatroomProps> = ({ title, selectedChatroomId, children, ...props }) => {
+  useEffect(() => {
+    getChatroomInfo(selectedChatroomId);
+  }, []);
   return (
     <ChatroomContainer {...props}>
       <ChatroomHeader title={title}>{}</ChatroomHeader>

client/src/pages/Chatroom/ChatroomContainer.tsx

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { Chatroom } from './Chatroom';
+
+function mapReduxStateToReactProps(state: any) {
+  return {
+    selectedChatroomId: state.sidebarData.selectedChatroomId,
+    title: state.chatroomData.title
+  };
+}
+
+export default connect(mapReduxStateToReactProps)(Chatroom);

client/src/pages/index.ts

@@ -1,4 +1,4 @@
-import { Chatroom } from './Chatroom';
+import Chatroom from './Chatroom/ChatroomContainer';
 import { Login } from './Login';
 
 export { Chatroom, Login };