Creates components and redux codes for user series listing

Author: velopert

velog-frontend/src/components/App.js

@@ -31,7 +31,7 @@ const App = () => (
       <Route path="/write" component={Write} />
       <Route exact path="/@:username/" component={User} />
       <Route exact path="/@:username/tags/:tag" component={User} />
-      <Route exact path="/@:username/:tab(history|about)" component={User} />
+      <Route exact path="/@:username/:tab(history|about|series)" component={User} />
       <Route path="/@:username/:urlSlug" component={Post} />
       <Route path="/posts/preview/:id" component={Post} />
       <Route path="/saves" component={Saves} />

velog-frontend/src/components/user/UserContent/UserContent.js

@@ -17,6 +17,9 @@ const UserContent = ({ type, children, side, username }: Props) => (
       <Link className={cx({ active: type === 'posts' })} to={`/@${username}`}>
         글
       </Link>
+      <Link className={cx({ active: type === 'series' })} to={`/@${username}/series`}>
+        시리즈
+      </Link>
       <Link className={cx({ active: type === 'history' })} to={`/@${username}/history`}>
         활동
       </Link>

velog-frontend/src/components/user/UserSeriesList/UserSeriesList.js

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react';
+import './UserSeriesList.scss';
+import UserSeriesListItem from '../UserSeriesListItem';
+
+type Props = {};
+const UserSeriesList = (props: Props) => {
+  return (
+    <div>
+      <UserSeriesListItem />
+      <UserSeriesListItem />
+      <UserSeriesListItem />
+      <UserSeriesListItem />
+      <UserSeriesListItem />
+      <UserSeriesListItem />
+    </div>
+  );
+};
+
+export default UserSeriesList;

velog-frontend/src/components/user/UserSeriesList/UserSeriesList.scss

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './UserSeriesList';

velog-frontend/src/components/user/UserSeriesList/index.js

@@ -0,0 +1,10 @@
+// @flow
+import React from 'react';
+import './UserSeriesListItem.scss';
+
+type Props = {};
+const UserSeriesListItem = (props: Props) => {
+  return <div>wat</div>;
+};
+
+export default UserSeriesListItem;

velog-frontend/src/components/user/UserSeriesListItem/UserSeriesListItem.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './UserSeriesListItem';

velog-frontend/src/components/user/UserSeriesListItem/UserSeriesListItem.scss

@@ -182,7 +182,7 @@ class PostViewer extends Component<Props> {
           url={this.props.match.url}
           informCopy={this.informCopy}
         />
-        {post.series && <PostSeriesInfo series={post.series} username={username} />}
+        {post.series && <PostSeriesInfo series={post.series} username={username || ''} />}
         <PostContent
           thumbnail={post.thumbnail}
           body={post.body}

velog-frontend/src/components/user/UserSeriesListItem/index.js

@@ -11,6 +11,7 @@ import { compose } from 'redux';
 import UserPostsSubpage from 'pages/user/UserPostsSubpage';
 import UserHistorySubpage from '../../pages/user/UserHistorySubpage';
 import UserAboutSubpage from '../../pages/user/UserAboutSubpage';
+import UserSeriesSubpage from '../../pages/user/UserSeriesSubpage';
 
 type Props = {
   match: Match,
@@ -62,6 +63,7 @@ class UserContentContainer extends Component<Props> {
         }
       >
         <Route exact path="/@:username" component={UserPostsSubpage} />
+        <Route path="/@:username/series" component={UserSeriesSubpage} />
         <Route path="/@:username/history" component={UserHistorySubpage} />
         <Route path="/@:username/tags/:tag" component={UserPostsSubpage} />
         <Route path="/@:username/about" component={UserAboutSubpage} />

velog-frontend/src/containers/post/PostViewer.js

@@ -0,0 +1,32 @@
+// @flow
+import React, { Component } from 'react';
+import { ProfileActions } from 'store/actionCreators';
+import { withRouter, type ContextRouter } from 'react-router-dom';
+import UserSeriesList from 'components/user/UserSeriesList/UserSeriesList';
+
+type Props = {} & ContextRouter;
+class UserSeriesContainer extends Component<Props> {
+  initialize = async () => {
+    const { username } = this.props.match.params;
+    try {
+      if (!username) return;
+      await ProfileActions.getSeriesList(username);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  componentDidMount() {
+    ProfileActions.setSideVisibility(false);
+    this.initialize();
+  }
+
+  componentWillUnmount() {
+    ProfileActions.setSideVisibility(true);
+  }
+
+  render() {
+    return <UserSeriesList />;
+  }
+}
+
+export default withRouter(UserSeriesContainer);

velog-frontend/src/containers/user/UserContentContainer.js

@@ -0,0 +1,10 @@
+// @flow
+import React from 'react';
+import UserSeriesContainer from '../../containers/user/UserSeriesContainer';
+
+type Props = {};
+const UserSeriesSubpage = (props: Props) => {
+  return <UserSeriesContainer />;
+};
+
+export default UserSeriesSubpage;

velog-frontend/src/containers/user/UserSeriesContainer.js

@@ -6,6 +6,7 @@ import * as UsersAPI from 'lib/api/users';
 import * as CommonAPI from 'lib/api/common';
 import type { ProfileLinks } from 'store/modules/settings';
 import * as MeAPI from 'lib/api/me';
+import * as SeriesAPI from 'lib/api/series';
 
 const GET_USER_TAGS = 'profile/GET_USER_TAGS';
 const GET_PROFILE = 'profile/GET_PROFILE';
@@ -17,6 +18,7 @@ const GET_USER_HISTORY = 'profile/GET_USER_HISTORY';
 const REVEAL_PREFETCHED_HISTORY = 'profile/REVEAL_PREFETCHED_HISTORY';
 const PREFETCH_USER_HISTORY = 'profile/PREFETCH_USER_HISTORY';
 const UPDATE_ABOUT = 'profile/UPDATE_ABOUT';
+const GET_SERIES_LIST = 'profile/GET_SERIES_LIST';
 
 export const actionCreators = {
   initialize: createAction(INITIALIZE),
@@ -29,6 +31,7 @@ export const actionCreators = {
   revealPrefetchedHistory: createAction(REVEAL_PREFETCHED_HISTORY),
   prefetchUserHistory: createAction(PREFETCH_USER_HISTORY, UsersAPI.getHistory),
   updateAbout: createAction(UPDATE_ABOUT, MeAPI.updateAbout, (meta: string) => meta),
+  getSeriesList: createAction(GET_SERIES_LIST, SeriesAPI.getSeriesList),
 };
 
 export type TagCountInfo = {
@@ -83,11 +86,27 @@ export type UserHistoryItem = {
   },
 };
 
+export type SeriesItemData = {
+  id: string,
+  name: string,
+  description: string,
+  thumbnail: string,
+  url_slug: string,
+  created_at: string,
+  updated_at: string,
+  user: {
+    username: string,
+    thumbnail: string,
+  },
+};
+
 type SetRawTagNameAction = ActionType<typeof actionCreators.setRawTagName>;
 type GetTagInfoResponseAction = GenericResponseAction<TagData, string>;
 type SetSideVisibilityAction = ActionType<typeof actionCreators.setSideVisibility>;
 type GetUserHistoryResponseAction = GenericResponseAction<UserHistoryItem[], any>;
 type UpdateAboutResponseAction = GenericResponseAction<{ about: string }, string>;
+type GetSeriesListResponseAction = GenericResponseAction<SeriesItemData, any>;
+
 
 export type ProfileState = {
   tagCounts: ?(TagCountInfo[]),
@@ -98,6 +117,7 @@ export type ProfileState = {
   side: boolean,
   historyEnd: false,
   prevAbout: string,
+  seriesList: ?(SeriesItemData[]),
 };
 
 const initialState = {
@@ -109,6 +129,7 @@ const initialState = {
   side: true,
   historyEnd: false,
   prevAbout: '',
+  seriesList: null,
 };
 
 const reducer = handleActions(
@@ -221,4 +242,13 @@ export default applyPenders(reducer, [
       });
     },
   },
+  {
+    type: GET_SERIES_LIST,
+    onSuccess: (state: ProfileState, { payload }: GetSeriesListResponseAction) => {
+      return {
+        ...state,
+        seriesList: payload.data,
+      };
+    },
+  },
 ]);