first commit
This commit is contained in:
Executable
+181
@@ -0,0 +1,181 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import axios from 'axios';
|
||||
import Swal from 'sweetalert2'
|
||||
import withReactContent from 'sweetalert2-react-content'
|
||||
const MySwal = withReactContent(Swal)
|
||||
import baseUrl from '../../utils/baseUrl';
|
||||
|
||||
const alertContent = () => {
|
||||
MySwal.fire({
|
||||
title: 'Congratulations!',
|
||||
text: 'Your message was successfully send and will back to you soon',
|
||||
icon: 'success',
|
||||
timer: 2000,
|
||||
timerProgressBar: true,
|
||||
showConfirmButton: false,
|
||||
})
|
||||
}
|
||||
|
||||
// Form initial state
|
||||
const INITIAL_STATE = {
|
||||
name: "",
|
||||
email: "",
|
||||
number: "",
|
||||
subject: "",
|
||||
text: ""
|
||||
};
|
||||
|
||||
const ContactForm = () => {
|
||||
|
||||
const [contact, setContact] = useState(INITIAL_STATE);
|
||||
const { register, handleSubmit, errors } = useForm();
|
||||
|
||||
const handleChange = e => {
|
||||
const { name, value } = e.target;
|
||||
setContact(prevState => ({ ...prevState, [name]: value }));
|
||||
console.log(contact)
|
||||
}
|
||||
|
||||
const onSubmit = async e => {
|
||||
// e.preventDefault();
|
||||
try {
|
||||
const url = `${baseUrl}/api/contact`;
|
||||
const { name, email, number, subject, text } = contact;
|
||||
const payload = { name, email, number, subject, text };
|
||||
await axios.post(url, payload);
|
||||
console.log(url);
|
||||
setContact(INITIAL_STATE);
|
||||
alertContent();
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="drop-area">
|
||||
<div className="container-fluid">
|
||||
<div className="row">
|
||||
<div className="col-lg-7 p-0">
|
||||
<div className="drop-item drop-img">
|
||||
<div className="drop-left">
|
||||
<h2>Drop your message for any info or question</h2>
|
||||
|
||||
<form id="contactForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="row">
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
placeholder="Your Name"
|
||||
className="form-control"
|
||||
value={contact.name}
|
||||
onChange={handleChange}
|
||||
ref={register({ required: true })}
|
||||
/>
|
||||
<div className='invalid-feedback' style={{display: 'block'}}>
|
||||
{errors.name && 'Name is required.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="Your email"
|
||||
className="form-control"
|
||||
value={contact.email}
|
||||
onChange={handleChange}
|
||||
ref={register({ required: true, pattern: /^\S+@\S+$/i })}
|
||||
/>
|
||||
<div className='invalid-feedback' style={{display: 'block'}}>
|
||||
{errors.email && 'Email is required.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
name="number"
|
||||
placeholder="Your phone number"
|
||||
className="form-control"
|
||||
value={contact.number}
|
||||
onChange={handleChange}
|
||||
ref={register({ required: true })}
|
||||
/>
|
||||
<div className='invalid-feedback' style={{display: 'block'}}>
|
||||
{errors.number && 'Number is required.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-6 col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
name="subject"
|
||||
placeholder="Your Subject"
|
||||
className="form-control"
|
||||
value={contact.subject}
|
||||
onChange={handleChange}
|
||||
ref={register({ required: true })}
|
||||
/>
|
||||
<div className='invalid-feedback' style={{display: 'block'}}>
|
||||
{errors.subject && 'Subject is required.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-12 col-md-12">
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
name="text"
|
||||
cols="30"
|
||||
rows="5"
|
||||
placeholder="Write your message..."
|
||||
className="form-control"
|
||||
value={contact.text}
|
||||
onChange={handleChange}
|
||||
ref={register({ required: true })}
|
||||
/>
|
||||
<div className='invalid-feedback' style={{display: 'block'}}>
|
||||
{errors.text && 'Text body is required.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-12 col-sm-12">
|
||||
<button type="submit" className="drop-btn">Send Message</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-lg-5 p-0">
|
||||
<div className="speciality-item speciality-right speciality-right-two speciality-right-three">
|
||||
<img src="/images/about4.jpg" alt="Contact" />
|
||||
|
||||
<div className="speciality-emergency">
|
||||
<div className="speciality-icon">
|
||||
<i className="icofont-ui-call"></i>
|
||||
</div>
|
||||
|
||||
<h3>Emergency Call</h3>
|
||||
<p>+07 554 332 322</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactForm;
|
||||
Executable
+39
@@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
|
||||
const ContactInfo = () => {
|
||||
return (
|
||||
<div className="location-area pt-100 pb-70">
|
||||
<div className="container">
|
||||
<div className="row justify-content-center location-wrap">
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="location-item">
|
||||
<i className="icofont-location-pin"></i>
|
||||
<h3>Location</h3>
|
||||
<p>2108-267 Road Quadra, Toronto, <br /> Victiria Canada</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="location-item">
|
||||
<i className="icofont-ui-message"></i>
|
||||
<h3>Email</h3>
|
||||
<p>hello@disin.com</p>
|
||||
<p>emailexample@name.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-6 col-lg-4">
|
||||
<div className="location-item">
|
||||
<i className="icofont-ui-call"></i>
|
||||
<h3>Phone</h3>
|
||||
<p>+07 5554 3332 322</p>
|
||||
<p>+07 5554 3332 322</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContactInfo;
|
||||
Executable
+11
@@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
const GoogleMap = () => {
|
||||
return (
|
||||
<div className="map-area">
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2646.8288827683186!2d-123.36207488437536!3d48.44062387924871!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x548f73811b3b8513%3A0x968aa5572a89f353!2s210-2750%20Quadra%20St%2C%20Victoria%2C%20BC%20V8T%204E8%2C%20Canada!5e0!3m2!1sen!2sbd!4v1607418551666!5m2!1sen!2sbd" height="550"></iframe>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GoogleMap;
|
||||
Reference in New Issue
Block a user