From 8ceb19871319bd3f51eafd5b9bd7e7ab66d8f51c Mon Sep 17 00:00:00 2001
From: tkt <37575408+tktcorporation@users.noreply.github.com>
Date: Mon, 10 Oct 2022 11:08:18 +0000
Subject: [PATCH] :sparkles: finish
 https://redwoodjs.com/docs/tutorial/chapter6/comment-form#adding-the-form-to-the-blog-post

---
 web/src/components/Article/Article.tsx         | 15 +++++++--------
 web/src/components/CommentForm/CommentForm.tsx |  8 ++++++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/web/src/components/Article/Article.tsx b/web/src/components/Article/Article.tsx
index 8d4b2d0f7..6aa0cbf18 100644
--- a/web/src/components/Article/Article.tsx
+++ b/web/src/components/Article/Article.tsx
@@ -2,20 +2,16 @@ import type { Post } from 'types/graphql'
 
 import { Link, routes } from '@redwoodjs/router'
 
+import CommentForm from 'src/components/CommentForm'
 import CommentsCell from 'src/components/CommentsCell'
 
 const truncate = (text: string, length: number) => {
   return text.substring(0, length) + '...'
 }
 
-interface Props {
-  article: Omit<Post, 'createdAt'>
-  summary?: boolean
-}
-
-const Article = ({ article, summary = false }: Props) => {
+const Article = ({ article, summary = false }) => {
   return (
-    <article className="mt-10">
+    <article>
       <header>
         <h2 className="text-xl text-blue-700 font-semibold">
           <Link to={routes.article({ id: article.id })}>{article.title}</Link>
@@ -26,7 +22,10 @@ const Article = ({ article, summary = false }: Props) => {
       </div>
       {!summary && (
         <div className="mt-12">
-          <CommentsCell />
+          <CommentForm postId={article.id} />
+          <div className="mt-12">
+            <CommentsCell />
+          </div>
         </div>
       )}
     </article>
diff --git a/web/src/components/CommentForm/CommentForm.tsx b/web/src/components/CommentForm/CommentForm.tsx
index 9e1f55228..4846ce2cc 100644
--- a/web/src/components/CommentForm/CommentForm.tsx
+++ b/web/src/components/CommentForm/CommentForm.tsx
@@ -25,11 +25,15 @@ interface FormValues {
   comment: string
 }
 
-const CommentForm = () => {
+interface Props {
+  postId: number
+}
+
+const CommentForm = ({ postId }: Props) => {
   const [createComment, { loading, error }] = useMutation(CREATE)
 
   const onSubmit: SubmitHandler<FormValues> = (input) => {
-    createComment({ variables: { input } })
+    createComment({ variables: { input: { postId, ...input } } })
   }
 
   return (