Merge branch 'HITK-TECH-Community:main' into main

backend/app/models/Subscriber.js

@@ -0,0 +1,15 @@
+const moongoose = require('mongoose')
+
+const { Schema } = moongoose
+
+const SubscriberSchema = new Schema({
+    email: {
+        type: String,
+        trim: true,
+        unique:true,
+        required: true
+    }
+}, { timestamps: { createdAt: 'createdAt' } }
+)
+
+module.exports=moongoose.model("subscriber",SubscriberSchema)

backend/app/routes/index.js

@@ -12,6 +12,7 @@ const answer = require('./Q&A/answers');
 const teamMember = require('./teamMember');
 const resource = require('./resources');
 const testimonial = require('./testimonial');
+const subscriber=require('./subscribers');
 
 router.use('/admin', admin);
 router.use('/auth', auth);
@@ -26,4 +27,5 @@ router.use('/teamMember', teamMember);
 router.use('/', tinyURL);
 router.use('/resources', resource);
 router.use('/testimonials', testimonial);
+router.use('/subscriber',subscriber)
 module.exports = router;

backend/app/routes/subscribers/@validationSchema/index.js

@@ -0,0 +1,7 @@
+const Joi = require('joi');
+
+const postSubscriberValidationSchema = Joi.object().keys({
+  email: Joi.string().required(),
+});
+
+module.exports =  {postSubscriberValidationSchema};

backend/app/routes/subscribers/index.js

@@ -0,0 +1,9 @@
+const router = require('express').Router({ mergeParams: true });
+const postSubscriber = require('./postSubscriber');
+const validation = require('../../../helpers/middlewares/validation');
+const {postSubscriberValidationSchema} = require('./@validationSchema');
+
+// add new subscriber for news letter
+router.post('/', validation(postSubscriberValidationSchema), postSubscriber);
+
+module.exports = router;

backend/app/routes/subscribers/postSubscriber.js

@@ -0,0 +1,29 @@
+const to = require("await-to-js").default;
+const Subscriber = require('../../models/Subscriber');
+const { ErrorHandler } = require('../../../helpers/error')
+const constants = require('../../../constants');
+
+module.exports = async (req, res, next) => {
+  const [err, response] = await to(Subscriber.create({ ...req.body }));
+  if (err) {
+    if (err.code === 11000) {
+      const error = new ErrorHandler(constants.ERRORS.INPUT, {
+        statusCode: 400,
+        message: 'Bad request: Email already registered',
+        user: req.body.email,
+      });
+      return next(error);
+    }
+    const error = new ErrorHandler(constants.ERRORS.DATABASE, {
+      statusCode: 500,
+      message: 'Mongo Error: Insertion Failed',
+      errStack: err,
+    });
+    return next(error);
+  }
+  res.status(200).send({
+    message: 'Subscribed Successfully',
+    response: response,
+  });
+  return next();
+};

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>
   );