Implements formatDate

Author: velopert

package.json

@@ -10,6 +10,7 @@
     "@loadable/webpack-plugin": "^5.5.0",
     "@svgr/webpack": "4.1.0",
     "@types/codemirror": "^0.0.72",
+    "@types/date-fns": "^2.6.0",
     "@types/graphql": "^14.0.7",
     "@types/highlight.js": "^9.12.3",
     "@types/isomorphic-fetch": "^0.0.35",
@@ -51,6 +52,7 @@
     "case-sensitive-paths-webpack-plugin": "2.2.0",
     "codemirror": "^5.45.0",
     "css-loader": "1.0.0",
+    "date-fns": "^1.30.1",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
     "eslint-config-prettier": "^4.2.0",

src/components/base/Header.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styled, { css } from 'styled-components';
-import { Logo } from '../../static/svg';
 import { breakpoints } from '../../lib/styles/responsive';
 import RoundButton from '../common/RoundButton';
 import { CurrentUser } from '../../lib/graphql/user';
@@ -10,7 +9,6 @@ import HeaderUserMenu from './HeaderUserMenu';
 import { logout } from '../../lib/api/auth';
 import storage from '../../lib/storage';
 import { UserLogo } from '../../modules/header';
-import { Link } from 'react-router-dom';
 import HeaderLogo from './HeaderLogo';
 
 const HeaderBlock = styled.div<{

src/components/post/PostHead.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import VelogResponsive from '../velog/VelogResponsive';
 import palette from '../../lib/styles/palette';
+import { formatDate } from '../../lib/utils';
 
 const PostHeadBlock = styled(VelogResponsive)`
   margin-top: 5.5rem;
@@ -12,20 +13,39 @@ const PostHeadBlock = styled(VelogResponsive)`
     margin-top: 0;
     font-weight: 800;
     color: ${palette.gray8};
+    margin-bottom: 2rem;
+  }
+`;
+
+const SubInfo = styled.div`
+  font-size: 1rem;
+  color: ${palette.gray7};
+  .username {
+    color: ${palette.gray8};
+    font-weight: bold;
+  }
+  .separator {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
   }
 `;
 
 export interface PostHeadProps {
   title: string;
   tags: string[];
   username: string;
-  date: string | number;
+  date: string;
 }
 
-const PostHead: React.FC<PostHeadProps> = ({ title }) => {
+const PostHead: React.FC<PostHeadProps> = ({ title, username, date }) => {
   return (
     <PostHeadBlock>
       <h1>{title}</h1>
+      <SubInfo>
+        <span className="username">{username}</span>
+        <span className="separator">&middot;</span>
+        <span>{formatDate(date)}</span>
+      </SubInfo>
     </PostHeadBlock>
   );
 };

src/components/post/__tests__/PostHead.test.tsx

@@ -8,7 +8,7 @@ describe('PostHead', () => {
       title: 'title',
       tags: ['tagA', 'tagB'],
       username: 'velopert',
-      date: new Date(Date.now() - 1000 * 60 * 60 * 5),
+      date: new Date(Date.now() - 1000 * 60 * 60 * 5).toString(),
     };
     const utils = render(<PostHead {...initialProps} {...props} />);
     return {
@@ -19,7 +19,11 @@ describe('PostHead', () => {
     const { getByText } = setup();
     getByText('title');
   });
-  it('renders tags', () => {});
-  it('renders username', () => {});
+  it('renders username', () => {
+    const { getByText } = setup();
+    getByText('velopert');
+  });
   it('renders date', () => {});
+
+  it('renders tags', () => {});
 });

src/containers/post/PostViewer.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { Query, QueryResult } from 'react-apollo';
 import { READ_POST, SinglePost } from '../../lib/graphql/post';
 import PostHead from '../../components/post/PostHead';
@@ -19,7 +18,7 @@ const PostViewer: React.FC<PostViewerProps> = ({ username, urlSlug }) => {
       }}
     >
       {({ loading, error, data }: QueryResult<{ post: SinglePost }>) => {
-        console.log(data);
+        console.log(error);
         if (loading) return null; // TODO: show placeholder
         if (!data || !data.post) return null;
         if (error) return null; // SHOW ERROR

src/lib/__tests__/utils.test.ts

@@ -1,4 +1,4 @@
-import { escapeForUrl } from '../utils';
+import { escapeForUrl, formatDate } from '../utils';
 
 describe('utils', () => {
   it('escapeForUrl', () => {
@@ -16,4 +16,30 @@ describe('utils', () => {
       'trim',
     ]);
   });
+
+  describe('formatDate util function', () => {
+    const now = Date.now();
+    const justNow = new Date(now - 1000 * 60).toString();
+    const fiveMinsBefore = new Date(now - 1000 * 60 * 5).toString();
+    const yesterday = new Date(now - 1000 * 60 * 60 * 24).toString();
+    const twoDaysAgo = new Date(now - 1000 * 60 * 60 * 24 * 2).toString();
+    const tenDaysAgo = new Date(now - 1000 * 60 * 60 * 24 * 10).toString();
+    it('shows just now', () => {
+      expect(formatDate(justNow)).toBe('방금 전');
+    });
+    it('shows five minutes before', () => {
+      expect(formatDate(fiveMinsBefore)).toBe('5분 전');
+    });
+    it('shows yesterday', () => {
+      expect(formatDate(yesterday)).toBe('어제');
+    });
+    it('shows two days ago', () => {
+      expect(formatDate(twoDaysAgo)).toBe('2일 전');
+    });
+    it('shows ten days ago as a date', () => {
+      const result = formatDate(tenDaysAgo);
+      const match = /^\d{4}년 \d{1,2}월 \d{1,2}일$/.test(result);
+      expect(match).toBeTruthy();
+    });
+  });
 });

src/lib/graphql/post.ts

@@ -98,6 +98,7 @@ export const READ_POST = gql`
       is_private
       is_temp
       user {
+        id
         username
         profile {
           display_name

src/lib/utils.ts

@@ -1,3 +1,26 @@
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import format from 'date-fns/format';
+import koLocale from 'date-fns/locale/ko';
+
+export const formatDate = (date: string): string => {
+  const now = Date.now();
+  const diff = now - new Date(date).getTime();
+  // less than 5 minutes
+  if (diff < 1000 * 60 * 5) {
+    return '방금 전';
+  }
+  if (diff < 1000 * 60 * 60 * 24) {
+    return distanceInWordsToNow(date, { addSuffix: true, locale: koLocale });
+  }
+  if (diff < 1000 * 60 * 60 * 36) {
+    return '어제';
+  }
+  if (diff < 1000 * 60 * 60 * 24 * 7) {
+    return distanceInWordsToNow(date, { addSuffix: true, locale: koLocale });
+  }
+  return format(date, 'YYYY년 M월 D일');
+};
+
 export const getScrollTop = () => {
   if (!document.body) return 0;
   const scrollTop = document.documentElement

src/pages/velog/PostPage.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import styled from 'styled-components';
 import { RouteComponentProps } from 'react-router';
 import PostViewer from '../../containers/post/PostViewer';
 
-const PostPageBlock = styled.div``;
-
 export interface PostPageProps
   extends RouteComponentProps<{
     username: string;

src/pages/velog/VelogPage.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import VelogPageTemplate from '../../components/velog/VelogPageTemplate';
 import { RouteComponentProps, Route } from 'react-router';
 import ConfigLoader from '../../containers/velog/ConfigLoader';
-import PostViewer from '../../containers/post/PostViewer';
 import PostPage from './PostPage';
 
 export interface VelogPageProps

yarn.lock

@@ -1027,6 +1027,13 @@
     "@types/keygrip" "*"
     "@types/node" "*"
 
+"@types/date-fns@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@types/date-fns/-/date-fns-2.6.0.tgz#b062ca46562002909be0c63a6467ed173136acc1"
+  integrity sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=
+  dependencies:
+    date-fns "*"
+
 "@types/estree@*":
   version "0.0.39"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
@@ -3622,6 +3629,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@*, date-fns@^1.30.1:
+  version "1.30.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
+  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"