Forgive me if this is a simple problem or if there is something I am missing, but I have been racking my brain on this for a while and can't seem to find anything.
Let me start by saying this application features a form that can update prescription information for fake patients
Here is the form design
return (
<div className='pres-container'>
<form className='pres-form'>
<div className='pres-1'>
<label className='select-label'>Select patient: </label>
<select onChange={(event) => { getPrescriptions(event.target.value) }}>
{patients.map((data) => {
return (
<option value={data.Username}>{data.Name}</option>
)
})}
</select>
<label>Select prescription: </label>
<select onChange={(e) => {populateData(e.target.value)}}>
<option value="New">Create New</option>
{prescriptions.map((data) => {
return (
<option value={`ID - ${data.Prescription_ID}`}>{data.Medication_Name}</option>
)
})}
</select>
</div>
<div className='pres-2'>
<label>Medication Name: </label>
<input value={medName} onChange={(e) => {setMedName(e.target.value)}}/>
<label>Dosage: </label>
<input value={dosage} onChange={(e) => {setDosage(e.target.value)}}/>
<label>Date: </label>
<input type="date" value={date} onChange={(e) => {setDate(e.target.value)}}/>
</div>
<div className='pres-3'>
<label>Instructions: </label>
<textarea className='pres-long' value={instructions} onChange={(e) => {setInstructions(e.target.value)}}/>
<label>Filled?: </label>
<input type="checkbox" checked={filled} onChange={(e) => {handleCheck(e)}}></input>
</div>
<button className='pres-update' onClick={() => {handleUpdate()}}>Update/Create</button>
<button className='pres-delete'>Delete</button>
</form>
</div>
)
Essentially, what I want to happen, when I click the update/create button, it should execute this method
const handleUpdate = async () => {
if(id !== "") {
await fetch(`https://localhost:44304/api/Prescription/UpdatePrescription`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"prescription_ID": id,
"patient_Username": patientName,
"doctor_Username": location.state.username,
"medication_Name": medName,
"prescribed_Date": date,
"dosage": dosage,
"instructions": instructions,
"is_Filled": filled
},
)
}).then(response => response.json()).then((response) => {
console.log(response)
if(response===true){
alert("update pass!")
}
else{
alert("update failure!")
}
})
}
else{
}
}
Everything works as expected... Yay! However, after this fetch PUT executes, it refreshes the page and adds an empty question mark/query string at the end of the url and throws this error
Cannot read properties of null (reading 'username')
this corresponds to this line of code
let location = useLocation()
this line is crucial to this page working as it stores the doctors username in location.state.username which is used for other fetch calls at other parts in the page (if needed I can explain how this works as well)
BELOW THIS IS THE ENTIRE COMPONENT FOR READABILITY
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom';
import "../presform.css";
let id = ""
let patientName = ""
export const DocPres = () => {
let location = useLocation()
const [patients, setPatients] = useState([])
const [prescriptions, setPrescriptions] = useState([])
const [medName, setMedName] = useState("")
const [dosage, setDosage] = useState("")
const [instructions, setInstructions] = useState("")
const [date, setDate] = useState("1900-01-01")
const [filled, setFilled] = useState(false)
useEffect(() => {
fetch(`https://localhost:44304/api/Patient/GetPatientsByDoctor?doctorUsername=${location.state.username}`).then(response => response.json()).then((response) => {
setPatients(response)
})
}, [])
const getPrescriptions = (e) => {
fetch(`https://localhost:44304/api/Prescription/GetPrescriptionsByPatient?patientUsername=${e}`).then(response => response.json()).then((response) => {
setPrescriptions(response)
})
patientName = e
id = ""
setMedName("")
setDosage("")
setInstructions("")
setDate("1900-01-01")
setFilled(false)
}
const populateData = (e) => {
if(typeof(e) === 'string') {
var result = e.includes("ID")
if(e==="New"){
id = ""
setMedName("")
setDosage("")
setInstructions("")
setDate("1900-01-01")
setFilled(false)
}
else if(result===true) {
id = e.slice(5)
fetch(`https://localhost:44304/api/Prescription/GetPrescriptionByID?prescriptionId=${id}`).then(response => response.json()).then((response) => {
setMedName(response[0].Medication_Name)
setDosage(response[0].Dosage)
setInstructions(response[0].Instructions)
setDate(response[0].Prescribed_Date)
setFilled(response[0].Is_Filled)
})
}
}
else {
id = ""
setMedName("")
setDosage("")
setInstructions("")
setDate("1900-01-01")
setFilled(false)
}
}
const handleCheck = (e) => {
if(!e.target.checked){
setFilled(false)
}
else {
setFilled(true)
}
}
const handleUpdate = async () => {
if(id !== "") {
await fetch(`https://localhost:44304/api/Prescription/UpdatePrescription`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"prescription_ID": id,
"patient_Username": patientName,
"doctor_Username": location.state.username,
"medication_Name": medName,
"prescribed_Date": date,
"dosage": dosage,
"instructions": instructions,
"is_Filled": filled
},
)
}).then(response => response.json()).then((response) => {
console.log(response)
if(response===true){
alert("test")
}
else{
alert("update failure!")
}
})
}
else{
}
}
return (
<div className='pres-container'>
<form className='pres-form'>
<div className='pres-1'>
<label className='select-label'>Select patient: </label>
<select onChange={(event) => { getPrescriptions(event.target.value) }}>
{patients.map((data) => {
return (
<option value={data.Username}>{data.Name}</option>
)
})}
</select>
<label>Select prescription: </label>
<select onChange={(e) => {populateData(e.target.value)}}>
<option value="New">Create New</option>
{prescriptions.map((data) => {
return (
<option value={`ID - ${data.Prescription_ID}`}>{data.Medication_Name}</option>
)
})}
</select>
</div>
<div className='pres-2'>
<label>Medication Name: </label>
<input value={medName} onChange={(e) => {setMedName(e.target.value)}}/>
<label>Dosage: </label>
<input value={dosage} onChange={(e) => {setDosage(e.target.value)}}/>
<label>Date: </label>
<input type="date" value={date} onChange={(e) => {setDate(e.target.value)}}/>
</div>
<div className='pres-3'>
<label>Instructions: </label>
<textarea className='pres-long' value={instructions} onChange={(e) => {setInstructions(e.target.value)}}/>
<label>Filled?: </label>
<input type="checkbox" checked={filled} onChange={(e) => {handleCheck(e)}}></input>
</div>
<button className='pres-update' onClick={() => {handleUpdate()}}>Update/Create</button>
<button className='pres-delete'>Delete</button>
</form>
</div>
)
}
export default DocPres;
What I have tried
So far, I have tried researching what happens when executing a put method and I can't seem to find anything on that
I have tried reusing useNavigate to essentially renavigate back to the original page but that doesn't do much either
Currently trying
I am going to start messing around with storing the username in the localstorage so I can avoid using useLocation all together. I think the useLocation state drops when the url changes.
Any other fixes?
