contactForm: ajout des notifications react-toastify

gatsby-config.js

@@ -12,6 +12,7 @@ module.exports = {
 	plugins: [
 		"gatsby-plugin-sass",
 		"gatsby-transformer-remark",
+		"gatsby-plugin-react-helmet",
 		{
 			resolve: "gatsby-source-filesystem",
 			options: {

src/components/contactForm/index.jsx

@@ -1,10 +1,11 @@
 import emailjs from "emailjs-com";
 import React, { useState } from "react";
+import { toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 import "./index.scss";
 import ProfilePic from "../../images/profile.svg";
 import AtSymbole from "../../images/atSymbole.svg";
-// import { toast } from "react-toastify";
 
 const ContactForm = () => {
 	const [name, setName] = useState("");
@@ -39,10 +40,10 @@ const ContactForm = () => {
 			)
 			.then(
 				() => {
-					alert("Message envoyé");
+					toast("Message envoyé");
 				},
 				() => {
-					alert(
+					toast.error(
 						"Votre message n'a pas pu être envoyé. Merci de nous contacter directement par mail."
 					);
 				}

src/components/layout/index.jsx

@@ -1,14 +1,27 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { ToastContainer, toast } from "react-toastify";
 
 import Header from "../header";
 import Footer from "../footer";
 
+toast.configure();
+
 const Layout = ({ children }) => {
 	return (
 		<>
 			<Header />
 			<main>{children}</main>
+			<ToastContainer
+				position="bottom-center"
+				autoClose={3000}
+				newestOnTop
+				hideProgressBar
+				closeOnClick
+				pauseOnFocusLoss={false}
+				draggable
+				pauseOnHover
+			/>
 			<Footer />
 		</>
 	);

yarn.lock

@@ -999,7 +999,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.14.6", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.15.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
   integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
@@ -4916,6 +4916,13 @@ gatsby-page-utils@^1.11.0:
     lodash "^4.17.21"
     micromatch "^4.0.2"
 
+gatsby-plugin-layout@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-layout/-/gatsby-plugin-layout-2.12.0.tgz#8564e6b012287f0108fbfadf4e269a581a570a08"
+  integrity sha512-zBj7JTrAC6ro5GJPA2WxFEc+VMa6P62SnbKsj1fOUo8oVgNSV3I2oX9UMGv+S58nquW0NX/pNjIU8wR4IRwYmw==
+  dependencies:
+    "@babel/runtime" "^7.14.8"
+
 gatsby-plugin-manifest@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-3.11.0.tgz#9dfc08f3573636edb7eba904291da9ca482524f4"
@@ -4942,6 +4949,13 @@ gatsby-plugin-page-creator@^3.11.0:
     globby "^11.0.3"
     lodash "^4.17.21"
 
+gatsby-plugin-react-helmet@^4.12.0:
+  version "4.12.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-4.12.0.tgz#85272d332497cf51ef399b48f06b1d4c81f3e42a"
+  integrity sha512-vjVy+tEWGWgyTP7QnJEK2P++ctQ+mWBYGu92fSeHoEFhkxp7G0/v8E92YAPu0cKHEp7cwo4kEXo5++cWqj3QDQ==
+  dependencies:
+    "@babel/runtime" "^7.14.8"
+
 gatsby-plugin-sass@^4.11.0:
   version "4.11.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-sass/-/gatsby-plugin-sass-4.11.0.tgz#a17b952d29364727250e7ea7e97c03249c547121"