I have a form that is using a ternary expression to decide if it is editing values or submitting new values. The adding values that are new is working via my postman client test, but edit is giving me method not allowed.
Here is my form:
return (
<div className="App">
<Form onSubmit={formik.handleSubmit}>
<label>Rating</label>
<input type="number" name="rating" value={formik.values.rating} onChange={formik.handleChange} />
<label>Comment</label>
<input type="text" name="comment" value={formik.values.comment} onChange={formik.handleChange} />
<label>Date</label>
<input type="date" name="date" value={formik.values.date} onChange={formik.handleChange} />
<button type="submit">{editForm ? 'Update' : 'Submit'}</button>
<button type="button" onClick={handleClear}>
Clear
</button>
{editForm && <button type="button" onClick={handleConfirmation}>Confirm</button>}
</Form>
{isConfirmationOpen && (
<ConfirmationDialog>
<p>Are you sure you want to submit the review?</p>
<button onClick={handleConfirm}>Yes</button>
<button onClick={handleCancel}>No</button>
</ConfirmationDialog>
)}
</div>
);
Here is my form fetch:
const submitForm = (values) => {
console.log('submitting values from form', values)
fetch(editForm ? `/reviews/${review.id}` : '/reviews', {
method: editForm ? 'PATCH' : 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(values),
})
.then((resp) => {
if (resp.ok) {
resp.json().then((review) => {
editForm ? handleSubmit(review) : onAddReview(review);
history.push('/');
});
}
})
.catch((error) => {
console.error('Error submitting form:', error);
});
};
My backend route to handle the edit:
class Reviews_By_Id(Resource):
def get (self, review_id):
review = Review.query.get(review_id)
if not review:
abort(404, "Review not found")
return make_response(review.to_dict(), 200)
def patch(self, review_id):
review = Review.query.get(review_id)
if not review:
abort(404, "Review not found")
data = request.get_json()
for attr in data:
setattr(review, attr, data[attr])
db.session.commit()
return make_response(review.to_dict(), 200)
def delete(self, review_id):
review = Review.query.get(review_id)
if not review:
abort(404, "Review not found")
db.session.delete(review)
db.session.commit()
return make_response({}, 204)
api.add_resource(Reviews_By_Id, "/reviews/<int:review_id>")
What my model for Reviews looks like:
class Review(db.Model, SerializerMixin):
__tablename__ = 'reviews'
id = db.Column(db.Integer, primary_key=True)
user_id = db.Column(db.Integer, db.ForeignKey('users.id'))
climbing_area_id = db.Column(db.Integer, db.ForeignKey('climbing_areas.id'))
rating = db.Column(db.Integer)
comment = db.Column(db.String(255))
date = db.Column(db.DateTime)
area = db.relationship('Climbing_Area', backref='reviews', cascade = ('all,delete'))
serialize_rules = ('-user.reviews',)
I am expecting that when a user clicks on the edit button by the review it will pull up the form with the values and on submit will update the values on the review.
I have tried to rewrite the routes, Ive added console.logs and print statements in my code to find any lines that might not be working.