Implement post loading

Author: velopert

src/components/common/PostCard.tsx

@@ -1,46 +1,55 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import RatioImage from './RatioImage';
 import { ellipsis } from '../../lib/styles/utils';
 import palette from '../../lib/styles/palette';
 import { LikeIcon } from '../../static/svg';
+import { PartialPost } from '../../lib/graphql/post';
+import { formatDate } from '../../lib/utils';
+import { userThumbnail } from '../../static/images';
+import optimizeImage from '../../lib/optimizeImage';
 
-export type PostCardProps = {};
+export type PostCardProps = {
+  post: PartialPost;
+};
 
-function PostCard(props: PostCardProps) {
+function PostCard({ post }: PostCardProps) {
   return (
     <Block>
-      <RatioImage
-        widthRatio={1.916}
-        heightRatio={1}
-        src="https://img.velog.io/images/velog/post/ebf87853-b6b7-47af-a659-d97fb39e66b0/velog_logo.png?w=768"
-      />
-      <Content>
-        <h4>벨로그 v2 업데이트 안내</h4>
-        <p>
-          Node.js, PHP 등 익숙한 언어들을 던지고 생뚱맞은 장고를 택한 이유는 단
-          하나였습니다. 장고를 사용하시는 분들이 가장 많이 이야기하는,
-          생산성입니다 내용이 더 길어지면 엉떻게 되니닌
-        </p>
+      {post.thumbnail && (
+        <RatioImage
+          widthRatio={1.916}
+          heightRatio={1}
+          src={optimizeImage(post.thumbnail, 640)}
+        />
+      )}
+      <Content clamp={!!post.thumbnail}>
+        <h4>{post.title}</h4>
+        <div className="description-wrapper">
+          <p>
+            {post.short_description}
+            {post.short_description.length === 150 && '...'}
+          </p>
+        </div>
         <div className="sub-info">
-          <span>2020년 2월 10일</span>
+          <span>{formatDate(post.released_at)}</span>
           <span className="separator">·</span>
-          <span>64개의 댓글</span>
+          <span>{post.comments_count}개의 댓글</span>
         </div>
       </Content>
       <Footer>
         <div className="userinfo">
           <img
-            src="https://img.velog.io/images/velog/%3C/span%3Eprofile%3Cspan%20class="x x-first x-last">/9aa07f66-5fcd-41f4-84f2-91d73afcec28/green favicon.png?w=120"
-            alt="post-thumbnail"
+            src={post.user.profile.thumbnail || userThumbnail}
+            alt={`user thumbnail of ${post.user.username}`}
           />
           <span>
-            by <b>velopert</b>
+            by <b>{post.user.username}</b>
           </span>
         </div>
         <div className="likes">
           <LikeIcon />
-          65
+          {post.likes}
         </div>
       </Footer>
     </Block>
@@ -54,10 +63,15 @@ const Block = styled.div`
   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
   margin: 1rem;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 `;
 
-const Content = styled.div`
+const Content = styled.div<{ clamp: boolean }>`
   padding: 1rem;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
   h4 {
     font-size: 1rem;
     margin: 0;
@@ -66,18 +80,26 @@ const Content = styled.div`
     ${ellipsis}
     color: ${palette.gray9};
   }
+  .description-wrapper {
+    flex: 1;
+  }
   p {
     margin: 0;
     word-break: keep-all;
     overflow-wrap: break-word;
     font-size: 0.875rem;
     line-height: 1.5;
-    height: 3.9375rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    ${props =>
+      props.clamp &&
+      css`
+        height: 3.9375rem;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      `}
+  
     color: ${palette.gray7};
     margin-bottom: 1.5rem;
   }

src/components/common/PostCardGrid.tsx

@@ -1,20 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import PostCard from './PostCard';
+import { PartialPost } from '../../lib/graphql/post';
 
-export type PostCardGridProps = {};
+export type PostCardGridProps = {
+  posts: PartialPost[];
+};
 
-function PostCardGrid(props: PostCardGridProps) {
+function PostCardGrid({ posts }: PostCardGridProps) {
   return (
     <Block>
-      <PostCard />
-      <PostCard />
-      <PostCard />
-      <PostCard />
-      <PostCard />
-      <PostCard />
-      <PostCard />
-      <PostCard />
+      {posts.map(post => (
+        <PostCard post={post} key={post.id} />
+      ))}
     </Block>
   );
 }

src/components/home/HomeSidebar.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+import MainNoticeWidgetContainer from '../../containers/main/MainNoticeWidgetContainer';
+import MainTagWidgetContainer from '../../containers/main/MainTagWidgetContainer';
+import MainRightFooter from '../main/MainRightFooter';
+import Sticky from '../common/Sticky';
+
+export type HomeSidebarProps = {};
+
+function HomeSidebar(props: HomeSidebarProps) {
+  return (
+    <Sticky top={80}>
+      <Block>
+        <MainNoticeWidgetContainer />
+        <MainTagWidgetContainer />
+        <MainRightFooter />
+      </Block>
+    </Sticky>
+  );
+}
+
+const Block = styled.div``;
+
+export default HomeSidebar;

src/lib/graphql/post.ts

@@ -162,6 +162,7 @@ export const GET_POST_LIST = gql`
       comments_count
       tags
       is_private
+      likes
     }
   }
 `;

src/pages/home/HomePage.tsx

@@ -7,6 +7,7 @@ import HomeLayout from '../../components/home/HomeLayout';
 import { Route } from 'react-router-dom';
 import TrendingPostsPage from './TrendingPostsPage';
 import RecentPostsPage from './RecentPostsPage';
+import HomeSidebar from '../../components/home/HomeSidebar';
 
 export type HomePageProps = {};
 
@@ -27,7 +28,7 @@ function HomePage(props: HomePageProps) {
               <Route path={['/recent']} component={RecentPostsPage} />
             </>
           }
-          side={<div>Hello</div>}
+          side={<HomeSidebar />}
         />
       </HomeResponsive>
     </HomeTemplate>

src/pages/home/RecentPostsPage.tsx

@@ -1,9 +1,14 @@
 import React from 'react';
+import useRecentPosts from './hooks/useRecentPosts';
+import PostCardGrid from '../../components/common/PostCardGrid';
 
 export type RecentPostsPageProps = {};
 
 function RecentPostsPage(props: RecentPostsPageProps) {
-  return <div>몰라용</div>;
+  const { data, loading } = useRecentPosts();
+
+  if (!data) return null;
+  return <PostCardGrid posts={data.posts} />;
 }
 
 export default RecentPostsPage;

src/pages/home/TrendingPostsPage.tsx

@@ -7,7 +7,8 @@ export type TrendingPageProps = {};
 function TrendingPage(props: TrendingPageProps) {
   const { data, loading } = useTrendingPosts();
 
-  return <PostCardGrid />;
+  if (!data) return null;
+  return <PostCardGrid posts={data.trendingPosts} />;
 }
 
 export default TrendingPage;

src/pages/home/hooks/useRecentPosts.ts

@@ -0,0 +1,37 @@
+import { useQuery } from '@apollo/react-hooks';
+import { GET_POST_LIST, PartialPost } from '../../../lib/graphql/post';
+import { useCallback } from 'react';
+import useScrollPagination from '../../../lib/hooks/useScrollPagination';
+
+export default function useRecentPosts() {
+  const { data, loading, fetchMore } = useQuery<{ posts: PartialPost[] }>(
+    GET_POST_LIST,
+    {},
+  );
+
+  const onLoadMore = useCallback(
+    (cursor: string) => {
+      fetchMore({
+        variables: {
+          cursor,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+          return {
+            posts: [...prev.posts, ...fetchMoreResult.posts],
+          };
+        },
+      });
+    },
+    [fetchMore],
+  );
+
+  const cursor = data?.posts[data?.posts.length - 1]?.id;
+
+  useScrollPagination({
+    cursor,
+    onLoadMore,
+  });
+
+  return { data, loading };
+}

src/pages/home/hooks/useTrendingPosts.ts

@@ -3,11 +3,49 @@ import {
   GetTrendingPostsResponse,
 } from '../../../lib/graphql/post';
 import { useQuery } from '@apollo/react-hooks';
+import { useCallback } from 'react';
+import useScrollPagination from '../../../lib/hooks/useScrollPagination';
 
 export default function useTrendingPosts() {
-  const { data, loading } = useQuery<GetTrendingPostsResponse>(
+  const { data, loading, fetchMore } = useQuery<GetTrendingPostsResponse>(
     GET_TRENDING_POSTS,
   );
 
+  const onLoadMoreByOffset = useCallback(
+    (offset: number) => {
+      fetchMore({
+        variables: {
+          offset,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+
+          // filter unique posts
+          const idMap: Record<string, boolean> = prev.trendingPosts.reduce(
+            (acc, current) => {
+              Object.assign(acc, { [current.id]: true });
+              return acc;
+            },
+            {},
+          );
+
+          const uniquePosts = fetchMoreResult.trendingPosts.filter(
+            post => !idMap[post.id],
+          );
+
+          return {
+            trendingPosts: [...prev.trendingPosts, ...uniquePosts],
+          };
+        },
+      });
+    },
+    [fetchMore],
+  );
+
+  useScrollPagination({
+    offset: data?.trendingPosts.length,
+    onLoadMoreByOffset,
+  });
+
   return { data, loading };
 }