Merge pull request #186 from boostcamp-2020/develop

Release Browse Page
boostcamp-2020 · Dec 12, 2020 · 60a4060 · 60a4060
2 parents 99720a5 + c76909f
commit 60a4060
Show file tree

Hide file tree

Showing 25 changed files with 305 additions and 63 deletions.
diff --git a/client/.eslintrc.json b/client/.eslintrc.json
@@ -40,6 +40,7 @@
       }
     ],
     "linebreak-style": 0,
+    "no-case-declarations": 0,
     "no-use-before-define": "off",
     "import/prefer-default-export": "off",
     "import/no-unresolved": "off",

diff --git a/client/src/common/socket/emits/chatroom.ts b/client/src/common/socket/emits/chatroom.ts
@@ -0,0 +1,6 @@
+import { JOIN_CHATROOM, joinChatroomState } from '@socket/types/chatroom-types';
+import socket from '../socketIO';
+
+export const joinChatroom = (chatroomId: joinChatroomState) => {
+  socket.emit(JOIN_CHATROOM, { chatroomId });
+};
diff --git a/client/src/common/socket/types/chatroom-types.ts b/client/src/common/socket/types/chatroom-types.ts
@@ -0,0 +1,5 @@
+export const JOIN_CHATROOM = 'join chatroom';
+
+export interface joinChatroomState {
+  chatroomId: number;
+}
diff --git a/client/src/common/store/actions/channel-action.ts b/client/src/common/store/actions/channel-action.ts
@@ -1,3 +1,5 @@
-import { INIT_CHANNELS_ASYNC } from '../types/channel-types';
+import { INIT_CHANNELS_ASYNC, LOAD_NEXT_CHANNELS_ASYNC, JOIN_CHANNEL_ASYNC } from '../types/channel-types';
 
 export const initChannels = () => ({ type: INIT_CHANNELS_ASYNC });
+export const loadNextChannels = (payload: any) => ({ type: LOAD_NEXT_CHANNELS_ASYNC, payload });
+export const joinChannel = (payload: any) => ({ type: JOIN_CHANNEL_ASYNC, payload });
diff --git a/client/src/common/store/reducers/channel-reducer.ts b/client/src/common/store/reducers/channel-reducer.ts
@@ -1,4 +1,4 @@
-import { channelsState, ChannelTypes, INIT_CHANNELS } from '../types/channel-types';
+import { channelState, channelsState, ChannelTypes, INIT_CHANNELS, LOAD_NEXT_CHANNELS, JOIN_CHANNEL } from '../types/channel-types';
 
 const initialState: channelsState = {
   channelCount: 0,
@@ -12,6 +12,18 @@ export default function channelReducer(state = initialState, action: ChannelType
         channelCount: action.payload.channelCount,
         channels: action.payload.channels
       };
+    case LOAD_NEXT_CHANNELS:
+      return {
+        ...state,
+        channels: [...state.channels, ...action.payload.channels]
+      };
+    case JOIN_CHANNEL:
+      const { chatroomId } = action.payload;
+      const channels = state.channels.map((channel: channelState) => {
+        if (channel.chatroomId === chatroomId) return { ...channel, isJoined: true };
+        return channel;
+      });
+      return { ...state, channels };
     default:
       return state;
   }

diff --git a/client/src/common/store/sagas/channel-saga.ts b/client/src/common/store/sagas/channel-saga.ts
@@ -1,17 +1,52 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
 import API from '@utils/api';
-import { INIT_CHANNELS, INIT_CHANNELS_ASYNC } from '../types/channel-types';
+import { joinChatroom } from '@socket/emits/chatroom';
+import {
+  INIT_CHANNELS,
+  INIT_CHANNELS_ASYNC,
+  JOIN_CHANNEL,
+  JOIN_CHANNEL_ASYNC,
+  LOAD_NEXT_CHANNELS,
+  LOAD_NEXT_CHANNELS_ASYNC
+} from '../types/channel-types';
+import { ADD_CHANNEL } from '../types/chatroom-types';
 
 function* initChannelsSaga() {
   try {
-    const channelCount = 0;
-    const channels = yield call(API.getChannels);
+    const { channels, channelCount } = yield call(API.getChannels);
     yield put({ type: INIT_CHANNELS, payload: { channelCount, channels } });
   } catch (e) {
     console.log(e);
   }
 }
 
+function* loadNextChannels(action: any) {
+  try {
+    const { title } = action.payload;
+    const nextChannels = yield call(API.getNextChannels, title);
+    yield put({ type: LOAD_NEXT_CHANNELS, payload: { channels: nextChannels } });
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+function* joinChannel(action: any) {
+  try {
+    const { chatroomId } = action.payload;
+    yield call(API.joinChannel, chatroomId);
+    yield put({ type: JOIN_CHANNEL, payload: { chatroomId } });
+    const chatroom = yield call(API.getChatroom, chatroomId);
+    const { chatType, isPrivate, title } = chatroom;
+    const payload = { chatroomId, chatType, isPrivate, title };
+    joinChatroom(chatroomId);
+    yield put({ type: ADD_CHANNEL, payload });
+  } catch (e) {
+    console.log(e);
+  }
+}
+
 export function* channelSaga() {
   yield takeEvery(INIT_CHANNELS_ASYNC, initChannelsSaga);
+  yield takeEvery(LOAD_NEXT_CHANNELS_ASYNC, loadNextChannels);
+  yield takeEvery(JOIN_CHANNEL_ASYNC, joinChannel);
 }
diff --git a/client/src/common/store/sagas/chatroom-saga.ts b/client/src/common/store/sagas/chatroom-saga.ts
@@ -1,5 +1,6 @@
 import { call, put, takeEvery } from 'redux-saga/effects';
 import API from '@utils/api';
+import { joinChatroom } from '@socket/emits/chatroom';
 import {
   LOAD,
   LOAD_ASYNC,
@@ -53,6 +54,7 @@ function* addChannel(action: any) {
   try {
     const chatroomId = yield call(API.createChannel, action.payload.title, action.payload.description, action.payload.isPrivate);
     const payload = { chatroomId, chatType: 'Channel', isPrivate: action.payload.isPrivate, title: action.payload.title };
+    joinChatroom(chatroomId);
     yield put({ type: ADD_CHANNEL, payload });
   } catch (e) {
     alert('같은 이름의 채널이 존재합니다.');

diff --git a/client/src/common/store/types/channel-types.ts b/client/src/common/store/types/channel-types.ts
@@ -1,10 +1,14 @@
 export const INIT_CHANNELS = 'INIT_CHANNELS';
 export const INIT_CHANNELS_ASYNC = 'INIT_CHANNELS_ASYNC';
+export const LOAD_NEXT_CHANNELS = 'LOAD_NEXT_CHANNELS';
+export const LOAD_NEXT_CHANNELS_ASYNC = 'LOAD_NEXT_CHANNELS_ASYNC';
+export const JOIN_CHANNEL = 'JOIN_CHANNEL';
+export const JOIN_CHANNEL_ASYNC = 'JOIN_CHANNEL_ASYNC';
 
 export interface channelState {
-  channelId: number;
+  chatroomId: number;
   title: string;
-  description: string;
+  description?: string;
   isPrivate: boolean;
   members: number;
   isJoined: boolean;
@@ -15,9 +19,23 @@ export interface channelsState {
   channels: Array<channelState>;
 }
 
+export interface joinChannelState {
+  chatroomId: number;
+}
+
 interface InitChannelsAction {
   type: typeof INIT_CHANNELS;
   payload: channelsState;
 }
 
-export type ChannelTypes = InitChannelsAction;
+interface LoadNextChannels {
+  type: typeof LOAD_NEXT_CHANNELS;
+  payload: channelsState;
+}
+
+interface JoinChannel {
+  type: typeof JOIN_CHANNEL;
+  payload: joinChannelState;
+}
+
+export type ChannelTypes = InitChannelsAction | LoadNextChannels | JoinChannel;
diff --git a/client/src/common/utils/api.ts b/client/src/common/utils/api.ts
@@ -71,6 +71,17 @@ export default {
 
   getChannels: async () => {
     const response = await axios.get(`api/chatrooms`);
+    const channelCount = response.headers['x-total-count'];
+    return { channels: response.data, channelCount };
+  },
+
+  getNextChannels: async (title: string) => {
+    const response = await axios.get(`api/chatrooms?offsetTitle=${title}`);
+    return response.data;
+  },
+
+  joinChannel: async (chatroomId: number) => {
+    const response = await axios.post(`api/user-chatrooms`, { chatroomId });
     return response.data;
   }
 };
diff --git a/client/src/components/atoms/Button/Button.tsx b/client/src/components/atoms/Button/Button.tsx
@@ -9,12 +9,15 @@ interface ButtonProps {
   fontColor: string;
   isBold?: boolean;
   hoverColor?: string;
+  width?: string;
+  height?: string;
   onClick?: () => void;
 }
 
 const StyledButton = styled.button<any>`
   display: flex;
   align-items: center;
+  justify-content: center;
   background-color: ${(props) => props.backgroundColor};
   border: 2px solid ${(props) => props.borderColor};
   color: ${(props) => props.fontColor};
@@ -24,6 +27,8 @@ const StyledButton = styled.button<any>`
   cursor: pointer;
   font-weight: ${(props) => (props.isBold ? 'bold' : null)};
   ${(props) => (props.hoverColor ? `&:hover { background-color: ${color.hover_primary}}` : '')}
+  ${(props) => (props.width ? `width: ${props.width}}` : '')}
+  ${(props) => (props.height ? `height: ${props.height}}` : '')}
 `;
 
 const Button: React.FC<ButtonProps> = ({ children, backgroundColor, borderColor, fontColor, isBold, hoverColor, ...props }) => {

diff --git a/client/src/components/molecules/BrowsePageChannelBody/BrowsePageChannelBody.stories.tsx b/client/src/components/molecules/BrowsePageChannelBody/BrowsePageChannelBody.stories.tsx
@@ -12,6 +12,6 @@ const Template: Story<BrowsePageChannelBodyProps> = (args) => <BrowsePageChannel
 export const BlackBrowsePageChannelBody = Template.bind({});
 BlackBrowsePageChannelBody.args = {
   isJoined: true,
-  memberCount: 4,
+  members: 4,
   description: '공지사항을 안내하는 채널'
 };
diff --git a/client/src/components/molecules/BrowsePageChannelBody/BrowsePageChannelBody.tsx b/client/src/components/molecules/BrowsePageChannelBody/BrowsePageChannelBody.tsx
@@ -5,7 +5,7 @@ import { color } from '@theme/index';
 
 interface BrowsePageChannelBodyProps {
   isJoined?: boolean;
-  memberCount: number;
+  members: number;
   description?: string;
 }
 
@@ -16,7 +16,7 @@ const BrowsePageChannelBodyWrap = styled.div<any>`
   }
 `;
 
-const BrowsePageChannelBody: React.FC<BrowsePageChannelBodyProps> = ({ isJoined, memberCount, description, ...props }) => {
+const BrowsePageChannelBody: React.FC<BrowsePageChannelBodyProps> = ({ isJoined, members, description, ...props }) => {
   return (
     <BrowsePageChannelBodyWrap {...props}>
       {isJoined && (
@@ -25,7 +25,7 @@ const BrowsePageChannelBody: React.FC<BrowsePageChannelBodyProps> = ({ isJoined,
         </Text>
       )}
       <Text fontColor={color.text_tertiary} size="superSmall">
-        {`${memberCount} members`}
+        {`${members} members`}
       </Text>
       {description && (
         <Text fontColor={color.text_tertiary} size="superSmall">

diff --git a/client/src/components/molecules/BrowsePageChannelButton/BrowsePageChannelButton.tsx b/client/src/components/molecules/BrowsePageChannelButton/BrowsePageChannelButton.tsx
@@ -12,7 +12,13 @@ const BrowsePageChannelButton: React.FC<BrowsePageChannelButtonProps> = ({ isJoi
   return (
     <>
       {isJoined ? (
-        <Button onClick={handlingLeaveButton} backgroundColor={color.tertiary} borderColor={color.secondary} fontColor={color.primary} {...props}>
+        <Button
+          onClick={handlingLeaveButton}
+          backgroundColor={color.tertiary}
+          borderColor={color.secondary}
+          fontColor={color.primary}
+          width="5rem"
+          {...props}>
           Leave
         </Button>
       ) : (
@@ -21,6 +27,7 @@ const BrowsePageChannelButton: React.FC<BrowsePageChannelButtonProps> = ({ isJoi
           backgroundColor={color.button_secondary}
           borderColor={color.button_secondary}
           fontColor={color.text_secondary}
+          width="5rem"
           {...props}>
           Join
         </Button>

diff --git a/client/src/components/molecules/BrowsePageChannelHeader/BrowsePageChannelHeader.stories.tsx b/client/src/components/molecules/BrowsePageChannelHeader/BrowsePageChannelHeader.stories.tsx
@@ -11,6 +11,6 @@ const Template: Story<BrowsePageChannelHeaderProps> = (args) => <BrowsePageChann
 
 export const BlackBrowsePageChannelHeader = Template.bind({});
 BlackBrowsePageChannelHeader.args = {
-  name: 'notice',
+  title: 'notice',
   isPrivate: true
 };
diff --git a/client/src/components/molecules/BrowsePageChannelHeader/BrowsePageChannelHeader.tsx b/client/src/components/molecules/BrowsePageChannelHeader/BrowsePageChannelHeader.tsx
@@ -6,7 +6,7 @@ import LockIcon from '@imgs/lock-icon.png';
 import { color } from '@theme/index';
 
 interface BrowsePageChannelHeaderProps {
-  name: string;
+  title: string;
   isPrivate?: boolean;
 }
 
@@ -17,12 +17,12 @@ const BrowsePageChannelHeaderWrap = styled.div<any>`
   }
 `;
 
-const BrowsePageChannelHeader: React.FC<BrowsePageChannelHeaderProps> = ({ name, isPrivate, ...props }) => {
+const BrowsePageChannelHeader: React.FC<BrowsePageChannelHeaderProps> = ({ title, isPrivate, ...props }) => {
   return (
     <BrowsePageChannelHeaderWrap {...props}>
       <Icon size="small" src={isPrivate ? LockIcon : ChannelIcon} isHover={false} />
       <Text fontColor={color.primary} size="small" isBold={true}>
-        {name}
+        {title}
       </Text>
     </BrowsePageChannelHeaderWrap>
   );

diff --git a/client/src/components/molecules/BrowsePageControls/BrowsePageControls.tsx b/client/src/components/molecules/BrowsePageControls/BrowsePageControls.tsx
@@ -24,7 +24,11 @@ const BrowsePageControlsWrap = styled.div<any>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.4rem 1.5rem;
+  padding-top: 0.4rem;
+  padding-bottom: 1rem;
+  margin-left: 1.5rem;
+  margin-right: 2.5rem;
+  border-bottom: 0.5px solid ${color.border_secondary};
 `;
 
 const BrowsePageControlsButtonWrap = styled.div<any>`

diff --git a/client/src/components/molecules/BrowsePageSearchBar/BrowsePageSearchBar.tsx b/client/src/components/molecules/BrowsePageSearchBar/BrowsePageSearchBar.tsx
@@ -20,7 +20,7 @@ const StyledInput = styled.input<any>`
   border: 0 none;
   outline: none;
   width: fill-available;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
 `;
 
 const InputHintWrap = styled.div<any>`

diff --git a/client/src/components/organisms/BrowsePageChannel/BrowsePageChannel.stories.tsx b/client/src/components/organisms/BrowsePageChannel/BrowsePageChannel.stories.tsx
@@ -9,16 +9,12 @@ export default {
 
 const Template: Story<BrowsePageChannelProps> = (args) => <BrowsePageChannel {...args} />;
 
-const handlingJoinButton = () => {};
-const handlingLeaveButton = () => {};
-
 export const BlackBrowsePageChannel = Template.bind({});
 BlackBrowsePageChannel.args = {
-  name: 'notice',
+  chatroomId: 1,
+  title: 'notice',
   isJoined: true,
-  memberCount: 4,
+  members: 4,
   description: '공지사항을 안내하는 채널',
-  isPrivate: true,
-  handlingJoinButton,
-  handlingLeaveButton
+  isPrivate: true
 };