Show basic info in user history item

velopert · velopert · commit c5bc15000054 · 2018-10-17T00:08:25.000+09:00
diff --git a/velog-backend/src/router/users/users.ctrl.js b/velog-backend/src/router/users/users.ctrl.js
@@ -12,7 +12,7 @@ import {
 } from 'database/models';
 import { pick } from 'lodash';
 import { getUserHistory } from 'database/rawQuery/users';
-import { normalize } from 'lib/common';
+import { normalize, formatShortDescription } from 'lib/common';
 
 const { Op } = Sequelize;
 
@@ -84,7 +84,6 @@ export const getHistory: KoaRouter$Middleware = async (ctx) => {
       include: [
         {
           model: Post,
-          attributes: ['title', 'fk_user_id', 'url_slug', 'thumbnail'],
           include: [
             {
               model: User,
@@ -104,13 +103,6 @@ export const getHistory: KoaRouter$Middleware = async (ctx) => {
       include: [
         {
           model: Post,
-          attributes: [
-            'title',
-            'fk_user_id',
-            'url_slug',
-            'thumbnail',
-            'created_at',
-          ],
           include: [
             {
               model: User,
@@ -131,6 +123,9 @@ export const getHistory: KoaRouter$Middleware = async (ctx) => {
       ...pick(row, ['id', 'text']),
       post: {
         ...pick(row.post, ['title', 'url_slug', 'thumbnail', 'created_at']),
+        short_description:
+          row.post.meta.short_description ||
+          formatShortDescription(row.post.body),
         user: {
           username: row.post.user.username,
           ...pick(row.post.user.user_profile, ['display_name', 'thumbnail']),
diff --git a/velog-frontend/src/components/user/UserHistory/UserHistory.js b/velog-frontend/src/components/user/UserHistory/UserHistory.js
@@ -1,59 +1,66 @@
 // @flow
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import CommentIcon from 'react-icons/lib/fa/comment';
 import HeartIcon from 'react-icons/lib/fa/heart';
+import { type UserHistoryItem } from 'store/modules/profile';
 import './UserHistory.scss';
 
 type HistoryItemProps = {
-  type: 'comment' | 'like',
+  item: UserHistoryItem,
 };
 
-const HistoryItem = ({ type }: HistoryItemProps) => {
+const HistoryItem = ({ item }: HistoryItemProps) => {
+  const { type } = item;
   return (
     <div className="HistoryItem">
-      <div className="message">
-        <CommentIcon className="comment" />@velopert님이 댓글을 남기셨습니다.
-      </div>
-      <div className="mini-postcard">
-        <div className="thumbnail">
-          <img
-            src="https://thumb.velog.io/resize?url=https://images.velog.io/post-images/clarekang/75978a70-c53e-11e8-a8ba-eb98e52ccb66/cucumber.jpg&width=512"
-            alt="thumbnail"
-          />
+      {type === 'comment' ? (
+        <div className="message">
+          <CommentIcon className="comment" />@velopert님이 댓글을 남기셨습니다.
         </div>
-        <div className="separator" />
+      ) : (
+        <div className="message">
+          <HeartIcon className="heart" />
+          @velopert님이 이 포스트를 좋아합니다.
+        </div>
+      )}
+      <div className="mini-postcard">
+        {item.post.thumbnail && (
+          <Fragment>
+            <div className="thumbnail">
+              <img src={item.post.thumbnail} alt="thumbnail" />
+            </div>
+            <div className="separator" />
+          </Fragment>
+        )}
         <div className="post-info">
-          <h4>제목이라능</h4>
+          <h4>{item.post.title}</h4>
           <p>
-            쇼트 디스립션은 한 100자정도만 보여줄꺼지롱 나는 아무거나 쓸건데 이걸 쓰는 동안에는
-            오타를 엄청나게 많이 낼 것이다. 왜냐하면 나는 아무 생각없이 쓰고 있기때문이고 지금 사실
-            눈을 감고있다. 지금 드는 감정에 대해서 묘사를 하자면 음파음파 꼬르르이다.
+            {item.post.short_description.slice(0, 150)}
+            {item.post.short_description.length >= 150 && '...'}
           </p>
         </div>
       </div>
-      <div className="comment-block">
-        <div className="mark">“</div>
-        <div className="comment-text">
-          제 생각엔 제가 댓글을 달았는데 그게 진짜 댓글이 아니더라구요.. ㄷ 근데 문제는 그게
-          무슨소리인지 모르겠다는거에요.
+      {type === 'comment' && (
+        <div className="comment-block">
+          <div className="mark">“</div>
+          <div className="comment-text">{item.text}</div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
 
-type Props = {};
+type Props = {
+  username: string,
+  data: UserHistoryItem[],
+};
 class UserHistory extends Component<Props> {
+  renderList() {
+    const { username, data } = this.props;
+    return data.map(item => <HistoryItem username={username} item={item} key={item.id} />);
+  }
   render() {
-    return (
-      <div className="UserHistory">
-        <HistoryItem type="comment" />
-        <HistoryItem type="comment" />
-        <HistoryItem type="comment" />
-        <HistoryItem type="comment" />
-        <HistoryItem type="like" />
-      </div>
-    );
+    return <div className="UserHistory">{this.renderList()}</div>;
   }
 }
 
diff --git a/velog-frontend/src/components/user/UserHistory/UserHistory.scss b/velog-frontend/src/components/user/UserHistory/UserHistory.scss
@@ -5,6 +5,9 @@
   .HistoryItem {
     padding-top: 2rem;
     padding-bottom: 2rem;
+    & + .HistoryItem {
+      border-top: 1px solid $oc-gray-2;
+    }
     .message {
       display: flex;
       align-items: center;
@@ -72,9 +75,9 @@
       }
       .comment-text {
         font-family: "Noto Serif KR", sans-serif;
-        padding-top: 1rem;
-        padding-left: 2rem;
+        padding-top: 0.5rem;
+        padding-left: 1.5rem;
       }
     }
   }
-}
+}
diff --git a/velog-frontend/src/containers/user/UserHistoryContainer.js b/velog-frontend/src/containers/user/UserHistoryContainer.js
@@ -1,21 +1,50 @@
 // @flow
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { ProfileActions } from 'store/actionCreators';
 import UserHistory from 'components/user/UserHistory/UserHistory';
+import { withRouter, type ContextRouter } from 'react-router-dom';
+import { compose } from 'redux';
+import { type State } from 'store';
+import { type UserHistoryItem } from 'store/modules/profile';
 
-type Props = {};
+type Props = {
+  userHistory: ?(UserHistoryItem[]),
+} & ContextRouter;
 class UserHistoryContainer extends Component<Props> {
+  initialize = async () => {
+    const { match } = this.props;
+    const { username } = match.params;
+    try {
+      if (!username) return;
+      await ProfileActions.getUserHistory(username);
+    } catch (e) {
+      console.log(e);
+    }
+  };
   componentDidMount() {
-    console.log('helloworld');
     ProfileActions.setSideVisibility(false);
+    this.initialize();
   }
   componentWillUnmount() {
     ProfileActions.setSideVisibility(true);
   }
 
   render() {
-    return <UserHistory />;
+    const { userHistory, match } = this.props;
+    if (!userHistory) return null;
+    return <UserHistory data={userHistory} username={match.params.username || ''} />;
   }
 }
 
-export default UserHistoryContainer;
+const enhance = compose(
+  withRouter,
+  connect(
+    ({ profile }: State) => ({
+      userHistory: profile.userHistory,
+    }),
+    () => ({}),
+  ),
+);
+
+export default enhance(UserHistoryContainer);
diff --git a/velog-frontend/src/lib/api/users.js b/velog-frontend/src/lib/api/users.js
@@ -3,3 +3,4 @@ import axios from 'lib/defaultClient';
 
 export const listUserTags = (username: string) => axios.get(`/users/@${username}/tags`);
 export const getProfile = (username: string) => axios.get(`/users/@${username}`);
+export const getHistory = (username: string) => axios.get(`/users/@${username}/history`);
diff --git a/velog-frontend/src/store/modules/profile.js b/velog-frontend/src/store/modules/profile.js
@@ -11,6 +11,7 @@ const SET_RAW_TAG_NAME = 'profile/SET_RAW_TAG_NAME';
 const GET_TAG_INFO = 'profile/GET_TAG_INFO';
 const INITIALIZE = 'profile/INITIALIZE';
 const SET_SIDE_VISIBILITY = 'profile/SET_SIDE_VISIBILITY';
+const GET_USER_HISTORY = 'profile/GET_USER_HISTORY';
 
 export const actionCreators = {
   initialize: createAction(INITIALIZE),
@@ -19,6 +20,7 @@ export const actionCreators = {
   setRawTagName: createAction(SET_RAW_TAG_NAME, (tagName: string) => tagName),
   getTagInfo: createAction(GET_TAG_INFO, CommonAPI.getTagInfo),
   setSideVisibility: createAction(SET_SIDE_VISIBILITY, (visible: boolean) => visible),
+  getUserHistory: createAction(GET_USER_HISTORY, UsersAPI.getHistory),
 };
 
 export type TagCountInfo = {
@@ -53,13 +55,33 @@ type ProfileResponseAction = {
   },
 };
 
+export type UserHistoryItem = {
+  id: string,
+  created: string,
+  type: 'comment' | 'like',
+  text: ?string,
+  post: {
+    title: string,
+    url_slug: string,
+    thumbnail: string,
+    short_description: string,
+    user: {
+      username: string,
+      display_name: 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>;
 
 export type ProfileState = {
   tagCounts: ?(TagCountInfo[]),
   profile: ?Profile,
+  userHistory: ?(UserHistoryItem[]),
   rawTagName: ?string,
   side: boolean,
 };
@@ -68,6 +90,7 @@ const initialState = {
   tagCounts: null,
   profile: null,
   rawTagName: null,
+  userHistory: null,
   side: true,
 };
 
@@ -124,4 +147,13 @@ export default applyPenders(reducer, [
       };
     },
   },
+  {
+    type: GET_USER_HISTORY,
+    onSuccess: (state: ProfileState, { payload }: GetUserHistoryResponseAction) => {
+      return {
+        ...state,
+        userHistory: payload.data,
+      };
+    },
+  },
 ]);

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,9 @@`
`5`	`5`	`.HistoryItem {`
`6`	`6`	`padding-top: 2rem;`
`7`	`7`	`padding-bottom: 2rem;`
	`8`	`+ & + .HistoryItem {`
	`9`	`+ border-top: 1px solid $oc-gray-2;`
	`10`	`+ }`
`8`	`11`	`.message {`
`9`	`12`	`display: flex;`
`10`	`13`	`align-items: center;`
`@@ -72,9 +75,9 @@`
`72`	`75`	`}`
`73`	`76`	`.comment-text {`
`74`	`77`	`font-family: "Noto Serif KR", sans-serif;`
`75`		`- padding-top: 1rem;`
`76`		`- padding-left: 2rem;`
	`78`	`+ padding-top: 0.5rem;`
	`79`	`+ padding-left: 1.5rem;`
`77`	`80`	`}`
`78`	`81`	`}`
`79`	`82`	`}`
`80`		`-}`
	`83`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -3,3 +3,4 @@ import axios from 'lib/defaultClient';`
`3`	`3`
`4`	`4`	export const listUserTags = (username: string) => axios.get(`/users/@${username}/tags`);
`5`	`5`	export const getProfile = (username: string) => axios.get(`/users/@${username}`);
	`6`	+export const getHistory = (username: string) => axios.get(`/users/@${username}/history`);