Merge branch 'staging' of https://github.com/WebDevStudios/nextjs-wordpress-starter into feature/component-handling

Author: dcooney

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 = {

package.json

@@ -64,11 +64,11 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "graphql": "^15.4.0",
+    "graphql": "^15.5.0",
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "next-seo": "^4.17.0",
-    "next-sitemap": "^1.4.5",
+    "next-sitemap": "^1.4.13",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",

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>
   )

yarn.lock

@@ -7047,10 +7047,10 @@ graphql-tag@^2.11.0:
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.11.0.tgz#1deb53a01c46a7eb401d6cb59dec86fa1cccbffd"
   integrity sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA==
 
-graphql@^15.4.0:
-  version "15.4.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.4.0.tgz#e459dea1150da5a106486ba7276518b5295a4347"
-  integrity sha512-EB3zgGchcabbsU9cFe1j+yxdzKQKAbGUWRb13DsrsMN1yyfmmIq+2+L5MqVWcDCE4V89R5AyUOi7sMOGxdsYtA==
+graphql@^15.5.0:
+  version "15.5.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-15.5.0.tgz#39d19494dbe69d1ea719915b578bf920344a69d5"
+  integrity sha512-OmaM7y0kaK31NKG31q4YbD2beNYa6jBBKtMFT6gLYJljHLJr42IqJ8KX08u3Li/0ifzTU5HjmoOOrwa5BRLeDA==
 
 gud@^1.0.0:
   version "1.0.0"
@@ -9263,10 +9263,10 @@ next-seo@^4.17.0:
   resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-4.17.0.tgz#fb3dbe0ed7414aa9d83872ef5d8510980a6dae7e"
   integrity sha512-/hnb3oq7bhi8s7bup7+Lm6VzzgRucj+JrWtp+dJiYs/04H0N/NhmE9MpepixQ16fFj6G/39JLYxhzsO/QZG/Kw==
 
-next-sitemap@^1.4.5:
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-1.4.5.tgz#009f99f279cab63ca64803830e467fae2aae2e27"
-  integrity sha512-gi7xeBiJrzcSJekT0xRh26KEEU8c+v4yenzy3BDehvm2rXzl2tOFbUoSESuQkv8iHm2Gz5WC8Og297t/VRGmkw==
+next-sitemap@^1.4.13:
+  version "1.4.13"
+  resolved "https://registry.yarnpkg.com/next-sitemap/-/next-sitemap-1.4.13.tgz#2c7638f1a48a43db8aa138e53cf9c857e540052f"
+  integrity sha512-jaf6VsYHU5zIJUYiciN6xSrGqrMoT3xwrmLvCk+//B9jxg+aXqTdl3jKH9QYcHSf5aHo/skAmqMbiXZqaEfwjg==
   dependencies:
     "@corex/deepmerge" "^2.5.3"
     matcher "^3.0.0"