refactor blog post list page

Author: cometkim

src/components/BlogPost/index.tsx

@@ -5,7 +5,6 @@ import Marked from "../Marked"
 export const fragments = graphql`
   fragment BlogPost_post on BlogPost {
     title
-    excerpt
     rawContent
     date
     authors
@@ -15,31 +14,27 @@ export const fragments = graphql`
 
 interface Props {
   post: GatsbyTypes.BlogPost_postFragment,
-  showExcerpt?: boolean,
 }
 
 const BlogPost: React.FC<Props> = ({
   post,
-  showExcerpt = false,
 }) => (
   <div className="inner-content">
     <h1>{post.title}</h1>
+
     <p>
       {new Date(post.date).toLocaleDateString()} by {post.authors.join(', ')}
     </p>
+
     <div className="tag-wrapper">
       {post.tags.map(tag => (
         <span key={tag} className="tag">
-          <Link to={`/tags/${tag}`}>{tag}</Link>
+          <Link to={`/tags/${tag}/`}>{tag}</Link>
         </span>
       ))}
     </div>
 
-    {showExcerpt ? (
-      <p>{post.excerpt}</p>
-    ) : (
-      <Marked>{post.rawContent}</Marked>
-    )}
+    <Marked>{post.rawContent}</Marked>
   </div>
 )
 

src/components/BlogPostPreview/index.tsx

@@ -0,0 +1,43 @@
+import * as React from "react"
+import { graphql, Link } from "gatsby"
+
+export const fragments = graphql`
+  fragment BlogPostPreview_post on BlogPost {
+    title
+    excerpt
+    date
+    authors
+    tags
+    postPath: gatsbyPath(filePath: "/blog/{BlogPost.postId}")
+  }
+`;
+
+interface Props {
+  post: GatsbyTypes.BlogPostPreview_postFragment,
+}
+
+const BlogPostPreview: React.FC<Props> = ({
+  post,
+}) => (
+  <div className="inner-content">
+    <h1>
+      <Link to={post.postPath!}>{post.title}</Link>
+    </h1>
+
+    <p>
+      {new Date(post.date).toLocaleDateString()} by {post.authors.join(', ')}
+    </p>
+
+    <div className="tag-wrapper">
+      {post.tags.map(tag => (
+        <span key={tag} className="tag">
+          <Link to={`/tags/${tag}/`}>{tag}</Link>
+        </span>
+      ))}
+    </div>
+
+    <p>{post.excerpt}</p>
+  </div>
+)
+
+export default BlogPostPreview

src/components/BlogSidebar/index.tsx

@@ -40,7 +40,7 @@ const BlogSidebar: React.FC = () => {
         <h3>Categories</h3>
         <ul>
           {tags.map(tag => {
-            const formattedTag = tag.toUpperCase() + tag.substring(1)
+            const formattedTag = tag[0].toUpperCase() + tag.substring(1)
             const pathname = `/tags/${tag}/`;
             return (
               <li key={tag}>

src/pages/blog.tsx

@@ -1,91 +1,43 @@
-import React from "react"
+import * as React from "react"
+import { graphql } from "gatsby"
+import type { PageProps } from "gatsby"
 import Layout from "../components/Layout"
-import BlogPost from "../components/BlogPost"
+import BlogPostPreview from "../components/BlogPostPreview"
 import BlogSidebar from "../components/BlogSidebar"
-import { graphql } from "gatsby"
-import type { PageProps } from "gatsby";
 
-export default ({ pageContext, data }: PageProps<GatsbyTypes.GetAllBlogPostsQuery, GatsbyTypes.SitePageContext>) => {
-  const posts = data.allMarkdownRemark.edges
-    .map(e => e.node)
-    .sort((a, b) => {
-      const aDate = new Date(a?.frontmatter?.date ?? 0)
-      const bDate = new Date(b?.frontmatter?.date ?? 0)
-      if (aDate > bDate) {
-        return -1
-      } else if (aDate < bDate) {
-        return 1
+export const query = graphql`
+  query BlogPostListPage {
+    allBlogPost(
+      sort: { fields: [date], order: DESC }
+    ) {
+      nodes {
+        id
+        ...BlogPostPreview_post
       }
-      return 0
-    })
+    }
+  }
+`
 
+type Props = PageProps<GatsbyTypes.BlogPostListPageQuery, GatsbyTypes.SitePageContext>
+
+const BlogPostListPage: React.FC<Props> = ({ data }) => {
   return (
-    <Layout title="Blog | GraphQL" pageContext={pageContext}>
+    <Layout title="Blog | GraphQL" pageContext={{}}>
       <section>
         <div className="documentationContent">
           <div>
-            {posts.map(
-              (
-                {
-                  frontmatter: {
-                    title,
-                    date,
-                    permalink,
-                    byline,
-                    guestBio,
-                    tags,
-                  },
-                  rawMarkdownBody,
-                  excerpt,
-                }: any,
-                i
-              ) => (
-                <BlogPost
-                  key={i}
-                  title={title}
-                  date={date}
-                  permalink={permalink}
-                  byline={byline}
-                  guestBio={guestBio}
-                  rawMarkdownBody={rawMarkdownBody}
-                  isPermalink={false}
-                  pageContext={pageContext}
-                  excerpt={excerpt}
-                  showExcerpt
-                  tags={tags}
-                />
-              )
-            )}
+            {data.allBlogPost.nodes.map(post => (
+              <BlogPostPreview
+                key={post.id}
+                post={post}
+              />
+            ))}
           </div>
-          <BlogSidebar posts={posts} />
+          <BlogSidebar />
         </div>
       </section>
     </Layout>
   )
 }
 
-export const query = graphql`
-  query GetAllBlogPosts {
-    allMarkdownRemark(
-      filter: { frontmatter: { permalink: { regex: "/blog/" } } }
-    ) {
-      edges {
-        node {
-          frontmatter {
-            title
-            date
-            permalink
-            byline
-            guestBio
-            sublinks
-            layout
-            tags
-          }
-          id
-          excerpt
-          rawMarkdownBody
-        }
-      }
-    }
-  }
-`
+export default BlogPostListPage