In this application, do the following :
- Create a signup page to register the user.
- Create a sign-in page to login to the application if the credentials are correct.
- Create components to Register, Edit, and View patient details.
- Create components to Book, Edit, and View the appointments.
- Create a Navbar.
Signup Form
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import DatePicker from "react-datepicker";
import { adminDetailsData } from "./data.js";
import "../App.css";
class SignUpForm extends Component {
constructor(props) {
super(props);
this.state = {
uname: "",
email: "",
password: "",
dob: "",
mobileno: "",
location: "",
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
let target = e.target;
let value = target.type === "checkbox" ? target.checked : target.value;
let name = target.name;
this.setState({
[name]: value,
});
}
handleSubmit(e) {
e.preventDefault();
if (this.canBeSubmitted()) {
adminDetailsData.add(
this.state.uname,
this.state.email,
this.state.password,
this.state.dob,
this.state.mobileno,
this.state.location
);
this.setState({ name: e.target.value });
this.props.history.push("/sign-in");
}
}
canBeSubmitted() {
const { uname, email, password, dob, mobileno, location } = this.state;
return (
uname.length > 4 &&
email.length > 4 &&
password.length > 4 &&
dob.length > 4 &&
mobileno.length > 4 &&
location.length > 4
);
}
render() {
return (
<div>
<div>
<h3 style={{ textAlign: "center", paddingBottom: "10px" }}>
Digital Medical Record Database
</h3>
</div>
<div className="FormCenter">
<div className="FormTitle">
<NavLink to="/sign-in" className="FormTitle__Link">
Login
</NavLink>{" "}
or
<NavLink exact to="/" className="FormTitle__Link">
Register
</NavLink>
</div>
<form onSubmit={this.handleSubmit} className="FormFields">
{/*Write code here to create uname, email, dob, location, mobileno labels and inputs */}
<div className="FormField">
<label className="FormField__Label" htmlFor="uname">
Username
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="uname"
id="uname"
className="FormField__Input"
placeholder="Enter your username"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="email">
E-mail ID
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="email"
id="email"
className="FormField__Input"
placeholder="Enter your email"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="password"
>
Password
</label>
<input
type="password"
onChange={(e) => this.handleChange(e)}
name="password"
id="password"
className="FormField__Input"
placeholder="Enter your password"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="dob">
Date of Birth
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="dob"
id="dob"
className="FormField__Input"
placeholder="Enter your date of birth"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="mobileno"
>
Mobile No
</label>
<input
type="number"
onChange={(e) => this.handleChange(e)}
name="mobileno"
id="mobileno"
className="FormField__Input"
placeholder="Enter your mobile number"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="location"
>
Location
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="location"
id="location"
className="FormField__Input"
placeholder="Enter your mobile number"
/>
</div>
<div className="FormField">
{/* Write code here to create Register Button */}
<button type="submit" className="FormField__Button">
Register
</button>
</div>
</form>
</div>
</div>
);
}
}
export default SignUpForm;Signin Form
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { adminDetailsData } from "./data.js";
import "../App.css";
import { Input } from "reactstrap";
class SignInForm extends Component {
constructor() {
super();
this.state = {
email: "",
password: "",
adminDetails: adminDetailsData.getData(),
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
let target = e.target;
let value = target.type === "checkbox" ? target.checked : target.value;
let name = target.name;
this.setState({
[name]: value,
});
}
handleSubmit(e) {
e.preventDefault();
e.stopPropagation();
const { adminDetails } = this.state;
let validCredentials = false;
if (this.canBeSubmitted()) {
adminDetails.map((admin) => {
if (
this.state.email === admin.email &&
this.state.password === admin.password
) {
let currentUser = admin.adminId;
validCredentials = true;
adminDetailsData.setCurrentUser(admin.adminId);
this.props.history.push("/allpatients");
return;
}
});
if (!validCredentials) {
alert("please enter valid credentials");
this.props.history.push("/sign-in");
}
}
}
canBeSubmitted() {
const { email, password, adminDetails } = this.state;
return email.length > 0 && password.length > 0;
}
render() {
const isEnabled = this.canBeSubmitted();
return (
<div>
<div>
<h3 style={{ textAlign: "center", paddingBottom: "10px" }}>
Digital Medical Record Database
</h3>
</div>
<div className="FormCenter">
<div className="FormTitle">
<NavLink to="/sign-in" className="FormTitle__Link">
Login
</NavLink>{" "}
or
<NavLink exact to="/" className="FormTitle__Link">
Register
</NavLink>
</div>
<form onSubmit={this.handleSubmit} className="FormFields">
{/*Write code here to create labels and fields for username and password */}
<div className="FormField">
<label className="FormField__Label" htmlFor="email">
E-Mail Address
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="email"
id="email"
className="FormField__Input"
placeholder="Enter your email"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="password"
>
Password
</label>
<input
type="password"
onChange={(e) => this.handleChange(e)}
name="password"
id="password"
className="FormField__Input"
placeholder="Enter your password"
/>
</div>
{/* Write code here to create a login button */}
<div className="FormField">
<button type="submit" className="FormField__Button">
Login
</button>
</div>
</form>
</div>
</div>
);
}
}
export default SignInForm;NavBar.jsx
import React, { useState } from "react";
import Medilogo from "../images/Medi-Logo.png";
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
// NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "reactstrap";
import { Link } from "react-router-dom";
import { NavLink } from "react-router-dom";
const Example = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<React.Fragment>
{/*should have a Navbar brand, toggler and the NavItem (logout) should be linked to sign-in page */}
<Navbar color="light" light expand="md">
<NavbarBrand href="/">DWRD</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse className="ml-auto" isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink className="nav-link" to="/addPatient">
Add Patient
</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/allPatients">
All Patients
</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/bookAppointment">
Book Appointment
</NavLink>
</NavItem>
<NavItem>
<NavLink className="nav-link" to="/allAppointments">
All Appointments
</NavLink>
</NavItem>
<UncontrolledDropdown>
<DropdownToggle caret nav>
User
</DropdownToggle>
<DropdownMenu className="DropDowns">
<DropdownItem className="dropdDownItem">
<NavLink to="/viewProfile">
View Profile
</NavLink>
</DropdownItem>
<DropdownItem className="dropdDownItem">
<NavLink to="/">Logout</NavLink>
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
</Collapse>
</Navbar>
</React.Fragment>
);
};
export default Example;AddPatient.jsx
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import NavBar from "./NavBar.jsx";
import "../App.css";
import { patientDetailsData } from "./data.js";
class AddPatient extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
dob: "",
location: "",
mobile: "",
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCancel = this.handleCancel.bind(this);
}
handleChange(e) {
let target = e.target;
let value = target.type === "checkbox" ? target.checked : target.value;
let name = target.name;
this.setState({
[name]: value,
});
}
handleSubmit(e) {
if (this.canBeSubmitted()) {
alert("Patient Added successfully");
patientDetailsData.add(
this.state.name,
this.state.email,
this.state.dob,
this.state.location,
this.state.mobile
);
this.props.history.push("/allPatients");
}
}
handleCancel(e) {
e.preventDefault();
this.props.history.push("/allPatients");
}
canBeSubmitted() {
const { name, email, dob, location, mobile } = this.state;
return (
name.length > 0 &&
email.length > 0 &&
dob.length > 0 &&
location.length > 0 &&
mobile.length > 0
);
}
render() {
const isEnabled = this.canBeSubmitted();
const name = this.state.name;
const date = new Date();
return (
<div>
<NavBar />
<div>
<p
style={{
textAlign: "center",
paddingBottom: "10px",
paddingTop: "30px",
fontSize: "2em",
}}
>
Adding a Patient
</p>
</div>
{/* Write code here to create fields and input labels for name,email,dob,mobileno and location */}
<div className="FormCenter">
<form onSubmit={this.handleSubmit} className="FormFields">
<div></div>
<div className="FormField">
<label
className="FormField__ViewLabel"
htmlFor="name"
>
Name
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="name"
id="name"
className="FormField__Input"
placeholder="Enter your name"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="email">
E-mail ID
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="email"
id="email"
className="FormField__Input"
placeholder="Enter your email"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="dob">
Date of Birth
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="dob"
id="dob"
className="FormField__Input"
placeholder="Enter your date of birth"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="location"
>
Location
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="location"
id="location"
className="FormField__Input"
placeholder="Enter your mobile number"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="mobile"
>
Mobile
</label>
<input
type="number"
onChange={(e) => this.handleChange(e)}
name="mobile"
id="mobile"
className="FormField__Input"
placeholder="Enter your mobile number"
/>
</div>
<div
className="FormField"
style={{
display: "flex",
justifyContent: "center",
gap: "40px",
}}
>
<button type="submit" className="FormField__Button">
Register
</button>
<button
type="button"
onClick={() => {
this.props.history.push(`/allPatients`);
}}
className="FormField__Button"
>
Cancel
</button>
</div>
</form>
</div>
</div>
);
}
}
export default AddPatient;All Patients.jsx
import React, { Component } from "react";
import NavBar from "./NavBar.jsx";
import "../App.css";
import { patientDetailsData } from "./data.js";
import { ListGroup, ListGroupItem } from "reactstrap";
class AllPatients extends Component {
constructor(props) {
super(props);
this.state = {
//Write function to get the data of patients with the name as appointmentsList:
patientsList: patientDetailsData.getData(),
};
this.handleView = this.handleView.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
handleView(id) {
this.props.history.push(`/viewPatient/${id}`);
}
handleEdit(id) {
this.props.history.push(`/editPatient/${id}`);
}
handleDelete(e) {
patientDetailsData.deletePatient(e);
this.setState({
patientsList: patientDetailsData.getData(),
});
}
render() {
const { patientsList } = this.state;
const patientItems = patientsList.map((e, i) => (
<ListGroupItem key={i}>
{e.name}
<button
className="FormField__all__Button"
onClick={() => {
this.handleEdit(i);
}}
>
Edit
</button>
<button
className="FormField__all__Button"
onClick={() => {
this.handleView(i);
}}
>
View
</button>
</ListGroupItem>
));
return (
<div style={{ height: "100%" }}>
<NavBar />
<form
style={{
display: "flex",
height: "100%",
alignItems: "center",
}}
>
{patientsList.length === 0 ? (
<h1 style={{ textAlign: "center", flexGrow: "1" }}>
No Patients Found
</h1>
) : (
<ListGroup
style={{ alignSelf: "flex-start", flexGrow: "1" }}
>
{patientItems}
</ListGroup>
)}
</form>
</div>
);
}
}
export default AllPatients;AllAppointments.jsx
import React, { Component } from "react";
import NavBar from "./NavBar.jsx";
import "../App.css";
import AddPatient from "./AddPatient.jsx";
import { appDetailsData } from "./data";
import { ListGroupItem, ListGroup } from "reactstrap";
class AllAppointments extends Component {
constructor() {
super();
this.state = {
//Write function to get the appointment details with the name as appointmentsList:
appointmentsList: appDetailsData.getData(),
};
this.handleView = this.handleView.bind(this);
this.handleEdit = this.handleEdit.bind(this);
this.handleDelete = this.handleDelete.bind(this);
}
handleView(appId) {
this.props.history.push(`/viewAppointment/${appId}`);
}
handleEdit(appId) {
this.props.history.push(`/editAppointment/${appId}`);
}
handleDelete(appId) {
appDetailsData.deleteAppointment(appId);
this.setState({
appointmentsList: appDetailsData.getData(),
});
}
appsList() {
if (this.state.appointmentsList.length == 0)
return <h1>No Appointments Found</h1>;
}
render() {
const { appointmentsList } = this.state;
return (
<div style={{ height: "100%" }}>
<NavBar />
<form
style={{
display: "flex",
height: "100%",
alignItems: "center",
}}
>
{appointmentsList.length === 0 ? (
<h1 style={{ textAlign: "center", flexGrow: "1" }}>
No Appoinments Found
</h1>
) : (
<div style={{ height: "100%", width: "100%" }}>
<div>
<p
style={{
textAlign: "center",
paddingBottom: "10px",
paddingTop: "10px",
fontSize: "2em",
color: "Slate Blue",
}}
>
List of All Appointments
</p>
</div>
<ListGroup>
{appointmentsList.map((appointment, index) => (
<ListGroupItem key={index}>
{appointment.name}, Slot-
{appointment.slot}
<button
className="FormField__all__Button"
onClick={() => {
this.handleEdit(
appointment.appId
);
}}
>
Edit
</button>
<button
className="FormField__all__Button"
onClick={() => {
this.handleView(
appointment.appId
);
}}
>
View
</button>
<button
className="FormField__all__Button"
onClick={() => {
this.handleDelete(
appointment.appId
);
}}
>
Delete
</button>
</ListGroupItem>
))}
</ListGroup>
</div>
)}
</form>
</div>
);
}
}
export default AllAppointments;BookAppointment.jsx
import React, { Component } from "react";
import NavBar from "./NavBar.jsx";
import "../App.css";
import { appDetailsData } from "./data";
import { patientDetailsData } from "./data";
class BookAppointment extends Component {
constructor() {
super();
this.state = {
name: "",
disease: "",
appdate: "",
slot: "",
description: "",
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleDropdownChange = this.handleDropdownChange.bind(this);
this.handleDropdownNameChange =
this.handleDropdownNameChange.bind(this);
}
handleChange(e) {
let target = e.target;
let value = target.type === "checkbox" ? target.checked : target.value;
let name = target.name;
this.setState({
[name]: value,
});
}
handleDropdownChange(e) {
if (e.target.value === "N/A")
alert("please select slot other than N/A");
this.setState({ slot: e.target.value });
}
handleDropdownNameChange(e) {
this.setState({ name: e.target.value });
}
handleSubmit(e) {
if (this.canBeSubmitted()) {
e.preventDefault();
let slot = this.slots.value;
if (slot === "N/A" || this.state.name === "N/A") {
alert("Please select slot and name values other than N/A");
} else {
alert("Appointment booked successfully");
appDetailsData.add(
this.state.name,
this.state.disease,
this.state.appdate,
slot,
this.state.description
);
this.props.history.push("/allAppointments");
}
}
}
handleCancel(e) {
this.props.history.push("/allAppointments");
}
canBeSubmitted() {
const { name, disease, appdate, slot, description } = this.state;
return (
name.length > 4 &&
disease.length > 0 &&
appdate.length > 0 &&
description.length > 0
);
}
render() {
const names = patientDetailsData.getName();
const isEnabled = this.canBeSubmitted();
const date = new Date();
return (
<div>
<NavBar />
<div>
<p
style={{
textAlign: "center",
paddingBottom: "10px",
paddingTop: "30px",
fontSize: "2em",
}}
>
Booking Appointment
</p>
</div>
<div className="FormCenter">
<form onSubmit={this.handleSubmit} className="FormFields">
<div></div>
<div className="FormField">
{/*Write code here to create dropdown to list the name of patients, if no patients are avilable then it should be N/A */}
<label className="FormField__Label" htmlFor="name">
Name of the Patient
</label>
<select name="name" className="DropDowns">
<option value="N/A">N/A</option>
{names.length > 0
? names.map((name, i) => (
<option value={name} key={i}>
name
</option>
))
: ""}
</select>
</div>
{/*Write code here to create date and disease labels */}
<div className="FormField">
<label
className="FormField__Label"
htmlFor="disease"
>
Disease
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="disease"
id="disease"
className="FormField__Input"
placeholder="Enter your disease"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="appdate"
>
Date
</label>
<input
type="date"
onChange={(e) => this.handleChange(e)}
name="appdate"
id="appdate"
className="FormField__Input"
placeholder="Enter your appointment date"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="slot">
Slots
</label>
<select
name="slot"
class="DropDowns"
ref={(input) => (this.slots = input)}
>
<header>select slots </header>
<option value="N/A">N/A</option>
<option value="10-11 AM">10-11 AM</option>
<option value="1-2 PM">1-2 PM</option>
<option value="3-4 PM">3-4 PM</option>
<option value="6-8 PM">6-8 PM</option>
</select>
</div>
{/* Write code here to create description field,submit and cancel buttons */}
<div className="FormField">
<label
className="FormField__Label"
htmlFor="description"
>
Disease
</label>
<input
type="text"
onChange={(e) => this.handleChange(e)}
name="description"
id="description"
className="FormField__Input"
placeholder="Enter your description"
/>
</div>
<div
className="FormField"
style={{
display: "flex",
justifyContent: "center",
gap: "40px",
}}
>
<button type="submit" className="FormField__Button">
Book Now
</button>
<button
type="button"
onClick={() => {
this.handleCancel();
}}
className="FormField__Button"
>
Cancel
</button>
</div>
</form>
</div>
</div>
);
}
}
export default BookAppointment;ViewPatient.jsx
import React, { Component } from "react";
import NavBar from "./NavBar";
import { patientDetailsData } from "./data.js";
class ViewPatient extends Component {
constructor(props) {
super(props);
this.state = {
patient: patientDetailsData.viewPatientDetails(
props.match.params.id
),
};
this.handleClose = this.handleClose.bind(this);
}
handleClose(e) {
this.props.history.push("/allPatients");
}
render() {
const { patient } = this.state;
if (!patient) {
return <h1>No patients found</h1>;
}
return (
<div>
<NavBar />
<div>
<p
style={{
textAlign: "center",
paddingBottom: "10px",
paddingTop: "10px",
fontSize: "2em",
}}
>
Viewing Patient
</p>
</div>
<div className="FormCenter">
<form onSubmit={this.handleSubmit} className="FormFields">
{/* Write code here to create fields for name, disease,appdate, slot and mobile*/}
<div className="FormField">
<span className="FormField__Label" id="name">
Name - {patient.name}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="email">
E-mail ID - {patient.email}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="dob">
Date of Birth - {patient.dob}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="location">
Location - {patient.location}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="mobile">
Mobile - {patient.mobile}
</span>
</div>
<div className="FormField">
{/*Write code here to create close button */}
<button
type="button"
onClick={() => {
this.handleClose();
}}
className="FormField__Button"
>
Close
</button>
</div>
</form>
</div>
</div>
);
}
}
export default ViewPatient;ViewProfile.jsx
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import NavBar from "./NavBar.jsx";
import { adminDetailsData } from "./data.js";
import "../App.css";
class ViewProfile extends Component {
constructor(props) {
super(props);
this.state = {
admin: adminDetailsData.getCurrentUser() || {},
};
this.handleClose = this.handleClose.bind(this);
}
handleClose(e) {
e.preventDefault();
this.props.history.push("/allPatients");
}
render() {
const { admin } = this.state;
return (
<div>
<NavBar />
<div>
<h3 style={{ textAlign: "center", paddingBottom: "10px" }}>
Here are your details
</h3>
</div>
<div className="FormCenter">
<form onSubmit={this.handleSubmit} className="FormFields">
{/*Write code to create labels for name,email,dob,mobileno and location */}
<div className="FormField">
<span className="FormField__Label" id="name">
Username - {admin.uname}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="email">
E-mail ID - {admin.email}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="dob">
Date of Birth - {admin.dob}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="location">
Location - {admin.location}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="mobileno">
Mobile - {admin.mobileno}
</span>
</div>
<div className="FormField">
{/*Write code here to create a close button */}
<button
type="button"
onClick={() => {
this.handleClose();
}}
className="FormField__Button"
>
Close
</button>
</div>
</form>
</div>
</div>
);
}
}
export default ViewProfile;ViewAppointment.jsx
import React, { Component } from "react";
import NavBar from "./NavBar";
import { appDetailsData } from "./data.js";
class ViewAppointment extends Component {
constructor(props) {
super(props);
this.state = {
appointment: appDetailsData.getAppointmentDetails(
props.match.params.appId
),
};
this.handleClose = this.handleClose.bind(this);
}
handleClose(e) {
this.props.history.push("/allAppointments");
}
render() {
const { appointment } = this.state;
if (!appointment) {
return <h1>No appointments found</h1>;
}
return (
<div>
<NavBar />
<div>
<div>
<p
style={{
textAlign: "center",
paddingBottom: "10px",
paddingTop: "30px",
fontSize: "2em",
}}
>
Viewing Appointment
</p>
</div>
</div>
<div className="FormCenter">
<form onSubmit={this.handleSubmit} className="FormFields">
{/* Write code here to display name, appdate, slot, description and disease */}
<div className="FormField">
{/*Write code here to create dropdown to list the name of patients, if no patients are avilable then it should be N/A */}
<span className="FormField__Label" id="name">
Name of the Patient - {appointment.name}
</span>
</div>
{/*Write code here to create date and disease labels */}
<div className="FormField">
<span className="FormField__Label" id="disease">
Disease - {appointment.disease}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="appdate">
Date - {appointment.appdate}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="slot">
Slot - {appointment.slot}
</span>
</div>
<div className="FormField">
<span className="FormField__Label" id="description">
Disease - {appointment.description}
</span>
</div>
<div className="FormField">
{/*Write code here to create a close button */}
<button
type="button"
onClick={() => {
this.handleClose();
}}
className="FormField__Button"
>
Close
</button>
</div>
</form>
</div>
</div>
);
}
}
export default ViewAppointment;EditPatient.jsx
import React, { Component } from "react";
import "../App.css";
import NavBar from "./NavBar.jsx";
import { patientDetailsData } from "./data.js";
import { Route } from "react-router-dom";
class EditPatient extends Component {
constructor(props) {
super(props);
const patient =
patientDetailsData.getPatientDetails(props.match.params.id) ||
undefined;
this.state = {
name: patient.name || "",
email: patient.email || "",
dob: patient.dob || "",
location: patient.location || "",
mobile: patient.mobile || "",
patient: patient,
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(e) {
if (this.canBeSubmitted()) {
e.preventDefault();
patientDetailsData.edit(
this.state.patient.id,
this.state.name,
this.state.email,
this.state.dob,
this.state.location,
this.state.mobile
);
this.props.history.push("/allPatients");
}
}
canBeSubmitted() {
const { name, email, dob, location, mobile } = this.state;
return (
name.length > 0 &&
email.length > 0 &&
dob.length > 0 &&
location.length > 0 &&
mobile.length > 0
);
}
handleCancel(e) {
this.props.history.push("/allPatients");
}
handleChange(e) {
let target = e.target;
let value = target.type === "checkbox" ? target.checked : target.value;
let name = target.name;
this.setState({
[name]: value,
});
}
render() {
const { patient } = this.state;
if (!patient) {
return <div>Patient doesnot exist</div>;
}
return (
<div>
<NavBar />
<div>
<p
style={{
textAlign: "center",
paddingBottom: "10px",
paddingTop: "10px",
fontSize: "2em",
}}
>
Edit patient
</p>
</div>
<div className="FormCenter">
<form onSubmit={this.handleSubmit} className="FormFields">
{/* Write code here to create labels and input fields for edit patient like name,email,dob,location and mobile*/}
<div></div>
<div className="FormField">
<label
className="FormField__ViewLabel"
htmlFor="name"
>
Name
</label>
<input
type="text"
value={patient.name}
onChange={(e) => this.handleChange(e)}
name="name"
id="name"
className="FormField__Input"
placeholder="Enter your name"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="email">
E-mail ID
</label>
<input
type="text"
value={patient.email}
onChange={(e) => this.handleChange(e)}
name="email"
id="email"
className="FormField__Input"
placeholder="Enter your email"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="dob">
Date of Birth
</label>
<input
type="text"
value={patient.dob}
onChange={(e) => this.handleChange(e)}
name="dob"
id="dob"
className="FormField__Input"
placeholder="Enter your date of birth"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="location"
>
Location
</label>
<input
type="text"
value={patient.location}
onChange={(e) => this.handleChange(e)}
name="location"
id="location"
className="FormField__Input"
placeholder="Enter your mobile number"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="mobile"
>
Mobile
</label>
<input
type="number"
value={patient.mobile}
onChange={(e) => this.handleChange(e)}
name="mobile"
id="mobile"
className="FormField__Input"
placeholder="Enter your mobile number"
/>
</div>
<div
className="FormField"
style={{
display: "flex",
justifyContent: "center",
gap: "40px",
}}
>
<button type="submit" className="FormField__Button">
Update
</button>
<button
type="button"
onClick={(e) => {
this.handleCancel(e);
}}
className="FormField__Button"
>
Cancel
</button>
</div>
</form>
</div>
</div>
);
}
}
export default EditPatient;EditAppointment.jsx
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import NavBar from "./NavBar.jsx";
import { appDetailsData, patientDetailsData } from "./data.js";
import "../App.css";
class EditAppointment extends Component {
constructor(props) {
super(props);
const appointment =
appDetailsData.getAppointmentDetails(props.match.params.appId) ||
undefined;
this.state = {
name: appointment.name || "",
disease: appointment.disease || "",
appdate: appointment.appdate || "",
slot: appointment.slot || "",
description: appointment.description || "",
appointment: appointment,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleCancel = this.handleCancel.bind(this);
}
handleSubmit(e) {
console.log(
"Details",
this.state.appointment.appId,
this.state.name,
this.state.disease,
this.state.appdate,
this.state.slot,
this.state.description
);
if (true) {
e.preventDefault();
appDetailsData.edit(
this.state.appointment.appId,
this.state.name,
this.state.disease,
this.state.appdate,
this.state.slot,
this.state.description
);
this.props.history.push("/allAppointments");
}
}
canBeSubmitted() {
const { name, disease, appdate, slot, description } = this.state;
return (
name.length > 0 &&
disease.length > 0 &&
appdate.length > 0 &&
slot.length > 0 &&
description.length > 0
);
}
handleCancel(e) {
this.props.history.push("/allAppointments");
}
handleChange(e) {
let target = e.target;
let value = target.type === "checkbox" ? target.checked : target.value;
let name = target.name;
this.setState({
[name]: value,
});
}
render() {
const { appointment } = this.state;
const names = patientDetailsData.getName();
if (!appointment) {
return <h1>No appointments Found</h1>;
}
return (
<div>
<NavBar />
<div>
<p
style={{
textAlign: "center",
paddingBottom: "10px",
paddingTop: "30px",
fontSize: "2em",
}}
>
Edit Appointment
</p>
</div>
<div className="FormCenter">
<form onSubmit={this.handleSubmit} className="FormFields">
{/*it should have fields like name, disease, appdate, slot, description, submit and cancel buttons */}
<div></div>
<div className="FormField">
<label className="FormField__Label" htmlFor="name">
Name of the Patient
</label>
<input
type="text"
value={appointment.name}
onChange={(e) => this.handleChange(e)}
name="name"
id="name"
className="FormField__Input"
placeholder="Enter your name"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="disease"
>
Disease
</label>
<input
type="text"
value={appointment.disease}
onChange={(e) => this.handleChange(e)}
name="disease"
id="disease"
className="FormField__Input"
placeholder="Enter your disease"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="appdate"
>
Date
</label>
<input
type="date"
value={appointment.appdate}
onChange={(e) => this.handleChange(e)}
name="appdate"
id="appdate"
className="FormField__Input"
placeholder="Enter your appointment date"
/>
</div>
<div className="FormField">
<label className="FormField__Label" htmlFor="slot">
Slots
</label>
<input
type="text"
value={appointment.slot}
onChange={(e) => this.handleChange(e)}
name="slot"
id="slot"
className="FormField__Input"
placeholder="Enter your slot"
/>
</div>
<div className="FormField">
<label
className="FormField__Label"
htmlFor="description"
>
Disease
</label>
<input
type="text"
value={appointment.description}
onChange={(e) => this.handleChange(e)}
name="description"
id="description"
className="FormField__Input"
placeholder="Enter your description"
/>
</div>
<div
className="FormField"
style={{
display: "flex",
justifyContent: "center",
gap: "40px",
}}
>
<button type="submit" className="FormField__Button">
Update
</button>
<button
type="button"
onClick={(e) => {
this.handleCancel(e);
}}
className="FormField__Button"
>
Cancel
</button>
</div>
</form>
</div>
</div>
);
}
}
export default EditAppointment;