Merge pull request #179 from boostcamp-2020/develop

4주차 배포 수정

Author: Do-ho

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

@@ -0,0 +1,3 @@
+import { INIT_CHANNELS_ASYNC } from '../types/channel-types';
+
+export const initChannels = () => ({ type: INIT_CHANNELS_ASYNC });

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

@@ -4,6 +4,7 @@ import {
   PICK_CHANNEL_ASYNC,
   INSERT_MESSAGE,
   ADD_CHANNEL_ASYNC,
+  RESET_SELECTED_CHANNEL,
   LOAD_NEXT_MESSAGES_ASYNC
 } from '../types/chatroom-types';
 
@@ -12,4 +13,5 @@ export const initSidebarAsync = () => ({ type: INIT_SIDEBAR_ASYNC });
 export const pickChannel = (payload: any) => ({ type: PICK_CHANNEL_ASYNC, payload });
 export const insertMessage = (payload: any) => ({ type: INSERT_MESSAGE, payload });
 export const addChannel = (payload: any) => ({ type: ADD_CHANNEL_ASYNC, payload });
+export const resetSelectedChannel = () => ({ type: RESET_SELECTED_CHANNEL });
 export const loadNextMessages = (payload: any) => ({ type: LOAD_NEXT_MESSAGES_ASYNC, payload });

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

@@ -1,6 +1,15 @@
-import { CREATE_MODAL_OPEN, CREATE_MODAL_CLOSE, CHANNEL_MODAL_OPEN, CHANNEL_MODAL_CLOSE } from '@store/types/modal-types';
+import {
+  CREATE_MODAL_OPEN,
+  CREATE_MODAL_CLOSE,
+  CHANNEL_MODAL_OPEN,
+  CHANNEL_MODAL_CLOSE,
+  USERBOX_MODAL_OPEN,
+  USERBOX_MODAL_CLOSE
+} from '@store/types/modal-types';
 
 export const createModalOpen = () => ({ type: CREATE_MODAL_OPEN });
 export const createModalClose = () => ({ type: CREATE_MODAL_CLOSE });
 export const channelModalOpen = (payload: any) => ({ type: CHANNEL_MODAL_OPEN, payload });
 export const channelModalClose = () => ({ type: CHANNEL_MODAL_CLOSE });
+export const userboxModalOpen = () => ({ type: USERBOX_MODAL_OPEN });
+export const userboxModalClose = () => ({ type: USERBOX_MODAL_CLOSE });

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

@@ -0,0 +1,18 @@
+import { channelsState, ChannelTypes, INIT_CHANNELS } from '../types/channel-types';
+
+const initialState: channelsState = {
+  channelCount: 0,
+  channels: []
+};
+
+export default function channelReducer(state = initialState, action: ChannelTypes) {
+  switch (action.type) {
+    case INIT_CHANNELS:
+      return {
+        channelCount: action.payload.channelCount,
+        channels: action.payload.channels
+      };
+    default:
+      return state;
+  }
+}

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

@@ -8,6 +8,7 @@ import {
   INIT_SIDEBAR,
   INSERT_MESSAGE,
   ADD_CHANNEL,
+  RESET_SELECTED_CHANNEL,
   LOAD_NEXT_MESSAGES
 } from '../types/chatroom-types';
 
@@ -66,6 +67,22 @@ export default function chatroomReducer(state = initialState, action: ChatroomTy
         ...state,
         channels: newChannels
       };
+    case RESET_SELECTED_CHANNEL:
+      const selectedChatroom = {
+        chatType: '',
+        description: '',
+        isPrivate: false,
+        title: '',
+        topic: '',
+        userCount: 0,
+        users: []
+      };
+      return {
+        ...state,
+        selectedChatroom,
+        selectedChatroomId: null,
+        messages: []
+      };
     case LOAD_NEXT_MESSAGES:
       const nextMessages = action.payload.messages;
       nextMessages.push(...state.messages);

client/src/common/store/reducers/index.ts

@@ -2,11 +2,13 @@ import { combineReducers } from 'redux';
 import userReducer from './user-reducer';
 import chatroomReducer from './chatroom-reducer';
 import modalReducer from './modal-reducer';
+import channelReducer from './channel-reducer';
 
 export const rootReducer = combineReducers({
   user: userReducer,
   chatroom: chatroomReducer,
-  modal: modalReducer
+  modal: modalReducer,
+  channel: channelReducer
 });
 
 export type RootState = ReturnType<typeof rootReducer>;

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

@@ -1,8 +1,18 @@
-import { ModalState, ModalTypes, CREATE_MODAL_OPEN, CREATE_MODAL_CLOSE, CHANNEL_MODAL_OPEN, CHANNEL_MODAL_CLOSE } from '@store/types/modal-types';
+import {
+  ModalState,
+  ModalTypes,
+  CREATE_MODAL_OPEN,
+  CREATE_MODAL_CLOSE,
+  CHANNEL_MODAL_OPEN,
+  CHANNEL_MODAL_CLOSE,
+  USERBOX_MODAL_OPEN,
+  USERBOX_MODAL_CLOSE
+} from '@store/types/modal-types';
 
 const initialState: ModalState = {
   createModal: { isOpen: false },
-  channelModal: { isOpen: false, x: 0, y: 0 }
+  channelModal: { isOpen: false, x: 0, y: 0 },
+  userboxModal: { isOpen: false }
 };
 
 const ModalReducer = (state = initialState, action: ModalTypes) => {
@@ -15,6 +25,10 @@ const ModalReducer = (state = initialState, action: ModalTypes) => {
       return { ...state, channelModal: { isOpen: true, x: action.payload.x, y: action.payload.y } };
     case CHANNEL_MODAL_CLOSE:
       return { ...state, channelModal: { isOpen: false } };
+    case USERBOX_MODAL_OPEN:
+      return { ...state, userboxModal: { isOpen: true } };
+    case USERBOX_MODAL_CLOSE:
+      return { ...state, userboxModal: { isOpen: false } };
     default:
       return state;
   }

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

@@ -0,0 +1,17 @@
+import { call, put, takeEvery } from 'redux-saga/effects';
+import API from '@utils/api';
+import { INIT_CHANNELS, INIT_CHANNELS_ASYNC } from '../types/channel-types';
+
+function* initChannelsSaga() {
+  try {
+    const channelCount = 0;
+    const channels = yield call(API.getChannels);
+    yield put({ type: INIT_CHANNELS, payload: { channelCount, channels } });
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+export function* channelSaga() {
+  yield takeEvery(INIT_CHANNELS_ASYNC, initChannelsSaga);
+}

client/src/common/store/sagas/index.ts

@@ -1,7 +1,8 @@
 import { all } from 'redux-saga/effects';
 import { chatroomSaga } from './chatroom-saga';
 import { userSaga } from './user-saga';
+import { channelSaga } from './channel-saga';
 
 export function* rootSaga() {
-  yield all([chatroomSaga(), userSaga()]);
+  yield all([chatroomSaga(), userSaga(), channelSaga()]);
 }

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

@@ -0,0 +1,23 @@
+export const INIT_CHANNELS = 'INIT_CHANNELS';
+export const INIT_CHANNELS_ASYNC = 'INIT_CHANNELS_ASYNC';
+
+export interface channelState {
+  channelId: number;
+  title: string;
+  description: string;
+  isPrivate: boolean;
+  members: number;
+  isJoined: boolean;
+}
+
+export interface channelsState {
+  channelCount: number;
+  channels: Array<channelState>;
+}
+
+interface InitChannelsAction {
+  type: typeof INIT_CHANNELS;
+  payload: channelsState;
+}
+
+export type ChannelTypes = InitChannelsAction;