From 442880f2fe6e00623f22a739d036ef3960a9c452 Mon Sep 17 00:00:00 2001
From: Highlander-Maker <highlander1952@protonmail.com>
Date: Wed, 22 Jun 2022 11:11:50 +0100
Subject: [PATCH] add errors to comments section

---
 package-lock.json     | 22 +++++++++++++++++++++
 package.json          |  1 +
 pages/post/[slug].tsx | 45 ++++++++++++++++++++++++++++++++++++++++++-
 yarn.lock             |  7 ++++++-
 4 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d548629..b1b3d04 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "next-sanity": "^0.5.2",
         "react": "18.1.0",
         "react-dom": "18.1.0",
+        "react-hook-form": "^7.32.2",
         "react-icons": "^4.4.0",
         "react-portable-text": "^0.4.3"
       },
@@ -1630,6 +1631,21 @@
         "react": "^18.1.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.32.2.tgz",
+      "integrity": "sha512-F1A6n762xaRhvtQH5SkQQhMr19cCkHZYesTcKJJeNmrphiZp/cYFTIzC05FnQry0SspM54oPJ9tXFXlzya8VNQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
@@ -3095,6 +3111,12 @@
         "scheduler": "^0.22.0"
       }
     },
+    "react-hook-form": {
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.32.2.tgz",
+      "integrity": "sha512-F1A6n762xaRhvtQH5SkQQhMr19cCkHZYesTcKJJeNmrphiZp/cYFTIzC05FnQry0SspM54oPJ9tXFXlzya8VNQ==",
+      "requires": {}
+    },
     "react-icons": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
diff --git a/package.json b/package.json
index 15e2372..3a73cd5 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "next-sanity": "^0.5.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
+    "react-hook-form": "^7.32.2",
     "react-icons": "^4.4.0",
     "react-portable-text": "^0.4.3"
   },
diff --git a/pages/post/[slug].tsx b/pages/post/[slug].tsx
index 2dd81b6..1368c7b 100644
--- a/pages/post/[slug].tsx
+++ b/pages/post/[slug].tsx
@@ -3,12 +3,26 @@ import Layout from "../../components/Layout";
 import { sanityClient, urlFor } from "../../sanity";
 import { Post } from "../../typings";
 import PortableText from "react-portable-text";
+import { useForm, SubmitHandler } from "react-hook-form";
+
+interface IFormInput {
+  _id: string;
+  name: string;
+  email: string;
+  comment: string;
+}
 
 interface Props {
   post: Post;
 }
 
 function Post({ post }: Props) {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<IFormInput>();
+
   return (
     <main>
       <Layout>
@@ -67,9 +81,19 @@ function Post({ post }: Props) {
         <form className="flex flex-col p-5 max-w-2xl mx-auto mb-10">
           <h3 className="text-sm text-cyan-400">Enjoyed this article?</h3>
           <h4 className="text-3xl font-bold">Leave a comment below!</h4>
+          <hr className="py-3 mt-2" />
+
+          <input
+            {...register("_id")}
+            type="hidden"
+            name="_id"
+            value={post._id}
+          />
+
           <label className="block mb-5">
             <span className="text-gray-700">Name</span>
             <input
+              {...register("name", { required: true })}
               className="shadow border rounded py-2 px-3 form-input mt-1 block w-full ring-cyan-400 outline-none focus:ring"
               placeholder="John Appleseed"
               type="text"
@@ -78,6 +102,7 @@ function Post({ post }: Props) {
           <label className="block mb-5">
             <span className="text-gray-700">Email</span>
             <input
+              {...register("email", { required: true })}
               className="shadow border rounded py-2 px-3 form-input mt-1 block w-full ring-cyan-400 outline-none focus:ring"
               placeholder="John Appleseed"
               type="text"
@@ -85,8 +110,26 @@ function Post({ post }: Props) {
           </label>
           <label className="block mb-5">
             <span className="text-gray-700">Comment</span>
-            <textarea className="shadow border rounded py-2 px-3 form-textarea mt-1 block w-full ring-cyan-400 outline-none focus:ring" placeholder="John Appleseed" rows={8} />
+            <textarea
+              {...register("comment", { required: true })}
+              className="shadow border rounded py-2 px-3 form-textarea mt-1 block w-full ring-cyan-400 outline-none focus:ring"
+              placeholder="John Appleseed"
+              rows={8}
+            />
           </label>
+
+          {/* errors will return when field validation fails */}
+          <div className="flex flex-col p-5">
+            {errors.name && (
+              <span className="text-red-500">- The Name Field is required</span>
+            )}
+             {errors.comment && (
+              <span className="text-red-500">- The Comment Field is required</span>
+            )}
+             {errors.email && (
+              <span className="text-red-500">- The Email Field is required</span>
+            )}
+          </div>
         </form>
       </Layout>
     </main>
diff --git a/yarn.lock b/yarn.lock
index 9c87d9d..6fce260 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -855,6 +855,11 @@
     "loose-envify" "^1.1.0"
     "scheduler" "^0.22.0"
 
+"react-hook-form@^7.32.2":
+  "integrity" "sha512-F1A6n762xaRhvtQH5SkQQhMr19cCkHZYesTcKJJeNmrphiZp/cYFTIzC05FnQry0SspM54oPJ9tXFXlzya8VNQ=="
+  "resolved" "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.32.2.tgz"
+  "version" "7.32.2"
+
 "react-icons@^4.4.0":
   "integrity" "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg=="
   "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz"
@@ -872,7 +877,7 @@
   dependencies:
     "@sanity/block-content-to-react" "^2.0.0"
 
-"react@*", "react@^17.0.2 || ^18.0.0-0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=15.0.0", "react@>=16.3.0", "react@>16.8.0 || ^17.0.0", "react@18.1.0":
+"react@*", "react@^16.8.0 || ^17 || ^18", "react@^17.0.2 || ^18.0.0-0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=15.0.0", "react@>=16.3.0", "react@>16.8.0 || ^17.0.0", "react@18.1.0":
   "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
   "version" "18.1.0"