Complete user history related UI

velopert · velopert · commit 0abd42dad434 · 2018-10-21T00:16:04.000+09:00
diff --git a/velog-frontend/package.json b/velog-frontend/package.json
@@ -61,7 +61,7 @@
     "react-router-dom": "^4.2.2",
     "react-tooltip": "^3.4.3",
     "react-truncate": "^2.4.0",
-    "recompose": "^0.26.0",
+    "recompose": "^0.30.0",
     "redux": "^3.7.2",
     "redux-actions": "^2.4.0",
     "redux-pender": "^1.2.1",
diff --git a/velog-frontend/src/components/user/UserHistory/UserHistory.js b/velog-frontend/src/components/user/UserHistory/UserHistory.js
@@ -5,69 +5,113 @@ 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 { onlyUpdateForKeys } from 'recompose';
 import './UserHistory.scss';
 
 type HistoryItemProps = {
   username: string,
   item: UserHistoryItem,
 };
 
-const HistoryItem = ({ item, username }: HistoryItemProps) => {
-  const url = `/@${item.post.user.username}/${item.post.url_slug}`;
-  const { type } = item;
-  return (
-    <FakeLink className="HistoryItem" to={url}>
-      {type === 'comment' ? (
-        <div className="message">
-          <CommentIcon className="comment" />@{username}님이 댓글을 남기셨습니다.
-        </div>
-      ) : (
-        <div className="message">
-          <HeartIcon className="heart" />
-          @{username}님이 이 포스트를 좋아합니다.
+const HistoryItem = onlyUpdateForKeys(['item', 'username'])(
+  ({ item, username }: HistoryItemProps) => {
+    const url = `/@${item.post.user.username}/${item.post.url_slug}`;
+    const { type } = item;
+    return (
+      <FakeLink className="HistoryItem" to={url}>
+        {type === 'comment' ? (
+          <div className="message">
+            <CommentIcon className="comment" />@{username}님이 댓글을 남기셨습니다.
+          </div>
+        ) : (
+          <div className="message">
+            <HeartIcon className="heart" />
+            @{username}님이 이 포스트를 좋아합니다.
+          </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>
+              <Link to={url}>{item.post.title}</Link>
+            </h4>
+            <p>
+              {item.post.short_description.slice(0, 150)}
+              {item.post.short_description.length >= 150 && '...'}
+            </p>
+          </div>
         </div>
-      )}
-      <div className="mini-postcard">
-        {item.post.thumbnail && (
-          <Fragment>
-            <div className="thumbnail">
-              <img src={item.post.thumbnail} alt="thumbnail" />
-            </div>
-            <div className="separator" />
-          </Fragment>
+        {type === 'comment' && (
+          <div className="comment-block">
+            <div className="mark">“</div>
+            <div className="comment-text">{item.text}</div>
+          </div>
         )}
+      </FakeLink>
+    );
+  },
+);
+
+HistoryItem.Placeholder = () => {
+  return (
+    <div className="HistoryItem placeholder">
+      <div className="message gray-box" style={{ width: '60%' }} />
+      <div className="mini-postcard">
+        <div className="thumbnail">
+          <div className="fake-img gray-box" />
+        </div>
+        <div className="separator" />
         <div className="post-info">
           <h4>
-            <Link to={url}>{item.post.title}</Link>
+            <span className="gray-box" style={{ width: '60%' }} />
           </h4>
           <p>
-            {item.post.short_description.slice(0, 150)}
-            {item.post.short_description.length >= 150 && '...'}
+            <span className="gray-box" style={{ width: '90%' }} />
+            <span className="gray-box" style={{ width: '100%' }} />
+            <span className="gray-box" style={{ width: '95%' }} />
           </p>
         </div>
       </div>
-      {type === 'comment' && (
-        <div className="comment-block">
-          <div className="mark">“</div>
-          <div className="comment-text">{item.text}</div>
-        </div>
-      )}
-    </FakeLink>
+    </div>
   );
 };
 
 type Props = {
-  username: string,
-  data: UserHistoryItem[],
+  username: ?string,
+  data: ?(UserHistoryItem[]),
+  loading: boolean,
 };
 class UserHistory extends Component<Props> {
   renderList() {
     const { username, data } = this.props;
+    if (!data || !username) return null;
     return data.map(item => <HistoryItem username={username} item={item} key={item.id} />);
   }
   render() {
-    return <div className="UserHistory">{this.renderList()}</div>;
+    return (
+      <div className="UserHistory">
+        {this.props.data &&
+          this.props.data.length === 0 &&
+          !this.props.loading && <div className="no-history">활동 내역이 없습니다.</div>}
+        {this.renderList()}
+        {this.props.loading && (
+          <Fragment>
+            <HistoryItem.Placeholder />
+            <HistoryItem.Placeholder />
+            <HistoryItem.Placeholder />
+            <HistoryItem.Placeholder />
+          </Fragment>
+        )}
+      </div>
+    );
   }
 }
 
-export default UserHistory;
+export default onlyUpdateForKeys(['username', 'data', 'loading'])(UserHistory);
diff --git a/velog-frontend/src/components/user/UserHistory/UserHistory.scss b/velog-frontend/src/components/user/UserHistory/UserHistory.scss
@@ -2,6 +2,11 @@
 .UserHistory {
   width: 768px;
   margin: 0 auto;
+  .no-history {
+    color: $oc-gray-6;
+    font-size: 1.125rem;
+    text-align: center;
+  }
   .HistoryItem {
     cursor: pointer;
     padding-top: 2rem;
@@ -80,5 +85,32 @@
         padding-left: 1.5rem;
       }
     }
+    &.placeholder {
+      .gray-box {
+        background: $oc-gray-1;
+        border-radius: 2px;
+        height: 1em;
+        animation: Blink 0.5s ease-in-out;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+        display: block;
+      }
+      .thumbnail {
+        background: none;
+        border: none;
+      }
+      .fake-img {
+        width: 100%;
+        height: 100%;
+      }
+      .post-info {
+        flex: 1;
+      }
+      p .gray-box {
+        &+.gray-box {
+          margin-top: 0.5rem;
+        }
+      }
+    }
   }
 }
diff --git a/velog-frontend/src/containers/user/UserHistoryContainer.js b/velog-frontend/src/containers/user/UserHistoryContainer.js
@@ -6,31 +6,50 @@ 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';
+import { type UserHistoryItem, type Profile } from 'store/modules/profile';
+import throttle from 'lodash/throttle';
+import { getScrollBottom, preventStickBottom } from 'lib/common';
 
 type Props = {
   userHistory: ?(UserHistoryItem[]),
   prefetched: ?(UserHistoryItem[]),
   prefetching: boolean,
   loading: boolean,
+  historyEnd: boolean,
+  profile: ?Profile,
+  shouldCancel: boolean,
 } & ContextRouter;
 class UserHistoryContainer extends Component<Props> {
   lastOffset: ?number;
   initialize = async () => {
-    const { match } = this.props;
+    const { match, profile, shouldCancel, userHistory } = this.props;
     const { username } = match.params;
     try {
       if (!username) return;
-      await ProfileActions.getUserHistory({ username });
+      if (username === (profile && profile.username) && userHistory) return;
+      if (!shouldCancel) {
+        await ProfileActions.getUserHistory({ username });
+      }
+      this.prefetch();
     } catch (e) {
       console.log(e);
     }
   };
 
+  listenScroll = () => {
+    window.addEventListener('scroll', this.onScroll);
+  };
+
+  unlistenScroll = () => {
+    window.removeEventListener('scroll', this.onScroll);
+  };
+
   prefetch = async () => {
-    const { userHistory, prefetched, loading, prefetching, match } = this.props;
+    const { userHistory, prefetched, loading, prefetching, match, historyEnd } = this.props;
     const { username } = match.params;
     if (!username || !userHistory || loading || prefetching) return;
+    if ((!prefetched || prefetched.length === 0) && historyEnd) return;
+
     // REVEAL
     ProfileActions.revealPrefetchedHistory();
     await Promise.resolve();
@@ -39,34 +58,52 @@ class UserHistoryContainer extends Component<Props> {
         username,
         offset: userHistory.length || 0,
       });
+      this.onScroll();
+      preventStickBottom();
     } catch (e) {
       console.log(e);
     }
   };
 
+  onScroll = throttle(() => {
+    const scrollBottom = getScrollBottom();
+    if (scrollBottom > 1000) return;
+    this.prefetch();
+  }, 250);
+
   componentDidMount() {
     ProfileActions.setSideVisibility(false);
     this.initialize();
+    this.listenScroll();
   }
   componentWillUnmount() {
     ProfileActions.setSideVisibility(true);
+    this.unlistenScroll();
   }
 
   render() {
-    const { userHistory, match } = this.props;
-    if (!userHistory) return null;
-    return <UserHistory data={userHistory} username={match.params.username || ''} />;
+    const { userHistory, match, loading, prefetching } = this.props;
+    return (
+      <UserHistory
+        data={userHistory}
+        username={match.params.username || ''}
+        loading={loading || prefetching}
+      />
+    );
   }
 }
 
 const enhance = compose(
   withRouter,
   connect(
-    ({ profile, pender }: State) => ({
+    ({ profile, pender, common }: State) => ({
       userHistory: profile.userHistory,
       prefetched: profile.prefetchedHistory,
       loading: pender.pending['profile/GET_USER_HISTORY'],
       prefetching: pender.pending['profile/PREFETCH_USER_HISTORY'],
+      historyEnd: profile.historyEnd,
+      profile: profile.profile,
+      shouldCancel: common.ssr && !common.router.altered,
     }),
     () => ({}),
   ),
diff --git a/velog-frontend/src/lib/common.js b/velog-frontend/src/lib/common.js
@@ -46,7 +46,7 @@ export type Return<T> = Return_<*, T>;
 export const getScrollTop = () => {
   if (!document.body) return 0;
   const scrollTop = document.documentElement
-    ? document.documentElement.scrollTop
+    ? document.documentElement.scrollTop || document.body.scrollTop
     : document.body.scrollTop;
   return scrollTop;
 };
diff --git a/velog-frontend/src/store/modules/profile.js b/velog-frontend/src/store/modules/profile.js
@@ -89,6 +89,7 @@ export type ProfileState = {
   prefetchedHistory: ?(UserHistoryItem[]),
   rawTagName: ?string,
   side: boolean,
+  historyEnd: false,
 };
 
 const initialState = {
@@ -98,6 +99,7 @@ const initialState = {
   userHistory: null,
   prefetchedHistory: null,
   side: true,
+  historyEnd: false,
 };
 
 const reducer = handleActions(
@@ -172,6 +174,7 @@ export default applyPenders(reducer, [
       return {
         ...state,
         userHistory: payload.data,
+        historyEnd: payload.data.length < 20,
       };
     },
   },
@@ -183,6 +186,7 @@ export default applyPenders(reducer, [
       return {
         ...state,
         prefetchedHistory: filtered,
+        historyEnd: payload.data.length < 20,
       };
     },
   },
diff --git a/velog-frontend/yarn.lock b/velog-frontend/yarn.lock
