99 lines
2.7 KiB
React
99 lines
2.7 KiB
React
import React, { useState } from "react";
|
|
|
|
/*
|
|
* Contact page or "slide". The contact form functionality is enabled by a NodeJS server,
|
|
* see /server.js. A basic form for getting contact information. Emails are sent to me@joshashton.dev
|
|
* from contact@joshashton.dev.
|
|
*
|
|
* TODO: Handle blank and spam inputs.
|
|
*
|
|
* Managed by /App.jsx.
|
|
* Interacts with /server.js.
|
|
*/
|
|
const Contact = () => {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
emailAddress: "",
|
|
message: "",
|
|
});
|
|
|
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
|
|
// Update form data to always be up to date with the entries on the form.
|
|
const handleChange = (event) => {
|
|
setFormData({
|
|
...formData,
|
|
[event.target.name]: event.target.value,
|
|
});
|
|
};
|
|
|
|
// Transmit data to the server's API for sending email.
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault(); // Prevent default form submission behavior
|
|
setIsSubmitted(true);
|
|
|
|
try {
|
|
const response = await fetch("http://localhost:3001/api/send-email", {
|
|
method: "POST", // Use POST for sending data
|
|
headers: { "Content-Type": "application/json" }, // Set the content type
|
|
body: JSON.stringify(formData), // Convert the JS object to JSON string
|
|
});
|
|
const json = await response.json();
|
|
setData(json);
|
|
} catch (error) {
|
|
console.error("Error fetching data:", error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div id="contact-section">
|
|
<h1>Contact Me</h1>
|
|
<div id="form-container"></div>
|
|
{isSubmitted ? (
|
|
<p>Thanks for reaching out! I'll get in touch shortly.</p>
|
|
) : (
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="row">
|
|
<input
|
|
className="shadow"
|
|
placeholder="Name"
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
/>
|
|
<input
|
|
className="shadow"
|
|
placeholder="example@email.com"
|
|
type="email"
|
|
id="emailAddress"
|
|
name="emailAddress"
|
|
value={formData.emailAddress}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div className="row">
|
|
<textarea
|
|
className="shadow"
|
|
placeholder="Message"
|
|
id="message"
|
|
name="message"
|
|
value={formData.message}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
|
|
<div className="row">
|
|
<button type="submit" className="button shadow">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Contact;
|