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;

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

@@ -7,6 +7,7 @@ export const PICK_CHANNEL_ASYNC = 'PICK_CHANNEL_ASYNC';
 export const INSERT_MESSAGE = 'INSERT_MESSAGE';
 export const ADD_CHANNEL = 'ADD_CHANNEL';
 export const ADD_CHANNEL_ASYNC = 'ADD_CHANNEL_ASYNC';
+export const RESET_SELECTED_CHANNEL = 'RESET_SELECTED_CHANNEL';
 export const LOAD_NEXT_MESSAGES = 'LOAD_NEXT_MESSAGES';
 export const LOAD_NEXT_MESSAGES_ASYNC = 'LOAD_NEXT_MESSAGES_ASYNC';
 
@@ -78,9 +79,20 @@ interface AddChannelAction {
   payload: selectedChatroomState;
 }
 
+interface ResetSelectedChannel {
+  type: typeof RESET_SELECTED_CHANNEL;
+}
+
 interface LoadNextAction {
   type: typeof LOAD_NEXT_MESSAGES;
   payload: messagesState;
 }
 
-export type ChatroomTypes = LoadChatroomAction | InitSidebarAction | PickChannelAction | InsertMessageAction | AddChannelAction | LoadNextAction;
+export type ChatroomTypes =
+  | LoadChatroomAction
+  | InitSidebarAction
+  | PickChannelAction
+  | InsertMessageAction
+  | AddChannelAction
+  | ResetSelectedChannel
+  | LoadNextAction;

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

@@ -2,6 +2,8 @@ export const CREATE_MODAL_OPEN = 'CREATE_MODAL_OPEN';
 export const CREATE_MODAL_CLOSE = 'CREATE_MODAL_CLOSE';
 export const CHANNEL_MODAL_OPEN = 'CHANNEL_MODAL_OPEN';
 export const CHANNEL_MODAL_CLOSE = 'CHANNEL_MODAL_CLOSE';
+export const USERBOX_MODAL_OPEN = 'USERBOX_MODAL_OPEN';
+export const USERBOX_MODAL_CLOSE = 'USERBOX_MODAL_CLOSE';
 
 export interface CreateChannelModalState {
   isOpen: boolean;
@@ -13,9 +15,14 @@ export interface ChannelModalState {
   y: number;
 }
 
+export interface UserBoxModalState {
+  isOpen: boolean;
+}
+
 export interface ModalState {
   createModal: CreateChannelModalState;
   channelModal: ChannelModalState;
+  userboxModal: UserBoxModalState;
 }
 
 interface CreateChannelModalOpenAction {
@@ -38,4 +45,18 @@ interface ChannelModalCloseAction {
   payload: ChannelModalState;
 }
 
-export type ModalTypes = CreateChannelModalOpenAction | CreateChannelModalCloseAction | ChannelModalOpenAction | ChannelModalCloseAction;
+interface UserBoxModalOpenAction {
+  type: typeof USERBOX_MODAL_OPEN;
+}
+
+interface UserBoxModalCloseAction {
+  type: typeof USERBOX_MODAL_CLOSE;
+}
+
+export type ModalTypes =
+  | CreateChannelModalOpenAction
+  | CreateChannelModalCloseAction
+  | ChannelModalOpenAction
+  | ChannelModalCloseAction
+  | UserBoxModalOpenAction
+  | UserBoxModalCloseAction;

client/src/common/utils/api.ts

@@ -55,7 +55,7 @@ export default {
   },
 
   getNextMessages: async (chatroomId: number, offsetId: number) => {
-    const response = await axios.get(`api/messages/${chatroomId}/${offsetId}`);
+    const response = await axios.get(`api/messages/${chatroomId}/?offsetId=${offsetId}`);
     return response.data;
   },
 
@@ -67,5 +67,10 @@ export default {
     } catch (e) {
       throw new Error('Channel creation failed.');
     }
+  },
+
+  getChannels: async () => {
+    const response = await axios.get(`api/chatrooms`);
+    return response.data;
   }
 };

client/src/common/utils/auth.ts

@@ -0,0 +1,3 @@
+export const checkAuthToToken = () => {
+  return !!localStorage.getItem('token');
+};

client/src/common/utils/blockPage.ts

@@ -1,12 +1,10 @@
-const checkAuthToToken = () => {
-  return !!localStorage.getItem('token');
-};
+import { auth } from '@utils/index';
 
 const blockPage = () => {
-  if (checkAuthToToken() && window.location.pathname === '/login') {
+  if (auth.checkAuthToToken() && window.location.pathname === '/login') {
     window.location.href = '/';
   }
-  if (!checkAuthToToken() && window.location.pathname !== '/login') {
+  if (!auth.checkAuthToToken() && window.location.pathname !== '/login') {
     window.location.href = '/login';
   }
 };

client/src/common/utils/index.ts

@@ -3,5 +3,6 @@ import * as uriParser from './uriParser';
 import { blockPage } from './blockPage';
 import registerToken from './registerToken';
 import { logout } from './logout';
+import * as auth from './auth';
 
-export { API, uriParser, blockPage, registerToken, logout };
+export { API, uriParser, blockPage, registerToken, logout, auth };

client/src/common/utils/registerToken.ts

@@ -1,14 +1,15 @@
-import { API, uriParser } from '@utils/index';
+import { API, uriParser, auth } from '@utils/index';
 
 const registerToken = async () => {
-  if (uriParser.isExistParseCode()) {
+  if (uriParser.isExistParseCodeUrl()) {
     const code = uriParser.getCode();
     const token = await API.getToken(code);
     if (token) {
       localStorage.setItem('token', token);
-      window.location.href = '/';
+      window.location.href = '/client/1';
     }
-  }
+  } else if (auth.checkAuthToToken()) window.location.href = '/client/1';
+  else window.location.href = '/login';
 };
 
 export default registerToken;

client/src/common/utils/uriParser.ts

@@ -1,4 +1,4 @@
-export const isExistParseCode = () => {
+export const isExistParseCodeUrl = () => {
   const pattern = new RegExp(/^\?code=\w+$/);
   return pattern.test(window.location.search);
 };
@@ -10,9 +10,19 @@ export const getCode = () => {
 };
 
 export const getChatroomId = () => {
-  const isChatroomUrlpattern = new RegExp(/^\/client\/[0-9]+$/);
+  const isChatroomUrlpattern = new RegExp(/^\/client\/[0-9]+(\/thread\/[0-9]+)*$/);
   if (isChatroomUrlpattern.test(window.location.pathname)) {
-    const pattern = new RegExp(/[^(/client/)]/);
+    const pattern = new RegExp(/[0-9]+/g);
+    const code = pattern.exec(window.location.pathname);
+    return code ? Number(code[0]) : null;
+  }
+  return null;
+};
+
+export const getThreadId = () => {
+  const isThreadUrlpattern = new RegExp(/^\/client\/[0-9]+(\/thread\/[0-9]+)*$/);
+  if (isThreadUrlpattern.test(window.location.pathname)) {
+    const pattern = new RegExp(/[0-9]+$/g);
     const code = pattern.exec(window.location.pathname);
     return code ? Number(code[0]) : null;
   }

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

@@ -7,14 +7,9 @@ export default {
   component: BrowsePageControls
 } as Meta;
 
-const handlingSortButton = () => {};
-const handlingFilterButton = () => {};
-
 const Template: Story<BrowsePageControlsProps> = (args) => <BrowsePageControls {...args} />;
 
 export const BlackBrowsePageControls = Template.bind({});
 BlackBrowsePageControls.args = {
-  channelCount: 193,
-  handlingSortButton,
-  handlingFilterButton
+  channelCount: 193
 };