1

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

4
  • I am wondering what am I doing wrong - well, it's likely a coding issue. Best place to start is to perform some debugging. You do that by walking through your code, line by line inspecting the vars and code execution along the way. Once you spot something that's not right, update your question with what line that was on and what was not right - and be sure to include what you expected as well. Update the question and we'll take a look. You should also clarify what - the app refuses to change - means... change? change in what way?
    – Jay
    Commented Jan 28, 2022 at 21:40
  • Change the data's current value. Basically I want to be able to edit the data, but the website prevents me to do so Commented Feb 3, 2022 at 21:09
  • edit the data - what data? The HTML code data or some aspect of that data. the website prevents - prevents? In what way? Is there an error? Does any of your code execute? Per my comment above, what happens when you step through your code? Does it crash? Is an error thrown? Why is there a return in the .update function but not in the .add function?
    – Jay
    Commented Feb 3, 2022 at 21:16
  • Found the issue. I was calling a set function twice. I commented the one it was causing the issue and solved Commented Feb 4, 2022 at 17:12

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.