contact form post started

src/components/contact/ContactForm.tsx

@@ -6,9 +6,12 @@ import Skeleton from "react-loading-skeleton";
 import board from "../../images/board.jpg";
 
 // Helpers
-import { getContact } from "../../helpers/apiRequests";
+import { getContact, sendData } from "../../helpers/apiRequests";
 import { highlightColor } from "../../helpers/otherVariables";
 
+// Components
+import Loader from "../global/Loader";
+
 // Icons
 import forward from "../../icons/arrow-forward.svg";
 import email from "../../icons/email-black.svg";
@@ -19,8 +22,17 @@ import yt from "../../icons/youtube-gray.svg";
 import ig from "../../icons/instagram-grey.svg";
 import twitter from "../../icons/twitter-gray.svg";
 
+// Types
+import { ContactData } from "../../types/contact";
+
 const ContactForm = () => {
   const [contact, setContact]: [any, React.Dispatch<any>] = useState();
+  const [data, setData]: [ContactData, React.Dispatch<ContactData>] = useState({
+    name: "",
+    email: "",
+    message: "",
+  });
+  const [load, setLoad]: [boolean, React.Dispatch<boolean>] = useState(false);
 
   useEffect(() => {
     getContact(setContact);
@@ -29,10 +41,18 @@ const ContactForm = () => {
   return (
     <form
       className="contact-form"
-      onSubmit={(e) => {
+      onSubmit={(e: any) => {
         e.preventDefault();
+        sendData(setLoad, data);
+        e.target.reset();
+        setData({
+          name: "",
+          email: "",
+          message: "",
+        });
       }}
     >
+      <Loader className={load ? "active" : ""} />
       <div className="contact-form-left">
         <div className="contact-img">
           <img src={board} alt="" />
@@ -166,31 +186,53 @@ const ContactForm = () => {
             <div className="input-block">
               <label htmlFor="name">Имя</label>
               <input
+                required
                 type="text"
                 name="name"
                 id="name"
                 placeholder="Аман Аманов"
+                onPaste={(e: any) => {
+                  setData({ ...data, name: e.target.value });
+                }}
+                onChange={(e: any) => {
+                  setData({ ...data, name: e.target.value });
+                }}
               />
             </div>
             <div className="input-block">
               <label htmlFor="email">Email</label>
               <input
+                required
                 type="email"
                 name="email"
                 id="email"
                 placeholder="aman@gmail.com"
+                onPaste={(e: any) => {
+                  setData({ ...data, email: e.target.value });
+                }}
+                onChange={(e: any) => {
+                  setData({ ...data, email: e.target.value });
+                }}
               />
             </div>
             <div className="input-block">
               <label htmlFor="text">Чем мы можем помочь вам?</label>
               <textarea
+                required
                 name="text"
                 id="text"
                 placeholder="Расскажите нам о вашей проблеме..."
+                onPaste={(e: any) => {
+                  setData({ ...data, message: e.target.value });
+                }}
+                onChange={(e: any) => {
+                  setData({ ...data, message: e.target.value });
+                }}
               ></textarea>
+              {/* <span className={data.message.length !== 0 ? "validation active" : "validation"}></span> */}
             </div>
           </div>
-          <button type="button">Отправить сообщение</button>
+          <button type="submit">Отправить сообщение</button>
         </div>
       </div>
     </form>

src/components/global/Loader.tsx

@@ -0,0 +1,19 @@
+// Modules
+
+// Icons
+import { ReactComponent as Spinner } from "../../icons/loader.svg";
+
+// Types
+interface Props {
+  className: string;
+}
+
+const Loader = ({ className }: Props) => {
+  return (
+    <div className={`loader ${className}`}>
+      <Spinner className="spinner" />
+    </div>
+  );
+};
+
+export default Loader;

src/helpers/apiRequests.ts

@@ -1,4 +1,5 @@
 import axios from "axios";
+import React from "react";
 import { SlideProps } from "../types/mainSliderSlide";
 import { partnersType } from "../types/partnersType";
 import { eventType } from "../types/eventProps";
@@ -17,8 +18,11 @@ import {
   about,
   players,
   events,
+  contact_us,
 } from "../links";
-import React from "react";
+
+// Types
+import { ContactData } from "../types/contact";
 
 export const getMainSliderData = (
   setState: React.Dispatch<SlideProps[]>
@@ -151,3 +155,18 @@ export const getPlayerInfo = (setState: any, link: string) => {
     })
     .catch();
 };
+
+export const sendData = (setState: any, data: ContactData) => {
+  const formData = new FormData();
+  formData.append("name", data.name);
+  formData.append("email", data.email);
+  formData.append("message", data.message);
+  axios
+    .post(contact_us, formData)
+    .then((res) => {
+      if (res.data === "Contact message sent") {
+        setState(false);
+      }
+    })
+    .catch();
+};

src/icons/loader.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: transparent; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#01815e" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

src/links.ts

@@ -23,3 +23,5 @@ export const about: string = hosting + "/api/v1/about";
 export const players: string = hosting + "/api/v1/players";
 
 export const events: string = hosting + "/api/v1/events";
+
+export const contact_us: string = hosting + "/api/v1/send-contact-form";

src/styles/_contact.scss

@@ -31,6 +31,7 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
+  position: relative;
 }
 
 .contact-img {

src/styles/_loader.scss

@@ -0,0 +1,22 @@
+.loader {
+  @include flex-c;
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: rgba(255, 255, 255, 0.8);
+  @include transition-std;
+
+  &.active {
+    pointer-events: all;
+    opacity: 1;
+    @include transition-std;
+  }
+}
+
+.spinner {
+  width: 9rem;
+  height: 9rem;
+}

src/styles/style.scss

@@ -19,3 +19,4 @@
 @import "./tournaments";
 @import "./burger";
 @import "./player-profile";
+@import "./loader";

src/types/contact.ts

@@ -0,0 +1,5 @@
+export interface ContactData {
+  name: string;
+  email: string;
+  message: string;
+}