send request done

This commit is contained in:
print-signs 2023-11-24 15:48:42 +05:30
parent e7f4eec7d9
commit 28a12730fc

View File

@ -1,111 +1,78 @@
import React, { useEffect, useState } from "react";
import Button from "@material-ui/core/Button";
import { Link, useNavigate } from "react-router-dom";
import swal from "sweetalert";
import axios from "axios";
import { isAutheticated } from "src/auth";
import React, { useEffect, useState } from 'react'
import Button from '@material-ui/core/Button'
import { Link, useNavigate } from 'react-router-dom'
import swal from 'sweetalert'
import axios from 'axios'
import { isAutheticated } from 'src/auth'
// import { WebsiteURL } from '../WebsiteURL' // import { WebsiteURL } from '../WebsiteURL'
const AddContactRequest = () => { const AddContactRequest = () => {
const token = isAutheticated() const token = isAutheticated();
const navigate = useNavigate() const navigate = useNavigate();
const [data, setData] = useState({ const [data, setData] = useState({
name: "",
EmailOrMobile: "",
message: "",
});
name: '', const [loading, setLoading] = useState(false);
EmailOrMobile: '',
message: '',
})
const [loading, setLoading] = useState(false)
const handleChange = (e) => { const handleChange = (e) => {
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
};
setData((prev) => ({ ...prev, [e.target.id]: e.target.value }))
}
const handleSubmit = () => { const handleSubmit = () => {
if ( if (
data.name.trim() === '' || data.name.trim() === "" ||
data.EmailOrMobile.trim() === '' || data.EmailOrMobile.trim() === "" ||
data.message.trim() === ""
data.message.trim() === ''
) { ) {
swal({ swal({
title: 'Warning', title: "Warning",
text: 'Fill all mandatory fields', text: "Fill all mandatory fields",
icon: 'error', icon: "error",
button: 'Close', button: "Close",
dangerMode: true, dangerMode: true,
}) });
return return;
} }
setLoading(true) setLoading(true);
const formData = new FormData() const formData = new FormData();
formData.set('name', data.name) formData.set("name", data.name);
formData.set('EmailOrMobile', data.EmailOrMobile) formData.set("EmailOrMobile", data.EmailOrMobile);
formData.set('message', data.message)
formData.set("message", data.message);
axios axios
.post(`/api/contact/request/new/`, formData, { .post(`/api/contact/request/new/`, formData, {
headers: { headers: {
Authorization: `Bearer ${token}`, Authorization: `Bearer ${token}`,
'Content-Type': 'multipart/formdata', "Content-Type": "multipart/formdata",
'Access-Control-Allow-Origin': '*', "Access-Control-Allow-Origin": "*",
}, },
}) })
.then((res) => { .then((res) => {
swal({ swal({
title: 'Added', title: "Added",
text: 'Contact Requests added successfully!', text: "Contact Requests added successfully!",
icon: 'success', icon: "success",
button: 'ok', button: "ok",
}) });
setLoading(false) setLoading(false);
navigate('/contact/request', { replace: true }) navigate("/contact/request", { replace: true });
}) })
.catch((err) => { .catch((err) => {
setLoading(false) setLoading(false);
const message = err.response?.data?.message || 'Something went wrong!' const message = err.response?.data?.message || "Something went wrong!";
swal({ swal({
title: 'Warning', title: "Warning",
text: message, text: message,
icon: 'error', icon: "error",
button: 'Retry', button: "Retry",
dangerMode: true, dangerMode: true,
}) });
}) });
} };
return ( return (
<div className="container"> <div className="container">
@ -119,10 +86,10 @@ const AddContactRequest = () => {
justify-content-between justify-content-between
" "
> >
<div style={{ fontSize: '22px' }} className="fw-bold"> <div style={{ fontSize: "22px" }} className="fw-bold">
New Contact Request New Contact Request
</div> </div>
<div style={{ display: 'flex', gap: '1rem' }}> <div style={{ display: "flex", gap: "1rem" }}>
<h4 className="mb-0"></h4> <h4 className="mb-0"></h4>
</div> </div>
@ -131,24 +98,24 @@ const AddContactRequest = () => {
variant="contained" variant="contained"
color="primary" color="primary"
style={{ style={{
fontWeight: 'bold', fontWeight: "bold",
marginBottom: '1rem', marginBottom: "1rem",
textTransform: 'capitalize', textTransform: "capitalize",
marginRight: '5px', marginRight: "5px",
}} }}
onClick={() => handleSubmit()} onClick={() => handleSubmit()}
disabled={loading} disabled={loading}
> >
{loading ? 'Loading' : 'Save'} {loading ? "Loading" : "Save"}
</Button> </Button>
<Link to="/contact/request"> <Link to="/contact/request">
<Button <Button
variant="contained" variant="contained"
color="secondary" color="secondary"
style={{ style={{
fontWeight: 'bold', fontWeight: "bold",
marginBottom: '1rem', marginBottom: "1rem",
textTransform: 'capitalize', textTransform: "capitalize",
}} }}
> >
Back Back
@ -174,11 +141,16 @@ const AddContactRequest = () => {
maxLength={25} maxLength={25}
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
/> />
{data.name ? <><small className="charLeft mt-4 fst-italic"> {data.name ? (
<>
<small className="charLeft mt-4 fst-italic">
{25 - data.name.length} characters left {25 - data.name.length} characters left
</small></> : <></> </small>
</>
} </div> ) : (
<></>
)}{" "}
</div>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
Email/Mobile * Email/Mobile *
@ -191,11 +163,16 @@ const AddContactRequest = () => {
maxLength={25} maxLength={25}
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
/> />
{data.EmailOrMobile ? <><small className="charLeft mt-4 fst-italic"> {data.EmailOrMobile ? (
<>
<small className="charLeft mt-4 fst-italic">
{25 - data.EmailOrMobile.length} characters left {25 - data.EmailOrMobile.length} characters left
</small></> : <></> </small>
</>
} </div> ) : (
<></>
)}{" "}
</div>
<div className="mb-3"> <div className="mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
@ -208,19 +185,22 @@ const AddContactRequest = () => {
rows="10" rows="10"
cols="100" cols="100"
value={data.message} value={data.message}
placeholder='your message...' placeholder="your message..."
maxLength="500" maxLength="500"
onChange={(e) => handleChange(e)} onChange={(e) => handleChange(e)}
> ></textarea>
</textarea>
{data.message ? <><small className="charLeft mt-4 fst-italic"> {data.message ? (
<>
<small className="charLeft mt-4 fst-italic">
{500 - data.message.length} characters left {500 - data.message.length} characters left
</small></> : <></> </small>
} </>
) : (
<></>
)}
</div> </div>
{/* <div className="mb-3"> {/* <div className="mb-3">
<label htmlFor="title" className="form-label"> <label htmlFor="title" className="form-label">
message * message *
@ -233,10 +213,9 @@ const AddContactRequest = () => {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
) );
} };
export default AddContactRequest export default AddContactRequest;