Format dates properly

components/guide-block/index.js

@@ -1,4 +1,6 @@
 import Link from 'next/link';
+import formatDate from 'date-fns/format'
+
 import { Author, AuthorImage, AuthorName, BlockLink, BlockMeta, BlockSubtitle, BlockTitle, PublishDate } from './style';
 import { findByUsername } from 'lib/author';
 
@@ -15,7 +17,7 @@ const GuideBlock = ({ guide }) => {
               <AuthorImage src={ author.picture } />
               <AuthorName>{ author.name }</AuthorName>
             </Author>
-            <PublishDate>{ guide.updatedAt }</PublishDate>
+            <PublishDate>{ formatDate(new Date(guide.createdAt), 'MMMM d, yyyy') }</PublishDate>
           </BlockMeta>
         </BlockLink>
       </Link>

components/guide-header/index.js

@@ -1,3 +1,4 @@
+import formatDate from 'date-fns/format'
 import {
   ActionItems,
   AuthorImage,
@@ -25,7 +26,7 @@ const GuideHeader = ({
         { author.name }
       </GuideAuthor>
       &middot;
-      <GuideDate>{ guide.createdAt }</GuideDate>
+      <GuideDate>{ formatDate(new Date(guide.createdAt), 'EEEE, MMMM d yyyy') }</GuideDate>
       &middot;
       <EditGuide href={ getContributionUrl(guide) } target="_blank">Improve this Guide</EditGuide>
     </GuideMeta>

data/guides.json

@@ -5,8 +5,8 @@
     "url": "/guides/design-patterns-for-humans",
     "featured": true,
     "author": "kamranahmedse",
-    "createdAt": "Wednesday, June 12, 2019",
+    "createdAt": "2019-01-23T17:00:00.860Z",
-    "updatedAt": "June 12, 2019"
+    "updatedAt": "2019-01-23T17:00:00.860Z"
   },
   {
     "title": "Learn Regex",
@@ -14,8 +14,8 @@
     "url": "/guides/learn-regex",
     "featured": true,
     "author": "ziishaned",
-    "createdAt": "Wednesday, June 19, 2019",
+    "createdAt": "2019-01-23T17:00:00.860Z",
-    "updatedAt": "June 19, 2019"
+    "updatedAt": "2019-01-23T17:00:00.860Z"
   },
   {
     "title": "Bash Guide",
@@ -23,8 +23,8 @@
     "url": "/guides/bash-guide",
     "featured": true,
     "author": "idnan",
-    "createdAt": "Wednesday, May 18, 2018",
+    "createdAt": "2019-01-23T17:00:00.860Z",
-    "updatedAt": "May 18, 2018"
+    "updatedAt": "2019-01-23T17:00:00.860Z"
   },
   {
     "title": "DNS in One Picture",
@@ -32,8 +32,8 @@
     "url": "/guides/dns-in-one-picture",
     "featured": true,
     "author": "kamranahmedse",
-    "createdAt": "Wednesday, May 11, 2018",
+    "createdAt": "2019-11-01T12:00:00.860Z",
-    "updatedAt": "May 11, 2018"
+    "updatedAt": "2019-11-01T12:00:00.860Z"
   },
   {
     "title": "Using React Hooks",
@@ -41,8 +41,8 @@
     "url": "/guides/using-react-hooks",
     "featured": true,
     "author": "kamranahmedse",
-    "createdAt": "Wednesday, October 22, 2019",
+    "createdAt": "2019-01-23T17:00:00.860Z",
-    "updatedAt": "October 22, 2019"
+    "updatedAt": "2019-01-23T17:00:00.860Z"
   },
   {
     "title": "HTTP Caching",
@@ -50,7 +50,7 @@
     "url": "/guides/http-caching",
     "featured": true,
     "author": "kamranahmedse",
-    "updatedAt": "November 01, 2019",
+    "updatedAt": "2019-10-09T12:00:00.860Z",
-    "createdAt": "Wednesday, November 01, 2019"
+    "createdAt": "2019-01-23T17:00:00.860Z"
   }
 ]

package.json

@@ -26,6 +26,7 @@
     "autoprefixer": "^9.6.1",
     "bootstrap": "^4.3.1",
     "classnames": "^2.2.6",
+    "date-fns": "^2.6.0",
     "font-awesome": "^4.7.0",
     "next": "^9.0.4",
     "node-sass": "^4.12.0",

yarn.lock

@@ -3097,6 +3097,11 @@ data-urls@^1.0.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.6.0.tgz#a5bc82e6a4c3995ae124b0ba1a71aec7b8cbd666"
+  integrity sha512-F55YxqRdEfP/eYQmQjLN798v0AwLjmZ8nMBjdQvNwEE3N/zWVrlkkqT+9seBlPlsbkybG4JmWg3Ee3dIV9BcGQ==
+
 date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"