135 lines
3.4 KiB
JavaScript
135 lines
3.4 KiB
JavaScript
import React, {useEffect, useState} from 'react'
|
|
import {useParams, useNavigate} from 'react-router-dom'
|
|
import {Loader} from '../Loader/Loader'
|
|
import PhoneInput from 'react-phone-input-2'
|
|
import 'react-phone-input-2/lib/style.css'
|
|
import './form.scss'
|
|
|
|
import {apiRequest} from "../../api/request";
|
|
|
|
import Swal from 'sweetalert2'
|
|
import withReactContent from 'sweetalert2-react-content'
|
|
|
|
const SweetAlert = withReactContent(Swal);
|
|
|
|
const Form = () => {
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const urlParams = useParams();
|
|
|
|
const [status, setStatus] = useState(null);
|
|
const [data, setData] = useState({
|
|
email: '',
|
|
phone: '',
|
|
comment: ''
|
|
});
|
|
const [isFetching, setIsFetching] = useState(false);
|
|
|
|
const handleModal = (status) => {
|
|
SweetAlert.fire({
|
|
text: status !== 200 || 201
|
|
? 'Какие-то неполадки =('
|
|
: 'Форма отправлена',
|
|
preConfirm: () =>
|
|
status !== 200 || 201 ? () => {
|
|
setStatus(null)
|
|
} : () => {
|
|
setStatus(null);
|
|
navigate(`/candidate/${urlParams.id}`)
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (status) {
|
|
handleModal(status)
|
|
}
|
|
}, [status]);
|
|
|
|
const handleChange = (e) => {
|
|
const {id, value} = e.target;
|
|
|
|
setData((prev) => ({
|
|
...prev,
|
|
[id]: value
|
|
}))
|
|
};
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
setIsFetching(true);
|
|
const formData = new FormData();
|
|
formData.append('profile_id', urlParams.id);
|
|
formData.append('Email', data.email);
|
|
formData.append('phone', data.phone);
|
|
formData.append('comment', data.comment);
|
|
|
|
apiRequest('/interview-request/create-interview-request', {
|
|
method: 'POST',
|
|
params: {
|
|
profile_id: urlParams.id,
|
|
...data
|
|
}
|
|
}).then((res) => {
|
|
setStatus(res);
|
|
setIsFetching(false)
|
|
}
|
|
)
|
|
};
|
|
|
|
return (
|
|
<div className='row'>
|
|
<div className='col-sm-12'>
|
|
<form className='form' id='test'>
|
|
<label htmlFor='email'>Емейл:</label>
|
|
<input
|
|
onChange={handleChange}
|
|
id='email'
|
|
name='Email'
|
|
type='email'
|
|
placeholder='Емейл'
|
|
value={data.email}
|
|
/>
|
|
|
|
<label htmlFor='phone'>Номер телефона:</label>
|
|
<PhoneInput
|
|
id='phone'
|
|
name='Phone'
|
|
country={'ru'}
|
|
value={data.phone}
|
|
onChange={(e) =>
|
|
handleChange({target: {value: e, id: 'phone'}})
|
|
}
|
|
/>
|
|
{/* <input
|
|
onChange={handleChange}
|
|
id="phone"
|
|
type="text"
|
|
name="Phone"
|
|
placeholder="Телефон"
|
|
value={data.phone}
|
|
/> */}
|
|
|
|
<textarea
|
|
onChange={handleChange}
|
|
id='comment'
|
|
rows='5'
|
|
cols='40'
|
|
name='Comment'
|
|
placeholder='Оставьте комментарий'
|
|
value={data.comment}
|
|
></textarea>
|
|
|
|
<button onClick={handleSubmit} className='form__btn' type='submit'>
|
|
{isFetching ? <Loader/> : 'Отправить'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export default Form
|