// AdEditForm.js
// remove onSubmit={handleSubmit} from form, instead use it in button click
<button
onClick={handleSubmit}
disabled={ad.loading}
className="btn btn-primary"
>
{ad.loading ? "Saving..." : "Submit"}
</button>
Use flex to show Delete button beside Submit button
<div className="d-flex justify-content-between">
<button
onClick={handleSubmit}
disabled={ad.loading}
className="btn btn-primary"
>
{ad.loading ? "Saving..." : "Submit"}
</button>
<button
onClick={handleDelete}
disabled={ad.loading}
className="btn btn-danger"
>
Delete
</button>
</div>
const handleDelete = async (e) => {
e.preventDefault();
try {
const { data } = await axios.delete(`/ad/${ad._id}`);
if (data.error) {
toast.error(data.error);
} else {
toast.success("Ad deleted");
navigate("/dashboard");
}
} catch (err) {
console.log(err);
toast.error("Failed to delete ad. Try again.");
}
};
Create delete route and controller function
// routes/ad.js
router.delete("/ad/:_id", requireSignin, ad.remove);
// controllers/ad.js
export const remove = async (req, res) => {
try {
const adId = req.params._id;
const ad = await Ad.findById(adId);
const owner = req.user._id == ad?.postedBy;
if (!owner) {
return res.json({ error: "Permission denied" });
} else {
await Ad.findByIdAndDelete(adId);
res.json({ ok: true });
}
} catch (err) {
console.log(err);
}
};