Add basic comment form

Author: oddevan

pages/blog/[[...slug]].js

@@ -6,6 +6,9 @@ import getArchivePosts from '@/api/frontend/wp/archive/getArchivePosts'
 import postComment from '@/api/frontend/wp/comments/postComment'
 import getPagePropTypes from '@/functions/getPagePropTypes'
 import Blocks from '@/components/molecules/Blocks'
+import Form from '@/components/molecules/Form'
+import {Field, ErrorMessage} from 'formik'
+import * as Yup from 'yup'
 
 // Define route post type.
 const postType = 'post'
@@ -30,20 +33,6 @@ export default function BlogPost({post, archive, posts, pagination}) {
     await getArchivePosts(postType, pagination?.endCursor)
   }
 
-  /**
-   * Post a comment back to the blog
-   */
-  async function postTestComment() {
-    // TODO: get form data and post the comment
-    await postComment(
-      'Test Testerson',
-      '[email protected]',
-      'https://nextjswp.test',
-      post.databaseId,
-      'This is a test comment.'
-    )
-  }
-
   // Check for post archive.
   // TODO create generic archive component and move this check to `_app.js`.
   if (archive) {
@@ -84,7 +73,60 @@ export default function BlogPost({post, archive, posts, pagination}) {
             __html: JSON.stringify(post?.comments ?? [])
           }}
         />
-        <button onClick={postTestComment}>Post test comment</button>
+
+        <Form
+          className="sample-form"
+          id="form-1"
+          title="Add a comment"
+          validationSchema={Yup.object().shape({
+            author: Yup.string().required('This field is required.'),
+            authorEmail: Yup.string().required('This field is required.')
+          })}
+          onSubmit={async (values, {setSubmitting}) => {
+            const {author, authorEmail, authorUrl, content} = values
+            await postComment(
+              author,
+              authorEmail,
+              authorUrl,
+              post.databaseId,
+              content
+            )
+            setSubmitting(false)
+          }}
+        >
+          <label htmlFor="author">Author</label>
+          <Field
+            id="author"
+            name="author"
+            placeholder="Test Testerson"
+            type="text"
+          />
+          <ErrorMessage name="author" />
+          <label htmlFor="authorEmail">Email</label>
+          <Field
+            id="authorEmail"
+            name="authorEmail"
+            placeholder="[email protected]"
+            type="email"
+          />
+          <ErrorMessage name="authorEmail" />
+          <label htmlFor="authorUrl">Website</label>
+          <Field
+            id="authorUrl"
+            name="authorUrl"
+            placeholder="https://nextjswp.local"
+            type="url"
+          />
+          <ErrorMessage name="authorUrl" />
+          <label htmlFor="content">Comment</label>
+          <Field
+            id="content"
+            name="content"
+            placeholder="This is a test comment"
+            type="textarea"
+          />
+          <ErrorMessage name="content" />
+        </Form>
       </article>
     </Layout>
   )