emailJs config with formik not functioning - reverted to using useRef…

…, no formik - will fix in future
dmostoller · Mar 8, 2024 · ab6b70c · ab6b70c
1 parent 6a6d998
commit ab6b70c
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -30,4 +30,5 @@ I plan to add a few features and then deploy the site, those include:
 - Add PATCH routes for all resources so everything can be updated (except comments)
 - Fix the error handling of the login/signup forms so that bad entries dont break things (nonexistent user or a non-unique choice of username for example)
 - Possibly allow the Admin to be able to delete comments from any user
-- Dark Mode or just a darker theme
+- Dark Mode or just a darker theme
+- Integrate Formik validation with EmailJS
diff --git a/client/src/components/ContactForm copy.js b/client/src/components/ContactForm copy.js
@@ -0,0 +1,71 @@
+// import React, { useRef } from 'react';
+// import emailjs from '@emailjs/browser';
+// import { useNavigate } from 'react-router-dom';
+// import { useFormik } from "formik";
+// import * as yup from "yup";
+
+// const ContactForm = () => {
+//   const form = useRef();
+//   const navigate = useNavigate();
+
+//   const formSchema = yup.object().shape({
+//     from_name: yup.string().required("Name is required"),
+//     reply_to: yup.string().email().required("Email address is required"),
+//     massage: yup.string().required("Message is required"),
+//   })
+
+//   const formik = useFormik({
+//     initialValues: {
+//       from_name:'',
+//       reply_to:'',
+//       message:'',
+//     },
+//     validationSchema: formSchema,
+//     onSubmit: (values) => {
+//     emailjs.send('service_jz3d31c', 'template_avspnq3', values, '2CBV5usGCJRMr4WbB')
+//     .then((result) => {
+//         alert("Your Message Has Been Sent")
+//         navigate("/")
+//     }, (error) => {
+//         alert("Your Message Cannot Be Sent")
+//     });
+//     },
+//   })
+
+
+
+ return (
+   <form className='ui form' ref={form} onSubmit={formik.onSubmit}>
+     <div className='field'>
+        <label>Name</label>
+        <input type="text" name="from_name" />
+     </div>
+     <div className='field'>
+        <label>Email</label>
+        <input type="text" name="reply_to" />
+     </div>   
+     <div className='field'>
+        <label>Message</label>
+        <textarea rows="6" type="text" name="message" />
+     </div>
+     <button className="ui button teal" type="submit">Submit</button>
+   </form>
+ );
+};
+
+export default ContactForm;
+
+
+
+// const sendEmail = (e) => {
+//   e.preventDefault();
+//   if(window.confirm("Are you sure you want to send this email?")){ 
+//   emailjs.sendForm('service_jz3d31c', 'template_avspnq3', form.current, '2CBV5usGCJRMr4WbB')
+//     .then((result) => {
+//         alert("Your Message Has Been Sent")
+//         navigate("/")
+//     }, (error) => {
+//         alert("Your Message Cannot Be Sent")
+//     });
+//   };
+// };
diff --git a/client/src/components/ContactForm.js b/client/src/components/ContactForm.js
@@ -1,41 +1,26 @@
 import React, { useRef } from 'react';
 import emailjs from '@emailjs/browser';
 import { useNavigate } from 'react-router-dom';
-import { useFormik } from "formik";
-import * as yup from "yup";
 
 const ContactForm = () => {
-  const form = useRef();
-  const navigate = useNavigate();
-
-  const formSchema = yup.object().shape({
-    from_name: yup.string().required("Name is required"),
-    reply_to: yup.string().email().required("Email address is required"),
-    massage: yup.string().required("Message is required"),
-  })
-
-  const formik = useFormik({
-    initialValues: {
-      from_name:'',
-      reply_to:'',
-      message:'',
-    },
-    validationSchema: formSchema,
-    onSubmit: (values) => {
-    emailjs.send('service_jz3d31c', 'template_avspnq3', values, '2CBV5usGCJRMr4WbB')
-    .then((result) => {
-        alert("Your Message Has Been Sent")
-        navigate("/")
-    }, (error) => {
-        alert("Your Message Cannot Be Sent")
-    });
-    },
-  })
-
-
+ const form = useRef();
+ const navigate = useNavigate();
+
+ const sendEmail = (e) => {
+   e.preventDefault();
+   if(window.confirm("Are you sure you want to send this email?")){ 
+   emailjs.sendForm('service_jz3d31c', 'template_avspnq3', form.current, '2CBV5usGCJRMr4WbB')
+     .then((result) => {
+         alert("Your Message Has Been Sent")
+         navigate("/")
+     }, (error) => {
+         alert("Your Message Cannot Be Sent")
+     });
+   };
+ };
 
  return (
-   <form className='ui form' ref={form} onSubmit={formik.onSubmit}>
+   <form className='ui form' ref={form} onSubmit={sendEmail}>
      <div className='field'>
         <label>Name</label>
         <input type="text" name="from_name" />
@@ -46,26 +31,11 @@ const ContactForm = () => {
      </div>   
      <div className='field'>
         <label>Message</label>
-        <textarea rows="6" type="text" name="message" />
+        <textarea type="text" name="message" />
      </div>
      <button className="ui button teal" type="submit">Submit</button>
    </form>
  );
 };
 
-export default ContactForm;
-
-
-
-// const sendEmail = (e) => {
-//   e.preventDefault();
-//   if(window.confirm("Are you sure you want to send this email?")){ 
-//   emailjs.sendForm('service_jz3d31c', 'template_avspnq3', form.current, '2CBV5usGCJRMr4WbB')
-//     .then((result) => {
-//         alert("Your Message Has Been Sent")
-//         navigate("/")
-//     }, (error) => {
-//         alert("Your Message Cannot Be Sent")
-//     });
-//   };
-// };
+export default ContactForm;