Untitled
unknown
plain_text
2 years ago
30 kB
6
Indexable
Never
import React, { useState, useEffect } from "react";
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import { Link } from "react-router-dom";
import CircularProgress from '@material-ui/core/CircularProgress';
import { useBeforeunload } from 'react-beforeunload';
import { Insurances } from '../../constants/Insurances'
const NewPatient = () => {
const [loading, setLoading] = useState(false);
const [firstname, setFirstname] = useState('');
const [lastname, setLastname] = useState('');
const [email, setEmail] = useState('');
const [phone, setPhone] = useState('');
const [address, setAddress] = useState('');
const [zip, setZip] = (useState)('');
const [street, setStreet] = useState('');
const [city, setCity] = useState('');
const [state, setState] = useState(' ')
const [birth, setBirth] = useState('');
const [notes, setNotes] = useState('');
const [gender, setGender] = useState('');
const [insurance, setInsurance] = useState([]);
const [selectedInsurence, setSelectedInsurance] = useState('');
const [praxis, setBranch] = useState('');
const [doctor, setDoctor] = useState('');
const [relationship, setRelation] = useState('');
const [relation, setRelationship] = useState([]);
const [doctors, setDoctors] = useState([]);
const genders = [{ "id": "Male", "value": "Male" }, { "id": "Female", "value": "Female" }, { "id": "Other", "value": "Other" },];
const branches = [{ "id": 0, "value": "First Branch" }, { "id": 1, "value": "Second Branch" }, { "id": 2, "value": "Third Branch" }, { "id": 3, "value": "Fourth Branch" },];
const countrys = [
{ "name": "Albania", "code": "AL" },
{ "name": "Åland Islands", "code": "AX" },
{ "name": "Algeria", "code": "DZ" },
{ "name": "American Samoa", "code": "AS" },
{ "name": "Andorra", "code": "AD" },
{ "name": "Angola", "code": "AO" },
{ "name": "Anguilla", "code": "AI" },
{ "name": "Antarctica", "code": "AQ" },
{ "name": "Antigua and Barbuda", "code": "AG" },
{ "name": "Argentina", "code": "AR" },
{ "name": "Armenia", "code": "AM" },
{ "name": "Aruba", "code": "AW" },
{ "name": "Australia", "code": "AU" },
{ "name": "Austria", "code": "AT" },
{ "name": "Azerbaijan", "code": "AZ" },
{ "name": "Bahamas (the)", "code": "BS" },
{ "name": "Bahrain", "code": "BH" },
{ "name": "Bangladesh", "code": "BD" },
{ "name": "Barbados", "code": "BB" },
{ "name": "Belarus", "code": "BY" },
{ "name": "Belgium", "code": "BE" },
{ "name": "Belize", "code": "BZ" },
{ "name": "Benin", "code": "BJ" },
{ "name": "Bermuda", "code": "BM" },
{ "name": "Bhutan", "code": "BT" },
{ "name": "Bolivia (Plurinational State of)", "code": "BO" },
{ "name": "Bonaire, Sint Eustatius and Saba", "code": "BQ" },
{ "name": "Bosnia and Herzegovina", "code": "BA" },
{ "name": "Botswana", "code": "BW" },
{ "name": "Bouvet Island", "code": "BV" },
{ "name": "Brazil", "code": "BR" },
{ "name": "British Indian Ocean Territory (the)", "code": "IO" },
{ "name": "Brunei Darussalam", "code": "BN" },
{ "name": "Bulgaria", "code": "BG" },
{ "name": "Burkina Faso", "code": "BF" },
{ "name": "Burundi", "code": "BI" },
{ "name": "Cabo Verde", "code": "CV" },
{ "name": "Cambodia", "code": "KH" },
{ "name": "Cameroon", "code": "CM" },
{ "name": "Canada", "code": "CA" },
{ "name": "Cayman Islands (the)", "code": "KY" },
{ "name": "Central African Republic (the)", "code": "CF" },
{ "name": "Chad", "code": "TD" },
{ "name": "Chile", "code": "CL" },
{ "name": "China", "code": "CN" },
{ "name": "Christmas Island", "code": "CX" },
{ "name": "Cocos (Keeling) Islands (the)", "code": "CC" },
{ "name": "Colombia", "code": "CO" },
{ "name": "Comoros (the)", "code": "KM" },
{ "name": "Congo (the Democratic Republic of the)", "code": "CD" },
{ "name": "Congo (the)", "code": "CG" },
{ "name": "Cook Islands (the)", "code": "CK" },
{ "name": "Costa Rica", "code": "CR" },
{ "name": "Croatia", "code": "HR" },
{ "name": "Cuba", "code": "CU" },
{ "name": "Curaçao", "code": "CW" },
{ "name": "Cyprus", "code": "CY" },
{ "name": "Czechia", "code": "CZ" },
{ "name": "Côte d'Ivoire", "code": "CI" },
{ "name": "Denmark", "code": "DK" },
{ "name": "Djibouti", "code": "DJ" },
{ "name": "Dominica", "code": "DM" },
{ "name": "Dominican Republic (the)", "code": "DO" },
{ "name": "Ecuador", "code": "EC" },
{ "name": "Egypt", "code": "EG" },
{ "name": "El Salvador", "code": "SV" },
{ "name": "Equatorial Guinea", "code": "GQ" },
{ "name": "Eritrea", "code": "ER" },
{ "name": "Estonia", "code": "EE" },
{ "name": "Eswatini", "code": "SZ" },
{ "name": "Ethiopia", "code": "ET" },
{ "name": "Falkland Islands (the) [Malvinas]", "code": "FK" },
{ "name": "Faroe Islands (the)", "code": "FO" },
{ "name": "Fiji", "code": "FJ" },
{ "name": "Finland", "code": "FI" },
{ "name": "France", "code": "FR" },
{ "name": "French Guiana", "code": "GF" },
{ "name": "French Polynesia", "code": "PF" },
{ "name": "French Southern Territories (the)", "code": "TF" },
{ "name": "Gabon", "code": "GA" },
{ "name": "Gambia (the)", "code": "GM" },
{ "name": "Georgia", "code": "GE" },
{ "name": "Germany", "code": "DE" },
{ "name": "Ghana", "code": "GH" },
{ "name": "Gibraltar", "code": "GI" },
{ "name": "Greece", "code": "GR" },
{ "name": "Greenland", "code": "GL" },
{ "name": "Grenada", "code": "GD" },
{ "name": "Guadeloupe", "code": "GP" },
{ "name": "Guam", "code": "GU" },
{ "name": "Guatemala", "code": "GT" },
{ "name": "Guernsey", "code": "GG" },
{ "name": "Guinea", "code": "GN" },
{ "name": "Guinea-Bissau", "code": "GW" },
{ "name": "Guyana", "code": "GY" },
{ "name": "Haiti", "code": "HT" },
{ "name": "Heard Island and McDonald Islands", "code": "HM" },
{ "name": "Holy See (the)", "code": "VA" },
{ "name": "Honduras", "code": "HN" },
{ "name": "Hong Kong", "code": "HK" },
{ "name": "Hungary", "code": "HU" },
{ "name": "Iceland", "code": "IS" },
{ "name": "India", "code": "IN" },
{ "name": "Indonesia", "code": "ID" },
{ "name": "Iran (Islamic Republic of)", "code": "IR" },
{ "name": "Iraq", "code": "IQ" },
{ "name": "Ireland", "code": "IE" },
{ "name": "Isle of Man", "code": "IM" },
{ "name": "Israel", "code": "IL" },
{ "name": "Italy", "code": "IT" },
{ "name": "Jamaica", "code": "JM" },
{ "name": "Japan", "code": "JP" },
{ "name": "Jersey", "code": "JE" },
{ "name": "Jordan", "code": "JO" },
{ "name": "Kazakhstan", "code": "KZ" },
{ "name": "Kenya", "code": "KE" },
{ "name": "Kiribati", "code": "KI" },
{ "name": "Korea (the Democratic People's Republic of)", "code": "KP" },
{ "name": "Korea (the Republic of)", "code": "KR" },
{ "name": "Kuwait", "code": "KW" },
{ "name": "Kyrgyzstan", "code": "KG" },
{ "name": "Lao People's Democratic Republic (the)", "code": "LA" },
{ "name": "Latvia", "code": "LV" },
{ "name": "Lebanon", "code": "LB" },
{ "name": "Lesotho", "code": "LS" },
{ "name": "Liberia", "code": "LR" },
{ "name": "Libya", "code": "LY" },
{ "name": "Liechtenstein", "code": "LI" },
{ "name": "Lithuania", "code": "LT" },
{ "name": "Luxembourg", "code": "LU" },
{ "name": "Macao", "code": "MO" },
{ "name": "Madagascar", "code": "MG" },
{ "name": "Malawi", "code": "MW" },
{ "name": "Malaysia", "code": "MY" },
{ "name": "Maldives", "code": "MV" },
{ "name": "Mali", "code": "ML" },
{ "name": "Malta", "code": "MT" },
{ "name": "Marshall Islands (the)", "code": "MH" },
{ "name": "Martinique", "code": "MQ" },
{ "name": "Mauritania", "code": "MR" },
{ "name": "Mauritius", "code": "MU" },
{ "name": "Mayotte", "code": "YT" },
{ "name": "Mexico", "code": "MX" },
{ "name": "Micronesia (Federated States of)", "code": "FM" },
{ "name": "Moldova (the Republic of)", "code": "MD" },
{ "name": "Monaco", "code": "MC" },
{ "name": "Mongolia", "code": "MN" },
{ "name": "Montenegro", "code": "ME" },
{ "name": "Montserrat", "code": "MS" },
{ "name": "Morocco", "code": "MA" },
{ "name": "Mozambique", "code": "MZ" },
{ "name": "Myanmar", "code": "MM" },
{ "name": "Namibia", "code": "NA" },
{ "name": "Nauru", "code": "NR" },
{ "name": "Nepal", "code": "NP" },
{ "name": "Netherlands (the)", "code": "NL" },
{ "name": "New Caledonia", "code": "NC" },
{ "name": "New Zealand", "code": "NZ" },
{ "name": "Nicaragua", "code": "NI" },
{ "name": "Niger (the)", "code": "NE" },
{ "name": "Nigeria", "code": "NG" },
{ "name": "Niue", "code": "NU" },
{ "name": "Norfolk Island", "code": "NF" },
{ "name": "Northern Mariana Islands (the)", "code": "MP" },
{ "name": "Norway", "code": "NO" },
{ "name": "Oman", "code": "OM" },
{ "name": "Pakistan", "code": "PK" },
{ "name": "Palau", "code": "PW" },
{ "name": "Palestine, State of", "code": "PS" },
{ "name": "Panama", "code": "PA" },
{ "name": "Papua New Guinea", "code": "PG" },
{ "name": "Paraguay", "code": "PY" },
{ "name": "Peru", "code": "PE" },
{ "name": "Philippines (the)", "code": "PH" },
{ "name": "Pitcairn", "code": "PN" },
{ "name": "Poland", "code": "PL" },
{ "name": "Portugal", "code": "PT" },
{ "name": "Puerto Rico", "code": "PR" },
{ "name": "Qatar", "code": "QA" },
{ "name": "Republic of North Macedonia", "code": "MK" },
{ "name": "Romania", "code": "RO" },
{ "name": "Russian Federation (the)", "code": "RU" },
{ "name": "Rwanda", "code": "RW" },
{ "name": "Réunion", "code": "RE" },
{ "name": "Saint Barthélemy", "code": "BL" },
{ "name": "Saint Helena, Ascension and Tristan da Cunha", "code": "SH" },
{ "name": "Saint Kitts and Nevis", "code": "KN" },
{ "name": "Saint Lucia", "code": "LC" },
{ "name": "Saint Martin (French part)", "code": "MF" },
{ "name": "Saint Pierre and Miquelon", "code": "PM" },
{ "name": "Saint Vincent and the Grenadines", "code": "VC" },
{ "name": "Samoa", "code": "WS" },
{ "name": "San Marino", "code": "SM" },
{ "name": "Sao Tome and Principe", "code": "ST" },
{ "name": "Saudi Arabia", "code": "SA" },
{ "name": "Senegal", "code": "SN" },
{ "name": "Serbia", "code": "RS" },
{ "name": "Seychelles", "code": "SC" },
{ "name": "Sierra Leone", "code": "SL" },
{ "name": "Singapore", "code": "SG" },
{ "name": "Sint Maarten (Dutch part)", "code": "SX" },
{ "name": "Slovakia", "code": "SK" },
{ "name": "Slovenia", "code": "SI" },
{ "name": "Solomon Islands", "code": "SB" },
{ "name": "Somalia", "code": "SO" },
{ "name": "South Africa", "code": "ZA" },
{ "name": "South Georgia and the South Sandwich Islands", "code": "GS" },
{ "name": "South Sudan", "code": "SS" },
{ "name": "Spain", "code": "ES" },
{ "name": "Sri Lanka", "code": "LK" },
{ "name": "Sudan (the)", "code": "SD" },
{ "name": "Suriname", "code": "SR" },
{ "name": "Svalbard and Jan Mayen", "code": "SJ" },
{ "name": "Sweden", "code": "SE" },
{ "name": "Switzerland", "code": "CH" },
{ "name": "Syrian Arab Republic", "code": "SY" },
{ "name": "Taiwan (Province of China)", "code": "TW" },
{ "name": "Tajikistan", "code": "TJ" },
{ "name": "Tanzania, United Republic of", "code": "TZ" },
{ "name": "Thailand", "code": "TH" },
{ "name": "Timor-Leste", "code": "TL" },
{ "name": "Togo", "code": "TG" },
{ "name": "Tokelau", "code": "TK" },
{ "name": "Tonga", "code": "TO" },
{ "name": "Trinidad and Tobago", "code": "TT" },
{ "name": "Tunisia", "code": "TN" },
{ "name": "Turkey", "code": "TR" },
{ "name": "Turkmenistan", "code": "TM" },
{ "name": "Turks and Caicos Islands (the)", "code": "TC" },
{ "name": "Tuvalu", "code": "TV" },
{ "name": "Uganda", "code": "UG" },
{ "name": "Ukraine", "code": "UA" },
{ "name": "United Arab Emirates (the)", "code": "AE" },
{ "name": "United Kingdom of Great Britain and Northern Ireland (the)", "code": "GB" },
{ "name": "United States Minor Outlying Islands (the)", "code": "UM" },
{ "name": "United States of America (the)", "code": "US" },
{ "name": "Uruguay", "code": "UY" },
{ "name": "Uzbekistan", "code": "UZ" },
{ "name": "Vanuatu", "code": "VU" },
{ "name": "Venezuela (Bolivarian Republic of)", "code": "VE" },
{ "name": "Viet Nam", "code": "VN" },
{ "name": "Virgin Islands (British)", "code": "VG" },
{ "name": "Virgin Islands (U.S.)", "code": "VI" },
{ "name": "Wallis and Futuna", "code": "WF" },
{ "name": "Western Sahara", "code": "EH" },
{ "name": "Yemen", "code": "YE" },
{ "name": "Zambia", "code": "ZM" },
{ "name": "Zimbabwe", "code": "ZW" }
]
const fetchDataDoctors = async () => {
var requestOptions = { headers: { "api-key": process.env.REACT_APP_API_KEY } }
const res = await fetch(
process.env.REACT_APP_API_URL + '/citations/getDoctors', requestOptions
);
const json = await res.json();
setDoctors(json.clinicDoctors);
};
const fetchDataPatients = async () => {
var requestOptions = { headers: { "api-key": process.env.REACT_APP_API_KEY } }
const res = await fetch(
process.env.REACT_APP_API_URL + '/citations/getPatients', requestOptions
);
const json = await res.json();
setRelationship(json['clinicPatients']);
};
useEffect(() => {
const fetchDataInsurances = async () => {
var requestOptions = { headers: { "api-key": process.env.REACT_APP_API_KEY } }
const res = await fetch(
process.env.REACT_APP_API_URL + '/insurances/index', requestOptions
);
const json = await res.json();
console.log('INSURANCES: ', json)
setInsurance(json['insurances']);
};
fetchDataDoctors();
fetchDataPatients();
fetchDataInsurances();
}, []);
// Handle autocomplete for relationship
const handleRelationChange = (e, value) => {
var fieldValue = value;
if (!fieldValue) {
fieldValue = null;
} else
setRelation(value.id)
}
const handleDoctorChange = (e, value) => {
var fieldValue = value;
if (!fieldValue) {
fieldValue = null;
} else
setDoctor(value.id)
}
const handleCountryChange = (e, value) => {
var fieldValue = value;
if (!fieldValue) {
fieldValue = null;
} else
setAddress(value.name)
}
const handleInsurance = (e, value) => {
var fieldValue = value;
if (!fieldValue) {
fieldValue = null;
} else {
setSelectedInsurance(value.id)
}
}
useBeforeunload((event) => {
if (loading !== true) {
event.preventDefault();
}
});
// Post method
const handleSubmit = (e) => {
setLoading(true);
e.preventDefault();
const patient = { firstname, lastname, email, phone, address, zip, street, city, state, birth, notes, gender, insurance: selectedInsurence, praxis, relationship, doctor };
fetch(process.env.REACT_APP_API_URL + '/patients/create', {
method: 'POST',
headers: {
"Content-Type": "application/json",
"api-key": process.env.REACT_APP_API_KEY
},
body: JSON.stringify(patient)
}).then(() => {
window.location.href = "/patients";
})
}
return (
<>
<div className="frame">
<h4 className="main-title mt-2">New Patient</h4>
<div className="patients-table">
<form onSubmit={handleSubmit} className="row">
<div className="col-5">
<div className="form-group">
<label htmlFor="firstname" className="title-inputs">First Name</label>
<br />
<br />
<TextField
required
type="text"
value={firstname}
onChange={(e) => setFirstname(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
<div className="form-group">
<label htmlFor="firstname" className="title-inputs">Last Name</label>
<br />
<br />
<TextField
required
type="text"
value={lastname}
onChange={(e) => setLastname(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
<div className="form-group">
<label htmlFor="email" className="title-inputs">Email</label>
<br />
<br />
<TextField
required
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
<div className="form-group">
<label htmlFor="phone" className="title-inputs">Phone</label>
<br />
<br />
<TextField
required
type="text"
value={phone}
onChange={(e) => setPhone(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
<div className="form-group">
<label htmlFor="gender" className="title-inputs">Country</label>
<br />
<Autocomplete
noOptionsText={'Not Found'}
options={countrys}
onChange={(e, value) => handleCountryChange(e, value)}
getOptionLabel={(option) => option.name}
renderInput={(params) => <TextField {...params} required />}
style={{ width: '100%' }}
/>
</div>
<div className="form-group">
<label htmlFor="address" className="title-inputs">State</label>
<br />
<br />
<TextField
type="text"
value={state}
onChange={(e) => setState(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1.5fr 0.5fr' }}>
<div className="form-group" style={{ paddingRight: '5px' }}>
<label htmlFor="address" className="title-inputs">City</label>
<br />
<br />
<TextField
required
type="text"
value={city}
onChange={(e) => setCity(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
<div className="form-group" style={{ paddingLeft: '5px' }}>
<label htmlFor="address" className="title-inputs">Zip</label>
<br />
<br />
<TextField
required
type="text"
value={zip}
onChange={(e) => setZip(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
</div>
<div className="form-group">
<label htmlFor="address" className="title-inputs">Street</label>
<br />
<br />
<TextField
required
type="text"
value={street}
onChange={(e) => setStreet(e.target.value)}
className="input-control"
variant="outlined"
size="small"
/>
</div>
</div>
<div className="col-5">
<div className="form-group mt-4">
<label htmlFor="notes" className="title-inputs">Relationship</label>
<br />
<Autocomplete
noOptionsText={'Patient not found'}
options={relation}
onChange={(e, value) => handleRelationChange(e, value)}
getOptionLabel={(option) => (option['lastname'] + ', ' + option['firstname'])}
inputValue={relation['id']}
renderInput={(params) => <TextField {...params} />}
style={{ width: '100%' }}
/>
</div>
<div className="form-group mt-5">
<label htmlFor="gender" className="title-inputs">Gender</label>
<br />
<Select
required
type="text"
onChange={(e) => setGender(e.target.value)}
style={{ width: '100%' }}
defaultValue=""
>
{genders.map((item, index) => {
return <MenuItem key={index} value={item['id']}>{item['value']}</MenuItem>;
})}
</Select>
</div>
<div className="form-group mt-5">
<label htmlFor="group" className="title-inputs">Insurance</label>
<br />
<Autocomplete
noOptionsText={'Not Found'}
options={insurance}
// options={Insurances}
onChange={(e, value) => handleInsurance(e, value)}
getOptionLabel={(option) => option.title}
// getOptionLabel={(option) => option.name}
renderInput={(params) => <TextField {...params} required />}
style={{ width: '100%' }}
/>
</div>
<div className="form-group mt-5">
<label htmlFor="doctor" className="title-inputs">Therapist</label>
<br />
<Autocomplete
noOptionsText={'Therapist not found'}
options={doctors}
onChange={(e, value) => handleDoctorChange(e, value)}
getOptionLabel={(option) => option.name}
renderInput={(params) => <TextField {...params} />}
style={{ width: '100%' }}
/>
</div>
<div className="form-group mt-5">
<label htmlFor="gender" className="title-inputs">Branch</label>
<br />
<Select
type="text"
onChange={(e) => setBranch(e.target.value)}
style={{ width: '100%' }}
defaultValue=""
>
{branches.map((item, index) => {
return <MenuItem key={index} value={item['id']}>{item['value']}</MenuItem>;
})}
</Select>
</div>
<div className="form-group mt-5">
<label htmlFor="birth" className="title-inputs">Birth</label>
<br />
<input
required
type="date"
value={birth}
onChange={(e) => setBirth(e.target.value)}
className="input-control"
/>
</div>
<div className="form-group mt-5">
<label htmlFor="notes" className="title-inputs">Notes</label>
<TextareaAutosize
type="text"
value={notes}
onChange={(e) => setNotes(e.target.value)}
aria-label="minimum height"
minRows={3}
className="input-control"
/>
</div>
{loading ? <><div className="d-flex justify-content-center"><CircularProgress color="secondary" /></div></> : <>
<div className="mt-5">
<Link to="/patients" className="btn-cancel">CANCEL</Link>
<button className="blue-btn">SAVE</button>
</div>
</>}
</div>
</form>
</div>
</div>
</>
);
}
export default NewPatient;