I am making a React application with Firebase where a call can be added, displayed and added
Here's what the user is going to see
return(
<div>
<Header/>
<div className="content">
<Title name="New Call">
<FiPlusCircle size={25}/>
</Title>
<div className="container">
<form className="form-profile" onSubmit={handleRegister}>
<label>Customer</label>
{loadCustomer ? (
<input type="text" disabled={true} value="Loading Customers"/>
) : (
<select value={customerSelected} onChange={handleChangeCustomers}>
{customers.map((item, index) => {
return(
<option key={item.id} value={index}>
{item.companyName}
</option>
)
})}
</select>
)}
<label>Topic</label>
<select value= {topic} onChange={handleChangeSelect}>
<option value="Support">Support</option>
<option value="Technician">Technician</option>
<option value="Finance">Finance</option>
</select>
<label>Status</label>
<div className="status">
<input
type="radio"
name="radio"
value="open"
onChange={handleOptionChange}
checked={status === "open"}
/>
<span>Opened</span>
<input
type="radio"
name="radio"
value="progress"
onChange={handleOptionChange}
checked={status === "progress"}
/>
<span>In Progress</span>
<input
type="radio"
name="radio"
value="finished"
onChange={handleOptionChange}
checked={status === "finished"}
/>
<span>Finished</span>
</div>
<label>Add-on</label>
<textarea type="text"
placeholder="Describe your issue (optional)"
value={addOn}
onChange={(e) => setAddOn(e.target.value)}/>
<button type="submit">Save</button>
</form>
</div>
</div>
</div>
)}
And down below, we have the functions where the user can add or edit a call, which will be stored on the database
async function handleRegister(e){
e.preventDefault()
if(idCustomer){
await firebase.firestore().collection('calls').doc(id)
.update({
customer: customers[customerSelected].companyName,
customerId: customers[customerSelected].id,
topic: topic,
status: status,
addOn: addOn,
userId: user.uid
})
.then(()=> {
toast.success('Call Edited')
setCustomerSelected(0)
setAddOn('')
history.push('/dashboard')
})
.catch((err) => {
toast.error('Error on Update. Try again later')
console.log(err)
})
return
}
await firebase.firestore().collection('calls')
.add({
created: new Date(),
customer: customers[customerSelected].companyName,
customerId: customers[customerSelected].id,
topic: topic,
status: status,
addOn: addOn,
userId: user.uid
})
.then(() => {
toast.success('Call Registered')
setAddOn('')
setCustomerSelected(0)
})
.catch((err) => {
toast.error('Error on registering call. Try again later !')
console.log(err)
})
}
function handleChangeSelect(e){
setTopic(e.target.value)
}
function handleOptionChange(e){
setStatus(e.target.value)
}
function handleChangeCustomers(e){
setCustomerSelected(e.target.value)
}
But whenever I try to edit a value, the app refuses to change. I am wondering what am I doing wrong
return
in the.update
function but not in the.add
function?