158 lines
4.3 KiB
JavaScript
158 lines
4.3 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import "./css/newAppointment.css";
|
|
import Navbar from "./nav";
|
|
import { Redirect } from "react-router";
|
|
import { API } from "../helper/apicall";
|
|
|
|
const NewAppointment = () => {
|
|
const [PatientName, setPatientName] = useState("");
|
|
const [Email, setEmail] = useState("");
|
|
const [PhoneNo, setPhoneNo] = useState("");
|
|
const [Date, setDate] = useState("");
|
|
const [Time, setTime] = useState("");
|
|
const [Age, setAge] = useState("");
|
|
const [Description, setDescription] = useState("");
|
|
const [error, setError] = useState(false);
|
|
const [success, setSuccess] = useState(false);
|
|
const [routeRedirect, setRedirect] = useState("");
|
|
const createItem = (e) => {
|
|
e.preventDefault();
|
|
const item = {
|
|
PatientName: PatientName,
|
|
// DocterName: DocterName,
|
|
Email: Email,
|
|
PhoneNo: PhoneNo,
|
|
Date: Date,
|
|
Time: Time,
|
|
Age: Age,
|
|
Description: Description,
|
|
// Department: Department,
|
|
};
|
|
|
|
const options = {
|
|
method: "post",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(item),
|
|
};
|
|
|
|
if (
|
|
PatientName &&
|
|
// DocterName &&
|
|
Email &&
|
|
PhoneNo &&
|
|
Date &&
|
|
Time &&
|
|
Age &&
|
|
Description
|
|
// Department
|
|
) {
|
|
fetch(API + "/apointments", options).then((res) => {
|
|
console.log(res);
|
|
setRedirect(true);
|
|
});
|
|
} else {
|
|
console.log("The form is not valid to be sent");
|
|
}
|
|
};
|
|
const redirect = routeRedirect;
|
|
if (redirect) {
|
|
return <Redirect to="/" />;
|
|
}
|
|
|
|
const createApppointmentForm = () => (
|
|
<div>
|
|
<Navbar></Navbar>
|
|
<section className="appointment">
|
|
<h1 className="subHeading">Fill The below form for New Appointment</h1>
|
|
<h4 className="note"> * refers to mandatory</h4>
|
|
<form className="form" onSubmit={createItem}>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="PatientName"
|
|
onChange={(e) => setPatientName(e.target.value)}
|
|
placeholder="Your Name*"
|
|
className="formInput"
|
|
required
|
|
/>
|
|
|
|
{/* <input
|
|
type="text"
|
|
id="name"
|
|
placeholder="Doctor Name*"
|
|
className="formInput"
|
|
name="DocterName"
|
|
onChange={(e) => setDocterName(e.target.value)}
|
|
value={DocterName}
|
|
required
|
|
/> */}
|
|
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
placeholder="Your Email(optional)"
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="formInput"
|
|
name="Email"
|
|
/>
|
|
<input
|
|
type="phone"
|
|
id="phone"
|
|
name="PhoneNo"
|
|
placeholder="Your Phone*"
|
|
className="formInput"
|
|
onChange={(e) => setPhoneNo(e.target.value)}
|
|
value={PhoneNo}
|
|
required
|
|
/>
|
|
|
|
<input
|
|
type="date"
|
|
id="date"
|
|
className="formInput datetime"
|
|
onChange={(e) => setDate(e.target.value)}
|
|
name="Date"
|
|
required
|
|
/>
|
|
|
|
<input
|
|
type="time"
|
|
id="time"
|
|
className="formInput datetime"
|
|
onChange={(e) => setTime(e.target.value)}
|
|
name="Time"
|
|
required
|
|
/>
|
|
<input
|
|
type="number"
|
|
className="formInput datetime"
|
|
placeholder="Age"
|
|
onChange={(e) => setAge(e.target.value)}
|
|
name="Age"
|
|
required
|
|
/>
|
|
<textarea
|
|
type="text"
|
|
className="formInput datetime"
|
|
placeholder="Elaborate your problem"
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
name="Description"
|
|
required
|
|
/>
|
|
<button className="btn-submit btn-dark">Submit</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="row bg-dark text-white rounded">
|
|
<div className="col-md-8 offset-md-2">{createApppointmentForm()}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NewAppointment;
|