contactForm: vérification de la présence des données

src/components/contactForm/index.jsx

@@ -4,12 +4,15 @@ import React, { useState } from "react";
 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("");
 	const [email, setEmail] = useState("");
 	const [message, setMessage] = useState("");
 
+	// const notify = (msg) => toast(msg);
+
 	const handleNameChange = (e) => {
 		setName(e.target.value);
 	};
@@ -23,6 +26,10 @@ const ContactForm = () => {
 	};
 
 	const sendEmail = (data) => {
+		console.log("Log name " + data.from_name);
+		console.log("Log email " + data.from_email);
+		console.log("Log message " + data.from_message);
+
 		emailjs
 			.send(
 				process.env.SERVICE_ID,
@@ -31,11 +38,13 @@ const ContactForm = () => {
 				process.env.USER_ID
 			)
 			.then(
-				(result) => {
-					return true;
+				() => {
+					alert("Message envoyé");
 				},
-				(error) => {
-					return false;
+				() => {
+					alert(
+						"Votre message n'a pas pu être envoyé. Merci de nous contacter directement par mail."
+					);
 				}
 			);
 	};
@@ -43,17 +52,23 @@ const ContactForm = () => {
 	const handleSubmit = (e) => {
 		e.preventDefault();
 
-		const data = {
-			from_name: name,
-			from_email: email,
-			from_message: message
-		};
+		if (name === "" || email === "" || message === "") {
+			alert("Veuillez remplir tous les champs.");
+			return;
+		} else {
+			const data = {
+				from_name: name,
+				from_email: email,
+				from_message: message
+			};
 
-		if (sendEmail) e.target.reset();
+			sendEmail(data);
+			e.target.reset();
+		}
 	};
 
 	return (
-		<div id="contact">
+		<div id="contact-form-container">
 			<form id="contact-form" action="" onSubmit={handleSubmit}>
 				<div className="form-group">
 					<img

src/components/contactForm/index.scss

@@ -1,12 +1,11 @@
-#contact {
+#contact-form-container {
 	border-radius: 10px;
 	background-color: #fff;
-	margin: 0 auto;
 	padding: 10px;
-	width: auto;
+	width: 40rem;
 
 	#contact-form {
-		width: 100%;
+		width: 80vw, 40rem;
 		display: flex;
 		flex-direction: column;
 		margin: 1rem;

src/components/realisationCard/index.jsx

@@ -5,7 +5,7 @@ import Specs from "../../images/undraw_Specs.svg";
 
 const RealisationCard = ({ cardName, cardDescription, techTag }) => {
 	const displayTags = techTag.split(",").map((tag) => (
-		<span key={tag.id} className="tech-tag">
+		<span key={tag} className="tech-tag">
 			{tag}
 		</span>
 	));

src/pages/nous-contacter.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+// import ToastContainer from "react-toastify";
 
 import Header from "../components/header";
 import ContactForm from "../components/contactForm";
@@ -30,6 +31,7 @@ const NousContacter = () => {
 				</div>
 				<ContactForm />
 			</div>
+			{/* <ToastContainer /> */}
 			<Footer />
 		</main>
 	);

src/scss/index.scss

@@ -118,7 +118,7 @@ section.services-list {
 .page-contact {
 	display: flex;
 	flex-wrap: wrap-reverse;
-
+	justify-content: center;
 	.contact-instructions {
 		margin: 1rem;
 

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.14.8", "@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.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,13 +4916,6 @@ 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"