Email Signup Submission Fixed

frontend/src/components/Footer/Footer.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import style from "./footer.module.scss";
+import { postSubscriber } from '../../service/Subscriber'
+import { SimpleToast } from "../util/Toast";
 
 //react-icon
 import { FiCheckSquare } from "react-icons/fi";
@@ -12,6 +14,11 @@ export const Footer = (props) => {
   const [email, setEmail] = useState("");
   //setting email error
   const [emailErr, setEmailErr] = useState({});
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
 
   const emailValidation = (email) => {
     let isValid = true;
@@ -47,14 +54,15 @@ export const Footer = (props) => {
   };
 
   //handling submit
-  const handleSubmit = (e) => {
+  const handleSubmit = async(e) => {
     e.preventDefault();
     //if isValid = true, form submission trigger
     const isValid = validation();
     if (isValid) {
-      setSubmited(true);
+      const res=await postSubscriber({email},setToast)
       //resetting email value in state after submission of form
-      setEmail("");
+      if(res)
+        setEmail("");
     }
   };
   var date = new Date();
@@ -87,93 +95,70 @@ export const Footer = (props) => {
           >
             <p>Email: [email protected]</p>
           </a>
-          {submited ? (
-            <React.Fragment>
-              <div
+          <React.Fragment>
+            <div className={style["newsletter"]}>
+              <h2
                 className={
-                  dark
-                    ? `${style["subscribe-card"]} ${style["subscribe-card-dark"]}`
-                    : `${style["subscribe-card"]} `
+                  dark ? style["nav-title-dark"] : style["nav-title"]
                 }
               >
-                <h1
+                Sign Up for our Newsletter
+              </h2>
+              <p>
+                Receive updates and news about various Job Opportunities,
+                Internships, Webinars and Open Source Events.
+              </p>
+              <form
+                className="d-flex flex-column flex-md-row align-items-center mt-4"
+                onSubmit={handleSubmit}
+              >
+                <input
+                  autoComplete="off"
+                  type="text"
+                  name="email"
                   className={
                     dark
-                      ? `${style["card-heading"]} ${style["card-heading-dark"]}`
-                      : `${style["card-heading"]} `
-                  }
-                >
-                  successfully subscribed to our newsletter
-                  <FiCheckSquare className={style["newsletter-icon"]} />
-                </h1>
-              </div>
-            </React.Fragment>
-          ) : (
-            <React.Fragment>
-              <div className={style["newsletter"]}>
-                <h2
-                  className={
-                    dark ? style["nav-title-dark"] : style["nav-title"]
+                      ? `${style["input-field-footer"]} ${style["input-field-footer-dark"]}`
+                      : `${style["input-field-footer"]}`
                   }
-                >
-                  Sign Up for our Newsletter
-                </h2>
-                <p>
-                  Receive updates and news about various Job Opportunities,
-                  Internships, Webinars and Open Source Events.
-                </p>
-                <form
-                  className="d-flex flex-column flex-md-row align-items-center mt-4"
-                  onSubmit={handleSubmit}
-                >
-                  <input
-                    autoComplete="off"
-                    type="text"
-                    name="email"
-                    className={
-                      dark
-                        ? `${style["input-field-footer"]} ${style["input-field-footer-dark"]}`
-                        : `${style["input-field-footer"]}`
-                    }
-                    placeholder="Email Id"
-                    onChange={handleEmailChange}
-                    value={email}
-                  />
-                  <br />
-                  {Object.keys(emailErr).map((key) => {
-                    return (
-                      <div
-                        className={`${style["validation"]} d-sm-block d-md-none`}
-                        key={key}
-                      >
-                        {emailErr[key]}
-                      </div>
-                    );
-                  })}
-                  <button
-                    type="submit"
-                    className={
-                      dark
-                        ? `mt-3 mt-md-0 ${style["submit-btn-footer"]} py-2 px-3 mt-3 mt-md-0 ${style["submit-btn-footer-dark"]} py-2 px-3 `
-                        : `mt-3 mt-md-0 ${style["submit-btn-footer"]} py-2 px-3 `
-                    }
-                  >
-                    Sign Up
-                  </button>
-                </form>
+                  placeholder="Email Id"
+                  onChange={handleEmailChange}
+                  value={email}
+                />
+                <br />
                 {Object.keys(emailErr).map((key) => {
                   return (
                     <div
-                      className={`${style["validation-new"]} validation-new d-sm-none d-md-block`}
+                      className={`${style["validation"]} d-sm-block d-md-none`}
                       key={key}
                     >
                       {emailErr[key]}
                     </div>
                   );
                 })}
-              </div>
-            </React.Fragment>
-          )}
+                <button
+                  type="submit"
+                  className={
+                    dark
+                      ? `mt-3 mt-md-0 ${style["submit-btn-footer"]} py-2 px-3 mt-3 mt-md-0 ${style["submit-btn-footer-dark"]} py-2 px-3 `
+                      : `mt-3 mt-md-0 ${style["submit-btn-footer"]} py-2 px-3 `
+                  }
+                >
+                  Sign Up
+                </button>
+              </form>
+              {Object.keys(emailErr).map((key) => {
+                return (
+                  <div
+                    className={`${style["validation-new"]} validation-new d-sm-none d-md-block`}
+                    key={key}
+                  >
+                    {emailErr[key]}
+                  </div>
+                );
+              })}
+            </div>
+          </React.Fragment>
         </div>
         <ul className={style["footer-nav"]}>
           <li className={style["nav-item"]}>
@@ -384,6 +369,14 @@ export const Footer = (props) => {
         <p className={`${style["cprt"]} py-2`}>
           Copyright © {year} HITK Tech Community
         </p>
+        {toast.toastStatus && (
+          <SimpleToast
+            open={toast.toastStatus}
+            message={toast.toastMessage}
+            handleCloseToast={() => { setToast({ toastStatus: false, toastMessage: "", toastType: "" }) }}
+            severity={toast.toastType}
+          />
+        )}
       </div>
     </React.Fragment>
   );

frontend/src/service/Subscriber.jsx

@@ -0,0 +1,31 @@
+import { END_POINT } from "../config/api";
+import { showToast } from "./toastService";
+
+const postSubscriber = async (data, setToast) => {
+  try {
+    const response = await fetch(`${END_POINT}/subscriber/`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (response.ok) {
+      const _data = await response.json();
+      showToast(setToast, "Newsletter Subscribed successfully", "success");
+      return true;
+    } else {
+      const errorData = await response.json();
+      console.error("Error:", errorData);
+      showToast(setToast, "You already subscribed", "error");
+      return false;
+    }
+  } catch (err) {
+    console.error("Network Error:", err);
+    showToast(setToast, "Something went wrong", "error");
+    return false;
+  }
+};
+
+export { postSubscriber };