✨ finish https://redwoodjs.com/docs/tutorial/chapter6/comment-form#ad…

…ding-the-form-to-the-blog-post

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>

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 (