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;