Implements series view

Author: velopert

velog-backend/src/database/models/Series.js

@@ -51,6 +51,8 @@ export const serializeSeries = data => ({
     'updated_at',
   ]),
   user: {
+    id: data.user.id,
+    short_bio: data.user.user_profile.short_bio,
     username: data.user.username,
     thumbnail: data.user.user_profile.thumbnail,
   },

velog-backend/src/router/series/series.ctrl.js

@@ -1,12 +1,15 @@
 // @flow
 import type { Context } from 'koa';
 import Joi from 'joi';
-import { checkEmpty, validateSchema, isUUID } from 'lib/common';
+import {
+  checkEmpty,
+  validateSchema,
+  isUUID,
+  formatShortDescription,
+} from 'lib/common';
 import { UserProfile, User, Post } from 'database/models';
 import pick from 'lodash/pick';
-import {
-  getSeriesPostCountList,
-} from 'database/rawQuery/series';
+import { getSeriesPostCountList } from 'database/rawQuery/series';
 import SeriesPosts from '../../database/models/SeriesPosts';
 import Series, { serializeSeries } from '../../database/models/Series';
 
@@ -238,7 +241,8 @@ export const getSeries = async (ctx: Context) => {
     });
     serialized.posts = seriesPosts.map(p => ({
       index: p.index,
-      ...pick(p.post, ['id', 'thumbnail', 'title', 'released_at']),
+      ...pick(p.post, ['id', 'thumbnail', 'title', 'released_at', 'meta', 'url_slug']),
+      body: formatShortDescription(p.post.body),
     }));
     ctx.body = serialized;
   } catch (e) {

velog-frontend/src/components/series/SeriesPostItem/SeriesPostItem.js

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+import type { SeriesPostData } from 'store/modules/series';
+import { fromNow } from 'lib/common';
+import { Link } from 'react-router-dom';
+
+import './SeriesPostItem.scss';
+
+type Props = {
+  post: SeriesPostData,
+  username: string,
+};
+const SeriesPostItem = ({ post, username }: Props) => {
+  return (
+    <div className="SeriesPostItem">
+      <h2>
+        <Link to={`/@${username}/${post.url_slug}`}>{post.title}</Link>
+      </h2>
+      <div className="date">{fromNow(post.released_at)}</div>
+      <p>{post.meta.short_description || post.body}</p>
+    </div>
+  );
+};
+
+export default SeriesPostItem;

velog-frontend/src/components/series/SeriesPostItem/SeriesPostItem.scss

@@ -0,0 +1,32 @@
+@import 'utils';
+
+.SeriesPostItem {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  h2 {
+    margin: 0;
+    font-size: 1.75rem;
+    line-height: 1.5;
+    a {
+      &:hover {
+        color: $oc-violet-4;
+        text-decoration: underline;
+      }
+    }
+  }
+  .date {
+    font-size: 0.875rem;
+    color: $oc-gray-6;
+    margin-bottom: 2rem;
+  }
+  p {
+    font-size: 1.125rem;
+    line-height: 1.5;
+    color: $oc-gray-8;
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+  & + & {
+    border-top: 1px solid $oc-gray-2;
+  }
+}

velog-frontend/src/components/series/SeriesPostItem/index.js

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

velog-frontend/src/components/series/SeriesViewer/SeriesViewer.js

@@ -1,13 +1,28 @@
 // @flow
 import React from 'react';
+import BookIcon from 'react-icons/lib/md/book';
+import { type SeriesData } from 'store/modules/series';
 import './SeriesViewer.scss';
 import HorizontalUserInfo from '../../common/HorizontalUserInfo/HorizontalUserInfo';
+import SeriesPostItem from '../SeriesPostItem/SeriesPostItem';
 
-type Props = {};
-const SeriesViewer = (props: Props) => {
+type Props = {
+  series: SeriesData,
+};
+const SeriesViewer = ({ series }: Props) => {
   return (
     <div className="SeriesViewer">
-      <HorizontalUserInfo.Placeholder />
+      <HorizontalUserInfo user={series.user} />
+      <div className="series-label">
+        <BookIcon />
+        <span>SERIES</span>
+      </div>
+      <h1>{series.name}</h1>
+      <div className="list">
+        {series.posts.map(p => (
+          <SeriesPostItem key={p.id} post={p} username={series.user.username} />
+        ))}
+      </div>
     </div>
   );
 };

velog-frontend/src/components/series/SeriesViewer/SeriesViewer.scss

@@ -1,7 +1,32 @@
 @import 'utils';
 .SeriesViewer {
   margin-top: 4rem;
+  color: $oc-gray-9;
   @include media('<medium') {
     margin-top: 0;
   }
+
+  .series-label {
+    background: $oc-violet-4;
+    color: white;
+    width: 7.5rem;
+    height: 3rem;
+    font-size: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 800;
+    span {
+      margin-left: 0.25rem;
+    }
+  }
+
+  h1 {
+    margin-top: 1.5rem;
+    color: $oc-gray-9;
+    font-size: 2.5rem;
+    line-height: 1.5;
+    margin-bottom: 1rem;
+    font-weight: 800;
+  }
 }

velog-frontend/src/containers/series/SeriesViewerContainer.js

@@ -1,13 +1,38 @@
 // @flow
 import React, { Component } from 'react';
+import { withRouter, type ContextRouter } from 'react-router-dom';
+import { SeriesActions } from 'store/actionCreators';
+import { connect } from 'react-redux';
+import { type State } from 'store';
+import { type SeriesData } from 'store/modules/series';
 import SeriesViewer from '../../components/series/SeriesViewer/SeriesViewer';
 
-type Props = {};
+type Props = {
+  series: ?SeriesData,
+} & ContextRouter;
 
 class SeriesViewerContainer extends Component<Props> {
+  initialize = () => {
+    const { username, urlSlug } = this.props.match.params;
+    if (!username || !urlSlug) return;
+    SeriesActions.getSeries({
+      username,
+      urlSlug,
+    });
+  };
+  componentDidMount() {
+    this.initialize();
+  }
+
   render() {
-    return <SeriesViewer />;
+    const { series } = this.props;
+    if (!series) return null;
+    return <SeriesViewer series={series} />;
   }
 }
 
-export default SeriesViewerContainer;
+export default withRouter(
+  connect((state: State) => ({
+    series: state.series.series,
+  }))(SeriesViewerContainer),
+);

velog-frontend/src/lib/api/series.js

@@ -12,3 +12,10 @@ export type CreateSeriesPayload = {
 export const createSeries = (payload: CreateSeriesPayload) => axios.post('/series', payload);
 
 export const getSeriesList = (username: string) => axios.get(`/series/${username}`);
+
+export type GetSeriesParams = {
+  username: string,
+  urlSlug: string,
+};
+export const getSeries = ({ username, urlSlug }: GetSeriesParams) =>
+  axios.get(`/series/${username}/${urlSlug}`);

velog-frontend/src/lib/common.js

@@ -32,7 +32,7 @@ export type ResponseAction = {
   meta: any,
 };
 
-export type GenericResponseAction<D, M> = {
+export type GenericResponseAction<D, M = any> = {
   type: string,
   payload: {
     data: D,

velog-frontend/src/store/actionCreators.js

@@ -13,6 +13,7 @@ import { actionCreators as followActions } from './modules/follow';
 import { actionCreators as commonActions } from './modules/common';
 import { actionCreators as settingsActions } from './modules/settings';
 import { actionCreators as searchActions } from './modules/search';
+import { actionCreators as seriesActions } from './modules/series';
 
 const { dispatch } = store;
 
@@ -31,3 +32,4 @@ export const SettingsActions: typeof settingsActions = bindActionCreators(
   dispatch,
 );
 export const SearchActions: typeof searchActions = bindActionCreators(searchActions, dispatch);
+export const SeriesActions: typeof seriesActions = bindActionCreators(seriesActions, dispatch);

velog-frontend/src/store/index.js

@@ -12,6 +12,7 @@ import type { FollowState } from './modules/follow';
 import type { CommonState } from './modules/common';
 import type { SettingsState } from './modules/settings';
 import type { SearchState } from './modules/search';
+import type { SeriesState } from './modules/series';
 
 const store = configure(typeof window === 'undefined' ? undefined : window.__REDUX_STATE__);
 
@@ -30,6 +31,7 @@ export type State = {
   common: CommonState,
   settings: SettingsState,
   search: SearchState,
+  series: SeriesState,
   pender: {
     pending: any,
     success: any,

velog-frontend/src/store/modules/series.js

@@ -0,0 +1,71 @@
+// @flow
+import { createAction, handleActions, type ActionType } from 'redux-actions';
+import produce from 'immer';
+import { applyPenders, type GenericResponseAction } from 'lib/common';
+import * as SeriesAPI from 'lib/api/series';
+
+const GET_SERIES = 'series/GET_SERIES';
+const INITIALIZE = 'series/INITIALIZE';
+
+export const actionCreators = {
+  getSeries: createAction(GET_SERIES, SeriesAPI.getSeries),
+  initialize: createAction(INITIALIZE),
+};
+
+export type SeriesPostData = {
+  index: number,
+  id: string,
+  thumbnail: ?string,
+  title: string,
+  released_at: string,
+  meta: {
+    code_theme: string,
+    short_description: string,
+  },
+  body: string,
+  url_slug: string,
+};
+export type SeriesData = {
+  id: string,
+  name: string,
+  description: string,
+  thumbnail: ?string,
+  created_at: string,
+  updated_at: string,
+  user: {
+    id: string,
+    short_bio: ?string,
+    username: string,
+    thumbnail: ?string,
+  },
+  posts: SeriesPostData[],
+};
+
+type GetSeriesResponseAction = GenericResponseAction<SeriesData>;
+
+export type SeriesState = {
+  series: ?SeriesData,
+};
+
+const initialState: SeriesState = {
+  series: null,
+};
+
+const reducer = handleActions(
+  {
+    [INITIALIZE]: () => initialState,
+  },
+  initialState,
+);
+
+export default applyPenders(reducer, [
+  {
+    type: GET_SERIES,
+    onSuccess: (state: SeriesState, { payload }: GetSeriesResponseAction) => {
+      return {
+        ...state,
+        series: payload.data,
+      };
+    },
+  },
+]);