feat: notifications

components/forms/contact/ContactPageForm.jsx

@@ -1,8 +1,10 @@
 import {
+  Alert,
   Box,
   Button,
   Container,
   Grid,
+  Snackbar,
   TextField,
   Typography,
 } from '@mui/material';
@@ -10,23 +12,29 @@ import { useFormik } from 'formik';
 import { useTranslation } from 'next-i18next';
 import Link from 'next/link';
 import PropType from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import { BASE_PAGE } from '../../../constants/pages';
 import { postQuestion } from '../../../requests/question/postQuestionRequest';
 import { contactPageSchema } from '../../../schemas/contactSchema';
 
 const ContactPageForm = () => {
   const { t } = useTranslation('forms', 'contact', 'common');
+  const [open, setOpen] = useState(false);
   //const [error] = useState({ hasError: false, errorMessage: '' });
 
   const handleSubmit = async (values) => {
     try {
       postQuestion(values);
+      setOpen(true);
     } catch (error) {
       console.log(error);
     }
   };
 
+  const handleCloseNotification = () => {
+    setOpen(false);
+  };
+
   const formik = useFormik({
     initialValues: {
       firstName: '',
@@ -42,6 +50,20 @@ const ContactPageForm = () => {
 
   return (
     <Container component="main" maxWidth="md" sx={{ mb: '60px' }}>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={open}
+        autoHideDuration={3000}
+        onClose={handleCloseNotification}
+      >
+        <Alert
+          onClose={handleCloseNotification}
+          severity="success"
+          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
+        >
+          Question submitted!
+        </Alert>
+      </Snackbar>
       <Box
         sx={{
           marginTop: 32,

components/profile-content/ProfileContent.jsx

@@ -1,4 +1,4 @@
-import { Grid, Typography } from '@mui/material';
+import { Alert, Grid, Snackbar, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
 import { useState } from 'react';
@@ -11,12 +11,17 @@ const ProfileContent = ({ orders }) => {
   const { data: session } = useSession();
   const { updateUserInfo } = useUserUpdate();
   const [enableBtn, setEnableBtn] = useState(true);
+  const [open, setOpen] = useState(false);
 
   const updateUserHandler = async (values) => {
     try {
       setEnableBtn(false);
       updateUserInfo(values);
       await updateUser(values, session.user._id);
+      setOpen(true);
+      setTimeout(() => {
+        setEnableBtn(true);
+      }, 5000);
     } catch (error) {
       console.log(error);
       setTimeout(() => {
@@ -25,6 +30,10 @@ const ProfileContent = ({ orders }) => {
     }
   };
 
+  const handleCloseNotification = () => {
+    setOpen(false);
+  };
+
   const mapOrdersToDom = () =>
     orders.slice(-4).map((order, i) => (
       <OrderCard
@@ -39,6 +48,20 @@ const ProfileContent = ({ orders }) => {
 
   return (
     <Grid container spacing={2} sx={{ py: 10, height: '100%', width: '100%' }}>
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+        open={open}
+        autoHideDuration={3000}
+        onClose={handleCloseNotification}
+      >
+        <Alert
+          onClose={handleCloseNotification}
+          severity="success"
+          sx={{ width: '100%', backgroundColor: 'green', color: 'white' }}
+        >
+          User profile updated!
+        </Alert>
+      </Snackbar>
       <Grid item xs={12}>
         <Typography
           variant="h3"

models/question.js

@@ -16,10 +16,10 @@ const QuestionSchema = new mongoose.Schema({
   },
   email: {
     type: String,
-    unique: [true, 'Email must be unique.'],
     required: [true, 'Please provide an email.'],
     trim: true,
     lowercase: true,
+    unique: false,
     validate(value) {
       if (!validator.isEmail(value)) {
         throw new Error('Email is invalid');