fix(Notification): added notifications on globalstate on contact form

src/Components/Form/ContactForm.jsx

@@ -1,19 +1,42 @@
-import React from 'react'
+import React, {useRef} from 'react'
 import { StyledFormSubmit } from '../../Layout/Form/styledInput';
+import {useNotification} from "../../GlobalState";
 import './Contact.css'
 
 const ContactForm = () => {
-    return (<>
+  const dispatch = useNotification();
+  const form = useRef();
+
+  const handleConfirm = () => {
+    form.current.submit();
+  };
+
+  const formNotification = () => {
+    dispatch({
+      type: "SUCCESS",
+      message: "Processing Your Request...Please Wait",
+      title: "Successful Request"
+    })
+  }
+
+  const handleNotification = async () => {
+    await formNotification();
+    await handleConfirm();
+  }
+
+  return (<>
         <div className='contact-container'>
             <p>Have a question? I am available for hire and open to any ideas of cooperation.</p>
-            <form action="https://getform.io/f/7efda21f-ca67-48f6-8a1e-723776d4ae3b" method='POST'>
+            <form ref={form} onSubmit={handleNotification} action="https://getform.io/f/7efda21f-ca67-48f6-8a1e-723776d4ae3b" method='POST'>
                 <input className='contact-input' type="text" name="name" placeholder="Name" />
                 <input className='contact-input' type="email" name="email" placeholder="Enter Email" />
                 <textarea className='area' name="message" placeholder='Your Message' />
-                <StyledFormSubmit type="submit" value="Submit"/>
+                <div style={{color: 'white', fontSize: '2rem'}}  onClick={handleNotification}>Test</div>
+                <StyledFormSubmit  onClick={handleNotification} type="submit" value="Submit"/>
             </form>
         </div>
     </>
-    )
+  )
 }
+
 export default ContactForm;

src/GlobalState.js

@@ -1,14 +1,24 @@
-import React, { createContext, useState, useEffect } from "react";
+import React, { createContext, useContext, useState, useEffect, useReducer } from "react";
 import ArticlesAPI from './API/ArticlesAPI';
 import UserAPI from "./API/UserAPI";
 import axios from "axios";
+import {v4} from "uuid";
+import Notification from './Components/Notification/Notification'
 
-export const GlobalState = createContext()
-
+export const GlobalState = createContext();
 
 export const DataProvider = ({ children }) => {
-    const [token, setToken] = useState(false)
-
+  const [token, setToken] = useState(false);
+  const [state, dispatch] = useReducer((state, action) => {
+    switch(action.type) {
+      case "ADD_NOTIFICATION":
+        return [...state, {...action.payload}];
+      case "REMOVE_NOTIFICATION":
+        return state.filter(element => element.id !== action.id);
+      default:
+        return state
+    }
+  }, []);
 
     useEffect(() => {
 		const firstLogin = localStorage.getItem("firstLogin");
@@ -25,18 +35,37 @@ export const DataProvider = ({ children }) => {
 		}
 	}, []);
 
-    const state = {
+    const globalState = {
         token: [token, setToken],
         articlesAPI: ArticlesAPI(),
         userAPI: UserAPI(token),
+        dispatch: dispatch
 
     }
 
     return (
-        <GlobalState.Provider value={state}>
+        <GlobalState.Provider value={globalState}>
+            <div className={"notification-wrapper"}>
+              {state.map(note => {
+                return <Notification dispatch={dispatch} key={note.id} {...note}/>
+              })}
+            </div>
             {children}
         </GlobalState.Provider>
     )
 }
 
+export const useNotification = () => {
+  const notification = useContext(GlobalState);
+  const dispatch = notification.dispatch
 
+  return (props) => {
+    dispatch({
+      type: "ADD_NOTIFICATION",
+      payload: {
+        id: v4(),
+        ...props
+      }
+    })
+  }
+};