From 63a7c9e62b22f6c8368ef01b32bdc40341ffa325 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Fri, 24 Jul 2020 17:50:25 +0300
Subject: [PATCH] form validation

---
 package-lock.json                             |  5 +++
 package.json                                  |  3 +-
 .../Articles/ArticleCard/ArticleCard.js       |  2 +-
 .../Articles/ArticleCard/ArticleCard.scss     | 12 ------
 src/components/Contacts/Contacts.scss         | 10 ++++-
 .../Contacts/ContactsForm/ContactsForm.js     | 38 +++++++++++++++----
 src/components/Header/Header.scss             | 29 ++++++++++++++
 src/images/yadzen-icon.svg                    |  4 +-
 src/styles/global.scss                        |  1 -
 9 files changed, 78 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 78c0102..881b2d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17297,6 +17297,11 @@
         "react-side-effect": "^2.1.0"
       }
     },
+    "react-hook-form": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-6.0.8.tgz",
+      "integrity": "sha512-lf1TTuRuqHkYJqDtNIgDu9Rk7euKWkFaG2+XZ3FSkngiFWR72Lj96/FeSGF+ZMylCLdCFq2F059kzucVKWvDiQ=="
+    },
     "react-hot-loader": {
       "version": "4.12.21",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
diff --git a/package.json b/package.json
index 8aa18a0..87f7648 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,8 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-flexbox-grid": "^2.1.2",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "react-hook-form": "^6.0.8"
   },
   "devDependencies": {
     "prettier": "2.0.5"
diff --git a/src/components/Articles/ArticleCard/ArticleCard.js b/src/components/Articles/ArticleCard/ArticleCard.js
index 10b1eea..b074df5 100644
--- a/src/components/Articles/ArticleCard/ArticleCard.js
+++ b/src/components/Articles/ArticleCard/ArticleCard.js
@@ -30,7 +30,7 @@ const ArticleCard = ({
       <div className="article-card__tags">
         <ul>
           {tags.map((tag, i) => (
-            <li key={i}>
+            <li className="tag-item" key={i}>
               <Link to={`/tag/${tag}`}>{tag}</Link>
             </li>
           ))}
diff --git a/src/components/Articles/ArticleCard/ArticleCard.scss b/src/components/Articles/ArticleCard/ArticleCard.scss
index cd9663c..5da5c27 100644
--- a/src/components/Articles/ArticleCard/ArticleCard.scss
+++ b/src/components/Articles/ArticleCard/ArticleCard.scss
@@ -34,18 +34,6 @@
       & li {
         margin-right: 5px;
         margin-bottom: 15px;
-        & a {
-          padding: 5px 10px;
-          background: #EBF1FE;
-          text-decoration: none;
-          border-radius: 4px;
-          font-size: 14px;
-          transition: all .1s;
-          &:hover {
-            background: #d8e3fd;
-            color: #3972f4;
-          }
-        }
       }
     }
   }
diff --git a/src/components/Contacts/Contacts.scss b/src/components/Contacts/Contacts.scss
index 4bcfeeb..5f7270e 100644
--- a/src/components/Contacts/Contacts.scss
+++ b/src/components/Contacts/Contacts.scss
@@ -22,6 +22,7 @@
     }
   }
   & .contacts-submitted {
+    min-height: 290px;
     margin-bottom: 30px;
     & h2 {
       margin-bottom: 10px;
@@ -40,11 +41,18 @@
       margin-bottom: 30px;
     }
     & form {
+      & .error-info {
+        text-align: left;
+        margin-bottom: 15px;
+        color: #df4e4e;
+      }
+      & .error-field {
+        border: 1px solid #ff3737;
+      }
       & .form-content {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
-        padding: 0 20px;
       }
       & input {
         margin-bottom: 10px;
diff --git a/src/components/Contacts/ContactsForm/ContactsForm.js b/src/components/Contacts/ContactsForm/ContactsForm.js
index 0b087f4..95f9769 100644
--- a/src/components/Contacts/ContactsForm/ContactsForm.js
+++ b/src/components/Contacts/ContactsForm/ContactsForm.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { useForm } from "react-hook-form"
 
 function encode(data) {
   return Object.keys(data)
@@ -7,6 +8,7 @@ function encode(data) {
 }
 
 const ContactsFrom = () => {
+  const { register, handleSubmit, errors } = useForm()
   const [state, setState] = React.useState({})
   const [submitted, setSubmitted] = React.useState(false)
   const [error, setError] = React.useState(false)
@@ -15,18 +17,19 @@ const ContactsFrom = () => {
     setState({ ...state, [e.target.name]: e.target.value })
   }
 
-  const handleSubmit = e => {
-    e.preventDefault()
-    const form = e.target
+  const onSubmit = () => {
     fetch("/", {
       method: "POST",
       headers: { "Content-Type": "application/x-www-form-urlencoded" },
       body: encode({
-        "form-name": form.getAttribute("name"),
+        "form-name": "contact",
         ...state,
       }),
     })
-      .then(() => setSubmitted(true))
+      .then(() => {
+        setSubmitted(true)
+        setState({})
+      })
       .catch(error => {
         console.error(error)
         setError(true)
@@ -72,40 +75,59 @@ const ContactsFrom = () => {
     <div className="contacts-form">
       <h2>форма обратной связи</h2>
       <form
-        onSubmit={handleSubmit}
+        onSubmit={handleSubmit(onSubmit)}
         name="contact"
         method="POST"
         data-netlify="true"
         data-netlify-honeypot="bot-field"
       >
+        {Object.keys(errors).filter(
+          field =>
+            errors[field].type === "required" ||
+            errors[field].type === "pattern"
+        ).length > 0 ? (
+          <p className="error-info">* Заполните все поля в нужном формате </p>
+        ) : null}
         <div hidden>
           Не заполняйте это
           <input name="bot-field" onChange={handleChange} />
         </div>
         <div className="form-content">
           <input
+            className={errors.name ? "error-field" : null}
             onChange={handleChange}
             name="name"
-            placeholder="Ваше имя"
+            placeholder="Введите ваше имя"
             type="text"
+            ref={register({ required: true, maxLength: 100 })}
           />
           <input
+            className={errors.email ? "error-field" : null}
             onChange={handleChange}
             name="email"
-            placeholder="Ваша почта"
+            placeholder="Ваша почта example@email.com"
             type="email"
+            ref={register({
+              required: true,
+              pattern: /^\S+@\S+$/i,
+              maxLength: 100,
+            })}
           />
           <input
+            className={errors.subject ? "error-field" : null}
             onChange={handleChange}
             name="subject"
             placeholder="Тема сообщения"
             type="text"
+            ref={register({ required: true })}
           />
           <textarea
+            className={errors.message ? "error-field" : null}
             onChange={handleChange}
             name="message"
             placeholder="Ваше сообщение..."
             defaultValue={""}
+            ref={register({ required: true })}
           />
           <div className="submit-btn">
             <button className="btn-primary" type="submit">
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss
index 0cd77eb..cc0cb18 100644
--- a/src/components/Header/Header.scss
+++ b/src/components/Header/Header.scss
@@ -51,6 +51,9 @@ header {
           & .telegram-svg-social {
             fill: #0088cc;
           }
+          & .yadzen-svg-social {
+            fill: #2E3238;
+          }
         }
         & a {
           text-decoration: none; 
@@ -132,6 +135,9 @@ header {
           & .telegram-svg-social {
             fill: #0088cc;
           }
+          & .yadzen-svg-social {
+            fill: #2E3238;
+          }
         }
         & svg {
           & .telegram-svg-social {
@@ -232,6 +238,19 @@ header {
             & .twitter-svg-social {
               fill: $white-clr;
             }
+            & .yadzen-svg-social {
+              fill: $white-clr;
+              &_black {
+                fill: black;
+              }
+            }
+          }
+          & svg:hover {
+            & .yadzen-svg-social {
+              &_black {
+                fill: $white-clr;
+              }
+            }
           }
         }
         & .header-nav__links {
@@ -282,6 +301,16 @@ header {
           }
           & .yadzen-svg-social {
             fill: $white-clr;
+            &_black {
+              fill: black;
+            }
+          }
+        }
+        & svg:hover {
+          & .yadzen-svg-social {
+            &_black {
+              fill: $white-clr;
+            }
           }
         }
       }
diff --git a/src/images/yadzen-icon.svg b/src/images/yadzen-icon.svg
index 8407470..e644ccd 100644
--- a/src/images/yadzen-icon.svg
+++ b/src/images/yadzen-icon.svg
@@ -1,8 +1,8 @@
 <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#yadzen-icon)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40624 0C4.90261 0.000333036 2.47489 0.0119894 1.22873 1.22891C0.0118761 2.47479 0.000217256 5.01652 0.000217256 8.40618C3.76404 8.2926 5.48522 8.19836 6.85797 6.85787C8.19838 5.48512 8.29266 3.76398 8.40624 0ZM1.22851 15.7712C0.0116588 14.5253 0 11.9836 0 8.59396C3.76383 8.70754 5.48501 8.80178 6.85776 10.1423C8.19817 11.515 8.29245 13.2362 8.40603 16.9998C4.9024 16.9998 2.47468 16.9885 1.22851 15.7712ZM8.59392 16.9998C8.7075 13.2362 8.80178 11.515 10.1422 10.1423C11.5149 8.80178 13.2361 8.70754 17 8.59396C16.9996 11.9836 16.988 14.5253 15.7711 15.7712C14.5249 16.9885 12.0976 16.9998 8.59392 16.9998ZM8.59392 0C8.7075 3.76398 8.80178 5.48512 10.1422 6.85787C11.5149 8.19836 13.2361 8.2926 17 8.40618C16.9996 5.01652 16.988 2.47479 15.7711 1.22891C14.5249 0.0119894 12.0976 0.000333036 8.59392 0Z" fill="black"/>
+<path class="yadzen-svg-social" fill-rule="evenodd" clip-rule="evenodd" d="M8.40624 0C4.90261 0.000333036 2.47489 0.0119894 1.22873 1.22891C0.0118761 2.47479 0.000217256 5.01652 0.000217256 8.40618C3.76404 8.2926 5.48522 8.19836 6.85797 6.85787C8.19838 5.48512 8.29266 3.76398 8.40624 0ZM1.22851 15.7712C0.0116588 14.5253 0 11.9836 0 8.59396C3.76383 8.70754 5.48501 8.80178 6.85776 10.1423C8.19817 11.515 8.29245 13.2362 8.40603 16.9998C4.9024 16.9998 2.47468 16.9885 1.22851 15.7712ZM8.59392 16.9998C8.7075 13.2362 8.80178 11.515 10.1422 10.1423C11.5149 8.80178 13.2361 8.70754 17 8.59396C16.9996 11.9836 16.988 14.5253 15.7711 15.7712C14.5249 16.9885 12.0976 16.9998 8.59392 16.9998ZM8.59392 0C8.7075 3.76398 8.80178 5.48512 10.1422 6.85787C11.5149 8.19836 13.2361 8.2926 17 8.40618C16.9996 5.01652 16.988 2.47479 15.7711 1.22891C14.5249 0.0119894 12.0976 0.000333036 8.59392 0Z" fill="black"/>
 <path class="yadzen-svg-social" fill-rule="evenodd" clip-rule="evenodd" d="M10.1422 10.1423C8.80178 11.515 8.7075 13.2362 8.59392 16.9998C12.0976 16.9998 14.5249 16.9885 15.7711 15.7712C16.988 14.5253 16.9996 11.9836 17 8.59396C13.2362 8.70754 11.5149 8.80178 10.1422 10.1423ZM0 8.59396C0 11.9836 0.0116588 14.5253 1.22851 15.7712C2.47468 16.9885 4.9024 16.9998 8.40603 16.9998C8.29245 13.2362 8.19817 11.515 6.85776 10.1423C5.48501 8.80178 3.76383 8.70754 0 8.59396ZM8.40624 0C4.90261 0.000333036 2.47489 0.0119894 1.22873 1.22891C0.0118761 2.47479 0.000217256 5.01652 0.000217256 8.40618C3.76404 8.2926 5.48522 8.19836 6.85797 6.85787C8.19838 5.48512 8.29266 3.76398 8.40624 0ZM10.1422 6.85787C8.80178 5.48512 8.7075 3.76398 8.59392 0C12.0976 0.000333036 14.5249 0.0119894 15.7711 1.22891C16.988 2.47479 16.9996 5.01652 17 8.40618C13.2362 8.2926 11.5149 8.19836 10.1422 6.85787Z" fill="url(#paint0_linear)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 8.59466V8.50074V8.40713C13.2361 8.29323 11.5149 8.19934 10.1422 6.85854C8.80179 5.48607 8.70751 3.76496 8.59392 0.000976562H8.49996H8.40604C8.29246 3.76496 8.19818 5.48607 6.85773 6.85854C5.48498 8.19934 3.7638 8.29323 0 8.40713V8.50074V8.59466C3.7638 8.70853 5.48498 8.80245 6.85773 10.1429C8.19818 11.5157 8.29246 13.2368 8.40604 17.0008H8.49996H8.59392C8.70751 13.2368 8.80179 11.5157 10.1422 10.1429C11.5149 8.80245 13.2361 8.70853 17 8.59466Z" fill="white"/>
+<path class="yadzen-svg-social_black" fill-rule="evenodd" clip-rule="evenodd" d="M17 8.59466V8.50074V8.40713C13.2361 8.29323 11.5149 8.19934 10.1422 6.85854C8.80179 5.48607 8.70751 3.76496 8.59392 0.000976562H8.49996H8.40604C8.29246 3.76496 8.19818 5.48607 6.85773 6.85854C5.48498 8.19934 3.7638 8.29323 0 8.40713V8.50074V8.59466C3.7638 8.70853 5.48498 8.80245 6.85773 10.1429C8.19818 11.5157 8.29246 13.2368 8.40604 17.0008H8.49996H8.59392C8.70751 13.2368 8.80179 11.5157 10.1422 10.1429C11.5149 8.80245 13.2361 8.70853 17 8.59466Z" fill="white"/>
 </g>
 <defs>
 <linearGradient id="paint0_linear" x1="17" y1="16.9998" x2="17" y2="0" gradientUnits="userSpaceOnUse">
diff --git a/src/styles/global.scss b/src/styles/global.scss
index e688d27..195b28b 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -40,7 +40,6 @@
     color: #6ab0f3;
     font-size: 14px;
     border-radius: 4px;
-    transition: all .1s;
     &:hover {
       background: #d8e3fd;
       color: #3972f4;