Prepare pagination

Author: velopert

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

@@ -1,7 +1,9 @@
 // @flow
 import React, { Component, Fragment } from 'react';
+import { Link } from 'react-router-dom';
 import CommentIcon from 'react-icons/lib/fa/comment';
 import HeartIcon from 'react-icons/lib/fa/heart';
+import FakeLink from 'components/common/FakeLink';
 import { type UserHistoryItem } from 'store/modules/profile';
 import './UserHistory.scss';
 
@@ -11,9 +13,10 @@ type HistoryItemProps = {
 };
 
 const HistoryItem = ({ item, username }: HistoryItemProps) => {
+  const url = `/@${item.post.user.username}/${item.post.url_slug}`;
   const { type } = item;
   return (
-    <div className="HistoryItem">
+    <FakeLink className="HistoryItem" to={url}>
       {type === 'comment' ? (
         <div className="message">
           <CommentIcon className="comment" />@{username}님이 댓글을 남기셨습니다.
@@ -34,7 +37,9 @@ const HistoryItem = ({ item, username }: HistoryItemProps) => {
           </Fragment>
         )}
         <div className="post-info">
-          <h4>{item.post.title}</h4>
+          <h4>
+            <Link to={url}>{item.post.title}</Link>
+          </h4>
           <p>
             {item.post.short_description.slice(0, 150)}
             {item.post.short_description.length >= 150 && '...'}
@@ -47,7 +52,7 @@ const HistoryItem = ({ item, username }: HistoryItemProps) => {
           <div className="comment-text">{item.text}</div>
         </div>
       )}
-    </div>
+    </FakeLink>
   );
 };
 

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

@@ -3,9 +3,10 @@
   width: 768px;
   margin: 0 auto;
   .HistoryItem {
+    cursor: pointer;
     padding-top: 2rem;
     padding-bottom: 2rem;
-    & + .HistoryItem {
+    &+.HistoryItem {
       border-top: 1px solid $oc-gray-2;
     }
     .message {
@@ -80,4 +81,4 @@
       }
     }
   }
-}
+}

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

@@ -10,18 +10,40 @@ import { type UserHistoryItem } from 'store/modules/profile';
 
 type Props = {
   userHistory: ?(UserHistoryItem[]),
+  prefetched: ?(UserHistoryItem[]),
+  prefetching: boolean,
+  loading: boolean,
 } & ContextRouter;
 class UserHistoryContainer extends Component<Props> {
+  lastOffset: ?number;
   initialize = async () => {
     const { match } = this.props;
     const { username } = match.params;
     try {
       if (!username) return;
-      await ProfileActions.getUserHistory(username);
+      await ProfileActions.getUserHistory({ username });
     } catch (e) {
       console.log(e);
     }
   };
+
+  prefetch = async () => {
+    const { userHistory, prefetched, loading, prefetching, match } = this.props;
+    const { username } = match.params;
+    if (!username || !userHistory || loading || prefetching) return;
+    // REVEAL
+    ProfileActions.revealPrefetchedHistory();
+    await Promise.resolve();
+    try {
+      await ProfileActions.prefetchUserHistory({
+        username,
+        offset: userHistory.length || 0,
+      });
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   componentDidMount() {
     ProfileActions.setSideVisibility(false);
     this.initialize();
@@ -40,8 +62,11 @@ class UserHistoryContainer extends Component<Props> {
 const enhance = compose(
   withRouter,
   connect(
-    ({ profile }: State) => ({
+    ({ profile, pender }: State) => ({
       userHistory: profile.userHistory,
+      prefetched: profile.prefetchedHistory,
+      loading: pender.pending['profile/GET_USER_HISTORY'],
+      prefetching: pender.pending['profile/PREFETCH_USER_HISTORY'],
     }),
     () => ({}),
   ),

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

@@ -3,4 +3,10 @@ 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`);
+
+type GetHistoryParams = {
+  username: string,
+  offset?: number,
+};
+export const getHistory = ({ username, offset }: GetHistoryParams) =>
+  axios.get(`/users/@${username}/history?${offset ? `offset=${offset}` : ''}`);

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

@@ -12,6 +12,8 @@ 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';
+const REVEAL_PREFETCHED_HISTORY = 'profile/REVEAL_PREFETCHED_HISTORY';
+const PREFETCH_USER_HISTORY = 'profile/PREFETCH_USER_HISTORY';
 
 export const actionCreators = {
   initialize: createAction(INITIALIZE),
@@ -21,6 +23,8 @@ export const actionCreators = {
   getTagInfo: createAction(GET_TAG_INFO, CommonAPI.getTagInfo),
   setSideVisibility: createAction(SET_SIDE_VISIBILITY, (visible: boolean) => visible),
   getUserHistory: createAction(GET_USER_HISTORY, UsersAPI.getHistory),
+  revealPrefetchedHistory: createAction(REVEAL_PREFETCHED_HISTORY),
+  prefetchUserHistory: createAction(PREFETCH_USER_HISTORY, UsersAPI.getHistory),
 };
 
 export type TagCountInfo = {
@@ -82,6 +86,7 @@ export type ProfileState = {
   tagCounts: ?(TagCountInfo[]),
   profile: ?Profile,
   userHistory: ?(UserHistoryItem[]),
+  prefetchedHistory: ?(UserHistoryItem[]),
   rawTagName: ?string,
   side: boolean,
 };
@@ -91,6 +96,7 @@ const initialState = {
   profile: null,
   rawTagName: null,
   userHistory: null,
+  prefetchedHistory: null,
   side: true,
 };
 
@@ -109,6 +115,13 @@ const reducer = handleActions(
         side: payload,
       };
     },
+    [REVEAL_PREFETCHED_HISTORY]: (state) => {
+      return produce(state, (draft) => {
+        if (!draft.userHistory || !draft.prefetchedHistory) return;
+        draft.userHistory = draft.userHistory.concat(draft.prefetchedHistory);
+        draft.prefetchedHistory = null;
+      });
+    },
   },
   initialState,
 );
@@ -149,11 +162,28 @@ export default applyPenders(reducer, [
   },
   {
     type: GET_USER_HISTORY,
+    onPending: (state: ProfileState) => {
+      return {
+        ...state,
+        prefetchedHistory: null,
+      };
+    },
     onSuccess: (state: ProfileState, { payload }: GetUserHistoryResponseAction) => {
       return {
         ...state,
         userHistory: payload.data,
       };
     },
   },
+  {
+    type: PREFETCH_USER_HISTORY,
+    onSuccess: (state: ProfileState, { payload }: GetUserHistoryResponseAction) => {
+      const currentIdList = (state.userHistory || []).map(item => item.id);
+      const filtered = payload.data.filter(item => currentIdList.indexOf(item.id) === -1);
+      return {
+        ...state,
+        prefetchedHistory: filtered,
+      };
+    },
+  },
 ]);