fixing contacts

SMEW-Technology · Jun 26, 2024 · c76c4e8 · c76c4e8
1 parent 8cb22e9
commit c76c4e8
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "postcss": "8.4.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-toastify": "^10.0.5",
     "remark": "^14.0.3",
     "remark-html": "^15.0.2",
     "tailwindcss": "3.3.3"

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -13,7 +13,9 @@ import '../styles/special-classes.css'
 import '../styles/responsive.css'
 import '../styles/owl.carousel.min.css'
 import '../styles/owl.theme.default.min.css'
+import "react-toastify/dist/ReactToastify.css";
 import Script from "next/script";
+import { ToastContainer } from "react-toastify"
 
 export default function App({Component, pageProps}: AppProps) {
     useEffect(() => {
@@ -29,6 +31,7 @@ export default function App({Component, pageProps}: AppProps) {
             <main>
                 <Header/>
                 <Component {...pageProps} />
+                <ToastContainer />
                 <Footer/>
 
                 <Script type="text/javascript" src="./js/jquery-3.6.0.min.js" strategy={"beforeInteractive"}/>

diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -2,32 +2,51 @@ import React, {useRef, useState} from "react";
 import {ContactForm} from "../components/ContactForm";
 import {useRouter} from "next/router";
 import Link from "next/link";
+import { toast } from "react-toastify";
 
 export default function Contact() {
-    const router = useRouter()
-    const {email} = router.query
-    const [message, setMessage] = useState("");
-    const formRef = useRef();
-    // @ts-ignore
-    const submitContact = async (e) => {
-        e.preventDefault();
-        console.log(e.target[0].value);
-        console.log(e.target[1].value);
-        console.log(e.target[2].value);
-        const res = await ContactForm({
-            name: e.target[0].value,
-            email: e.target[1].value,
-            comment: e.target[2].value,
-        });
-        if (res == 0) {
-            setMessage("Thank you for your valuable comment!");
-            // @ts-ignore
-            formRef.current.reset();
-        } else {
-            setMessage("Something went wrong! Please try again");
-        }
+  const router = useRouter();
+  const { email } = router.query;
+  const [message, setMessage] = useState("");
+  const formRef = useRef<HTMLFormElement>(null);
+  // @ts-ignore
+  const submitContact = async (e) => {
+    e.preventDefault();
+
+    const objectParam = {
+      "entry.195424463": e.target[0].value,
+      "entry.523675412": e.target[1].value,
+      "entry.655646402": e.target[2].value,
     };
 
+    const params = new URLSearchParams();
+
+    Object.entries(objectParam).forEach(([key, value]) => {
+      params.append(key, value);
+    });
+
+    var formUrl = `https://docs.google.com/forms/d/e/1FAIpQLSfzclPs0xYECxknJnW3NVMB-ugOFhM3Zi5p76VqMptr1nLmSA/formResponse?&submit=Submit?usp=pp_url&${params.toString()}`;
+
+    try {
+      const res = await fetch(formUrl, {
+        mode: "no-cors",
+        method: "GET",
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+      });
+      if (res) {
+        formRef.current?.reset();
+        toast(
+          "Thanks for contacting us! We will be in touch with you shortly!"
+        );
+      }
+    } catch (error) {
+      toast("An error occurred, please try again later!");
+    }
+  };
+
     return (
         <>
             <section className="contact-section">
@@ -76,7 +95,7 @@ export default function Contact() {
                                 <div className="need_content">
                                     <h6 className="text-white">Write to us</h6>
                                     <h2 className="text-white">send us a Message</h2>
-                                    <form id="contactpage" onSubmit={submitContact}>
+                                    <form id="contactpage" onSubmit={submitContact} ref={formRef}>
                                         <div className="row">
                                             <div className="col-12">
                                                 <div className="form-group mb-0">

diff --git a/yarn.lock b/yarn.lock
@@ -1474,6 +1474,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3937,6 +3942,13 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-toastify@^10.0.5:
+  version "10.0.5"
+  resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-10.0.5.tgz#6b8f8386060c5c856239f3036d1e76874ce3bd1e"
+  integrity sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==
+  dependencies:
+    clsx "^2.1.0"
+
 [email protected]:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"