working on temp save pagination

Author: velopert

velog-frontend/src/components/saves/SavePostCard/SavePostCard.js

@@ -1,22 +1,34 @@
 // @flow
 import React from 'react';
 import DeleteIcon from 'react-icons/lib/md/delete';
+import { fromNow } from 'lib/common';
+import { Link } from 'react-router-dom';
+
 import './SavePostCard.scss';
 
-type Props = {};
+type Props = {
+  thumbnail: ?string,
+  id: string,
+  title: string,
+  updatedAt: string,
+};
 
-const SavePostCard = (props: Props) => (
+const SavePostCard = ({ id, thumbnail, title, updatedAt }: Props) => (
   <div className="SavePostCard">
-    <div className="img-wrapper">
-      <img
-        src="https://images.velog.io/post-images/velopert/1d26a150-6747-11e8-9dff-1b161279fc07/goodb.png"
-        alt="thumbnail"
-      />
-    </div>
+    {thumbnail && (
+      <div className="img-wrapper">
+        <img
+          src="https://images.velog.io/post-images/velopert/1d26a150-6747-11e8-9dff-1b161279fc07/goodb.png"
+          alt="thumbnail"
+        />
+      </div>
+    )}
     <div className="white-area">
       <div className="post-info">
-        <h3>제목이 있다리</h3>
-        <div className="date">4 초 전</div>
+        <h3>
+          <Link to={`/write?edit_id=${id}`}>{title}</Link>
+        </h3>
+        <div className="date">{fromNow(updatedAt)}</div>
       </div>
       <button className="remove-button">
         <DeleteIcon />

velog-frontend/src/components/saves/SavePostCard/SavePostCard.scss

@@ -1,6 +1,7 @@
 @import 'utils';
 .SavePostCard {
   border: 1px solid $oc-gray-3;
+  color: $oc-gray-9;
   font-family: initial;
   .img-wrapper {
     padding-top: 52.63%;
@@ -24,6 +25,12 @@
         margin: 0;
         font-size: 1.5rem;
         font-weight: 500;
+        a {
+          &:hover {
+            color: $oc-violet-5;
+            text-decoration: underline;
+          }
+        }
       }
       .date {
         color: $oc-gray-7;

velog-frontend/src/components/saves/SavePostCardList/SavePostCardList.js

@@ -1,32 +1,25 @@
 // @flow
 import React from 'react';
+import type { PostItem } from 'store/modules/listing';
 import './SavePostCardList.scss';
 import SavePostCard from '../SavePostCard';
 
-type Props = {};
+type Props = {
+  posts: ?(PostItem[]),
+};
 
-const SavePostCardList = (props: Props) => (
-  <div className="SavePostCardList">
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-    <SavePostCard />
-  </div>
-);
+const SavePostCardList = ({ posts }: Props) => {
+  if (!posts) return null;
+  const postList = posts.map(post => (
+    <SavePostCard
+      key={post.id}
+      id={post.id}
+      title={post.title}
+      thumbnail={post.thumbnail}
+      updatedAt={post.updated_at}
+    />
+  ));
+  return <div className="SavePostCardList">{postList}</div>;
+};
 
 export default SavePostCardList;

velog-frontend/src/containers/saves/SavePostCardListContainer.js

@@ -1,16 +1,72 @@
 // @flow
 import React, { Component } from 'react';
-import * as actions from 'store/actionCreators';
+import { ListingActions } from 'store/actionCreators';
 import type { State } from 'store';
 import { connect } from 'react-redux';
 import SavePostCardList from 'components/saves/SavePostCardList/SavePostCardList';
+import type { PostItem } from 'store/modules/listing';
+import throttle from 'lodash/throttle';
+import { getScrollBottom, preventStickBottom } from 'lib/common';
 
-type Props = {};
+type Props = {
+  username: ?string,
+  posts: ?(PostItem[]),
+  prefetching: boolean,
+  loading: boolean,
+  hasEnded: boolean,
+};
 
 class SavePostCardListContainer extends Component<Props> {
+  prevCursor: ?string = null;
+
+  initialize = async () => {
+    if (!this.props.username) return;
+    try {
+      await ListingActions.getTempPosts({
+        username: this.props.username,
+      });
+      this.prefetch();
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  componentDidMount() {
+    this.initialize();
+    window.addEventListener('scroll', this.onScroll);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.onScroll);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevProps.username && this.props.username) {
+      this.initialize();
+    }
+  }
+
+  prefetch = async () => {};
+
+  onScroll = throttle(() => {
+    const scrollBottom = getScrollBottom();
+    if (scrollBottom > 1000) return;
+    this.prefetch();
+  }, 250);
+
   render() {
-    return <SavePostCardList />;
+    const { posts } = this.props;
+    return <SavePostCardList posts={posts} />;
   }
 }
 
-export default connect((state: State) => ({}), () => ({}))(SavePostCardListContainer);
+export default connect(
+  ({ user, listing, pender }: State) => ({
+    username: user.user && user.user.username,
+    posts: listing.temp.posts,
+    prefetching: pender.pending['listing/PREFETCH_TEMP_POSTS'],
+    loading: pender.pending['listing/GET_TEMP_POSTS'],
+    hasEnded: listing.temp.end,
+  }),
+  () => ({}),
+)(SavePostCardListContainer);

velog-frontend/src/lib/api/posts/index.js

@@ -100,3 +100,16 @@ export const getPublicPostsByTag = (payload: GetPublicPostsByTagPayload) => {
   const query = queryString.stringify(payload);
   return axios.get(`/posts/public?${query}`);
 };
+
+export type GetTempPostsPayload = {
+  username: string,
+  cursor?: string,
+};
+
+export const getTempPosts = ({ username, cursor }: GetTempPostsPayload) => {
+  const query = queryString.stringify({
+    is_temp: true,
+    cursor,
+  });
+  return axios.get(`/posts/@${username}?${query}`);
+};

velog-frontend/src/lib/common.js

@@ -1,6 +1,7 @@
 // @flow
 import { pender } from 'redux-pender';
 import type { $AxiosXHR, $AxiosError } from 'axios';
+import moment from 'moment';
 
 export const pressedEnter = (fn: () => void) => (e: KeyboardEvent) => {
   if (e.key === 'Enter') {
@@ -74,3 +75,13 @@ export const escapeForUrl = (text: string): string => {
     .replace(/ /g, '-')
     .replace(/--+/g, '-');
 };
+
+export const fromNow = (date: string) => {
+  const now = new Date();
+  const givenDate = new Date(date);
+  const lessThanWeek = now - givenDate < 1000 * 60 * 60 * 24 * 7;
+  if (lessThanWeek) {
+    return moment(date).fromNow();
+  }
+  return moment(date).format('YYYY년 M월 D일');
+};

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

@@ -15,6 +15,8 @@ const PREFETCH_TRENDING_POSTS = 'listing/PREFETCH_TRENDING_POSTS';
 const GET_TAG_POSTS = 'listing/GET_TAG_POSTS';
 const PREFETCH_TAG_POSTS = 'listing/PREFETCH_TAG_POSTS';
 const CLEAR_TAG_POSTS = 'listing/CLEAR_TAG_POSTS';
+const GET_TEMP_POSTS = 'listing/GET_TEMP_POSTS';
+const PREFETCH_TEMP_POSTS = 'listing/PREFETCH_TEMP_POSTS';
 
 // potential improvement :: remove duplicates
 export const actionCreators = {
@@ -29,6 +31,8 @@ export const actionCreators = {
   getTagPosts: createAction(GET_TAG_POSTS, PostsAPI.getPublicPostsByTag),
   prefetchTagPosts: createAction(PREFETCH_TAG_POSTS, PostsAPI.getPublicPostsByTag),
   clearTagPosts: createAction(CLEAR_TAG_POSTS),
+  getTempPosts: createAction(GET_TEMP_POSTS, PostsAPI.getTempPosts),
+  prefetchTempPosts: createAction(PREFETCH_TEMP_POSTS, PostsAPI.getTempPosts),
 };
 
 export type PostItem = {
@@ -63,6 +67,7 @@ export type Listing = {
   recent: ListingSet,
   user: ListingSet,
   tag: ListingSet,
+  temp: ListingSet,
 };
 
 type RevealPrefetchedAction = ActionType<typeof actionCreators.revealPrefetched>;
@@ -83,31 +88,23 @@ export interface ListingActionCreators {
   prefetchTrendingPosts(cursor: string): any;
   getTagPosts(payload: PostsAPI.GetPublicPostsByTagPayload): any;
   prefetchTagPosts(payload: PostsAPI.GetPublicPostsByTagPayload): any;
+  getTempPosts(payload: PostsAPI.GetTempPostsPayload): any;
   clearTagPosts(): any;
   clearUserPosts(): any;
 }
 
+const initialListingSet = {
+  posts: null,
+  prefetched: null,
+  end: false,
+};
+
 const initialState: Listing = {
-  trending: {
-    posts: null,
-    prefetched: null,
-    end: false,
-  },
-  recent: {
-    posts: null,
-    prefetched: null,
-    end: false,
-  },
-  user: {
-    posts: null,
-    prefetched: null,
-    end: false,
-  },
-  tag: {
-    posts: null,
-    prefetched: null,
-    end: false,
-  },
+  trending: initialListingSet,
+  recent: initialListingSet,
+  user: initialListingSet,
+  tag: initialListingSet,
+  temp: initialListingSet,
 };
 
 const reducer = handleActions(
@@ -246,4 +243,33 @@ export default applyPenders(reducer, [
       });
     },
   },
+  {
+    type: GET_TEMP_POSTS,
+    onPending: (state: Listing) => {
+      return produce(state, (draft) => {
+        draft.temp.end = false;
+        draft.temp.prefetched = null;
+      });
+    },
+    onSuccess: (state: Listing, action: PostsResponseAction) => {
+      return produce(state, (draft) => {
+        draft.temp.posts = action.payload.data;
+        if (action.payload.data.length < 20) {
+          draft.temp.end = true;
+        }
+      });
+    },
+  },
+  {
+    type: PREFETCH_TEMP_POSTS,
+    onSuccess: (state: Listing, action: PostsResponseAction) => {
+      const { data } = action.payload;
+      return produce(state, (draft) => {
+        draft.temp.prefetched = data;
+        if (data && data.length === 0) {
+          draft.temp.end = true;
+        }
+      });
+    },
+  },
 ]);