web/src/components/BlogPost/BlogPost.js

@@ -0,0 +1,16 @@
+import { Link, routes } from '@redwoodjs/router'
+
+const BlogPost = ({ post }) => {
+  return (
+    <article>
+      <header>
+        <h2>
+          <Link to={routes.blogPost({ id: post.id })}>{post.title}</Link>
+        </h2>
+      </header>
+      <div>{post.body}</div>
+    </article>
+  )
+}
+
+export default BlogPost

web/src/components/BlogPost/BlogPost.stories.js

@@ -0,0 +1,7 @@
+import BlogPost from './BlogPost'
+
+export const generated = () => {
+  return <BlogPost />
+}
+
+export default { title: 'Components/BlogPost' }

web/src/components/BlogPost/BlogPost.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import BlogPost from './BlogPost'
+
+describe('BlogPost', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<BlogPost />)
+    }).not.toThrow()
+  })
+})

web/src/components/BlogPostCell/BlogPostCell.js

@@ -1,3 +1,5 @@
+import BlogPost from 'src/components/BlogPost'
+
 export const QUERY = gql`
   query BlogPostQuery($id: Int!) {
     post(id: $id) {
@@ -16,5 +18,5 @@ export const Empty = () => <div>Empty</div>
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
 export const Success = ({ post }) => {
-  return JSON.stringify(post)
+  return <BlogPost post={post} />
 }

web/src/components/BlogPostsCell/BlogPostsCell.js

@@ -1,4 +1,5 @@
 import { Link, routes } from '@redwoodjs/router'
+import BlogPost from 'src/components/BlogPost'
 
 export const QUERY = gql`
   query BlogPostsQuery {
@@ -18,15 +19,5 @@ export const Empty = () => <div>Empty</div>
 export const Failure = ({ error }) => <div>Error: {error.message}</div>
 
 export const Success = ({ posts }) => {
-  return posts.map((post) => (
-    <article key={post.id}>
-      <header>
-        <h2>
-          <Link to={routes.blogPost({id: post.id})}>{post.title}</Link>
-        </h2>
-      </header>
-      <p>{post.body}</p>
-      <div>Posted on: {post.createdAt.split('T')[0]}</div>
-    </article>
-  ))
-}
+  return posts.map((post) => <BlogPost key={post.id} post={post} />)
+}