// AdEdit.js
{ad?.address && ad?.price ? (
<AdEditForm action={ad.action} type={ad.type} ad={ad} setAd={setAd} />
) : (
""
)}
// components/forms/AdEditForm.js
import CurrencyInput from "react-currency-input-field";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { GOOGLE_PLACES_KEY } from "../../config";
import ImageUpload from "./ImageUpload";
import toast from "react-hot-toast";
import axios from "axios";
import { useNavigate } from "react-router-dom";
export default function AdEditForm({ action, type, ad, setAd }) {
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
try {
if (!ad.photos?.length) {
toast.error("Photo is required");
return;
} else if (!ad.price) {
toast.error("Price is required");
return;
} else if (!ad.description) {
toast.error("Description is required");
return;
} else {
setAd({ ...ad, loading: true });
const { data } = await axios.put(`/ad/${ad._id}`, ad);
console.log("update response => ", data);
if (data?.error) {
toast.error(data.error);
setAd({ ...ad, loading: false });
} else {
if (data?.ok) {
toast.success("Ad updated successfully");
navigate("/dashboard");
}
}
}
} catch (err) {
console.log(err);
setAd({ ...ad, loading: false });
}
};
return (
<>
<form onSubmit={handleSubmit}>
<ImageUpload ad={ad} setAd={setAd} />
<div className="mb-3 form-control">
<GooglePlacesAutocomplete
apiKey={GOOGLE_PLACES_KEY}
apiOptions={{ region: "au" }}
selectProps={{
defaultInputValue: ad?.address,
placeholder: "Search for address..",
onChange: ({ value }) => {
// console.log("address onchange => ", value.description);
setAd({ ...ad, address: value.description });
},
}}
/>
</div>
<CurrencyInput
placeholder="Enter price"
defaultValue={ad.price}
className="form-control mb-3"
onValueChange={(value) => setAd({ ...ad, price: value })}
/>
{type === "House" ? (
<>
<input
type="number"
min="0"
className="form-control mb-3"
placeholder="Enter how many bedrooms"
value={ad.bedrooms}
onChange={(e) => setAd({ ...ad, bedrooms: e.target.value })}
required
/>
<input
type="number"
min="0"
className="form-control mb-3"
placeholder="Enter how many bathrooms"
value={ad.bathrooms}
onChange={(e) => setAd({ ...ad, bathrooms: e.target.value })}
required
/>
<input
type="number"
min="0"
className="form-control mb-3"
placeholder="Enter how many car parks"
value={ad.carpark}
onChange={(e) => setAd({ ...ad, carpark: e.target.value })}
/>
</>
) : (
""
)}
<input
type="text"
className="form-control mb-3"
placeholder="Size of land"
value={ad.landsize}
onChange={(e) => setAd({ ...ad, landsize: e.target.value })}
/>
<input
type="text"
className="form-control mb-3"
placeholder="Enter title"
value={ad.title}
onChange={(e) => setAd({ ...ad, title: e.target.value })}
required
/>
<textarea
className="form-control mb-3"
value={ad.description}
placeholder="Write description"
onChange={(e) => setAd({ ...ad, description: e.target.value })}
/>
<button disabled={ad.loading} className="btn btn-primary">
{ad.loading ? "Saving..." : "Submit"}
</button>
</form>
<br />
{/* <pre>{JSON.stringify(ad, null, 4)}</pre> */}
</>
);
}
Create backend route and controller to update ad
// routes/ad.js
router.put("/ad/:_id", requireSignin, ad.update);
// controllers/ad.js
export const update = async (req, res) => {
try {
// console.log("req.body update => ", req.body);
const { photos, price, type, address, description } = req.body;
let ad = await Ad.findById(req.params._id);
const owner = req.user._id == ad?.postedBy;
if (!owner) {
return res.json({ error: "Permission denied" });
} else {
//validation
if (!photos?.length) {
return res.json({ error: "Photos are required" });
}
if (!price) {
return res.json({ error: "Price is required" });
}
if (!type) {
return res.json({ error: "Is property house or land?" });
}
if (!address) {
return res.json({ error: "Address is required" });
}
if (!description) {
return res.json({ error: "Description is required" });
}
const geo = await config.GOOGLE_GEOCODER.geocode(address);
// console.log("geo => ", [geo?.[0]?.longitude, geo?.[0]?.latitude]);
await ad.update({
...req.body,
slug: ad.slug,
location: {
type: "Point",
coordinates: [geo?.[0]?.longitude, geo?.[0]?.latitude],
},
});
res.json({ ok: true });
}
} catch (err) {
console.log(err);
}
};