Merge pull request #132 from WebDevStudios/feature/60-basic-comment-form

Feature/60 basic comment form

Author: Greg Rickaby

api/frontend/wp/comments/postComment.js

@@ -45,7 +45,7 @@ export default async function postComment(
     })
     .then(
       (response) =>
-        response?.data?.createComment ?? {
+        response?.data?.postComment ?? {
           error: true,
           errorMessage: `An error occurred while trying to post the comment.`
         }

components/molecules/Form/Form.js

@@ -13,25 +13,22 @@ import cn from 'classnames'
  * @param {object}        props.formDefaults     Formik default data.
  * @param {string|number} props.id               Form id.
  * @param {object}        props.validationSchema Yup validation schema object.
+ * @param {Function}      props.onSubmit         Function to execute when form is submitted
  * @return {Element}                             The Form component.
  */
 export default function Form({
   children,
   className,
   formDefaults,
   id,
-  validationSchema
+  validationSchema,
+  onSubmit
 }) {
   return (
     <Formik
       initialValues={formDefaults}
       validationSchema={validationSchema}
-      onSubmit={(values, {setSubmitting}) => {
-        setTimeout(() => {
-          alert(JSON.stringify(values, null, 2))
-          setSubmitting(false)
-        }, 400)
-      }}
+      onSubmit={onSubmit}
     >
       <FormikForm id={id} className={cn(styles.form, className)}>
         {children}
@@ -46,7 +43,8 @@ Form.propTypes = {
   className: PropTypes.string,
   formDefaults: PropTypes.object,
   id: PropTypes.string,
-  validationSchema: PropTypes.object
+  validationSchema: PropTypes.object,
+  onSubmit: PropTypes.func
 }
 
 Form.defaultProps = {

pages/api/wp/postComment.js

@@ -33,7 +33,8 @@ export default async function postComment(req, res) {
     res
       .status(error?.status || 500)
       .end(
-        error?.message || 'An error occurred while attempted to load more posts'
+        error?.message ||
+          'An error occurred while attempted to post the comment'
       )
   }
 }

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 Text from '@/components/atoms/Inputs/Text'
+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,35 @@ 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
+            const response = await postComment(
+              author,
+              authorEmail,
+              authorUrl,
+              post.databaseId,
+              content
+            )
+            response.error
+              ? alert(response.errorMessage)
+              : alert(JSON.stringify(response))
+            setSubmitting(false)
+          }}
+        >
+          <Text id="author" label="Author" isRequired type="text" />
+          <Text id="authorEmail" label="Email" isRequired type="email" />
+          <Text id="authorUrl" label="Website" type="url" />
+          <Text id="content" label="Comment" isRequired type="text" />
+        </Form>
       </article>
     </Layout>
   )