From 1a8bea1b854633d61380b993223562c9639cc43b Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Sat, 10 Oct 2020 12:18:23 +1100
Subject: [PATCH] Add blogpost page and cell

---
 web/src/Routes.js                             |  1 +
 .../components/BlogPostCell/BlogPostCell.js   | 20 ++++++++++++++
 .../BlogPostCell/BlogPostCell.mock.js         |  6 +++++
 .../BlogPostCell/BlogPostCell.stories.js      | 20 ++++++++++++++
 .../BlogPostCell/BlogPostCell.test.js         | 26 +++++++++++++++++++
 .../components/BlogPostsCell/BlogPostsCell.js |  6 ++++-
 web/src/pages/BlogPostPage/BlogPostPage.js    | 12 +++++++++
 .../BlogPostPage/BlogPostPage.stories.js      |  7 +++++
 .../pages/BlogPostPage/BlogPostPage.test.js   | 11 ++++++++
 9 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/BlogPostCell/BlogPostCell.js
 create mode 100644 web/src/components/BlogPostCell/BlogPostCell.mock.js
 create mode 100644 web/src/components/BlogPostCell/BlogPostCell.stories.js
 create mode 100644 web/src/components/BlogPostCell/BlogPostCell.test.js
 create mode 100644 web/src/pages/BlogPostPage/BlogPostPage.js
 create mode 100644 web/src/pages/BlogPostPage/BlogPostPage.stories.js
 create mode 100644 web/src/pages/BlogPostPage/BlogPostPage.test.js

diff --git a/web/src/Routes.js b/web/src/Routes.js
index 3a6bffb..4b19643 100644
--- a/web/src/Routes.js
+++ b/web/src/Routes.js
@@ -12,6 +12,7 @@ import { Router, Route } from '@redwoodjs/router'
 const Routes = () => {
   return (
     <Router>
+      <Route path="/blog-post/{id:Int}" page={BlogPostPage} name="blogPost" />
       <Route path="/posts/new" page={NewPostPage} name="newPost" />
       <Route path="/posts/{id:Int}/edit" page={EditPostPage} name="editPost" />
       <Route path="/posts/{id:Int}" page={PostPage} name="post" />
diff --git a/web/src/components/BlogPostCell/BlogPostCell.js b/web/src/components/BlogPostCell/BlogPostCell.js
new file mode 100644
index 0000000..f3a0cb4
--- /dev/null
+++ b/web/src/components/BlogPostCell/BlogPostCell.js
@@ -0,0 +1,20 @@
+export const QUERY = gql`
+  query BlogPostQuery($id: Int!) {
+    post(id: $id) {
+      id
+      title
+      body
+      createdAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Empty</div>
+
+export const Failure = ({ error }) => <div>Error: {error.message}</div>
+
+export const Success = ({ post }) => {
+  return JSON.stringify(post)
+}
diff --git a/web/src/components/BlogPostCell/BlogPostCell.mock.js b/web/src/components/BlogPostCell/BlogPostCell.mock.js
new file mode 100644
index 0000000..c689622
--- /dev/null
+++ b/web/src/components/BlogPostCell/BlogPostCell.mock.js
@@ -0,0 +1,6 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  blogPost: {
+    id: 42,
+  },
+})
diff --git a/web/src/components/BlogPostCell/BlogPostCell.stories.js b/web/src/components/BlogPostCell/BlogPostCell.stories.js
new file mode 100644
index 0000000..597ce5f
--- /dev/null
+++ b/web/src/components/BlogPostCell/BlogPostCell.stories.js
@@ -0,0 +1,20 @@
+import { Loading, Empty, Failure, Success } from './BlogPostCell'
+import { standard } from './BlogPostCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const failure = () => {
+  return Failure ? <Failure error={new Error('Oh no')} /> : null
+}
+
+export const success = () => {
+  return Success ? <Success {...standard()} /> : null
+}
+
+export default { title: 'Cells/BlogPostCell' }
diff --git a/web/src/components/BlogPostCell/BlogPostCell.test.js b/web/src/components/BlogPostCell/BlogPostCell.test.js
new file mode 100644
index 0000000..61adcd6
--- /dev/null
+++ b/web/src/components/BlogPostCell/BlogPostCell.test.js
@@ -0,0 +1,26 @@
+import { render, screen } from '@redwoodjs/testing'
+import { Loading, Empty, Failure, Success } from './BlogPostCell'
+import { standard } from './BlogPostCell.mock'
+
+describe('BlogPostCell', () => {
+  test('Loading renders successfully', () => {
+    render(<Loading />)
+    // Use screen.debug() to see output
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+
+  test('Empty renders successfully', async () => {
+    render(<Empty />)
+    expect(screen.getByText('Empty')).toBeInTheDocument()
+  })
+
+  test('Failure renders successfully', async () => {
+    render(<Failure error={new Error('Oh no')} />)
+    expect(screen.getByText(/Oh no/i)).toBeInTheDocument()
+  })
+
+  test('Success renders successfully', async () => {
+    render(<Success blogPost={standard().blogPost} />)
+    expect(screen.getByText(/42/i)).toBeInTheDocument()
+  })
+})
diff --git a/web/src/components/BlogPostsCell/BlogPostsCell.js b/web/src/components/BlogPostsCell/BlogPostsCell.js
index cfd42e4..6c48cae 100644
--- a/web/src/components/BlogPostsCell/BlogPostsCell.js
+++ b/web/src/components/BlogPostsCell/BlogPostsCell.js
@@ -1,3 +1,5 @@
+import { Link, routes } from '@redwoodjs/router'
+
 export const QUERY = gql`
   query BlogPostsQuery {
     posts {
@@ -19,7 +21,9 @@ export const Success = ({ posts }) => {
   return posts.map((post) => (
     <article key={post.id}>
       <header>
-        <h2>{post.title}</h2>
+        <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>
diff --git a/web/src/pages/BlogPostPage/BlogPostPage.js b/web/src/pages/BlogPostPage/BlogPostPage.js
new file mode 100644
index 0000000..7f1e9c3
--- /dev/null
+++ b/web/src/pages/BlogPostPage/BlogPostPage.js
@@ -0,0 +1,12 @@
+import BlogLayout from 'src/layouts/BlogLayout'
+import BlogPostCell from 'src/components/BlogPostCell'
+
+const BlogPostPage = ({id}) => {
+  return (
+    <BlogLayout>
+      <BlogPostCell id={id}/>
+    </BlogLayout>
+  )
+}
+
+export default BlogPostPage
diff --git a/web/src/pages/BlogPostPage/BlogPostPage.stories.js b/web/src/pages/BlogPostPage/BlogPostPage.stories.js
new file mode 100644
index 0000000..5e9fa74
--- /dev/null
+++ b/web/src/pages/BlogPostPage/BlogPostPage.stories.js
@@ -0,0 +1,7 @@
+import BlogPostPage from './BlogPostPage'
+
+export const generated = () => {
+  return <BlogPostPage />
+}
+
+export default { title: 'Pages/BlogPostPage' }
diff --git a/web/src/pages/BlogPostPage/BlogPostPage.test.js b/web/src/pages/BlogPostPage/BlogPostPage.test.js
new file mode 100644
index 0000000..cb14ea6
--- /dev/null
+++ b/web/src/pages/BlogPostPage/BlogPostPage.test.js
@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import BlogPostPage from './BlogPostPage'
+
+describe('BlogPostPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<BlogPostPage />)
+    }).not.toThrow()
+  })
+})