Skip to content

Commit

Permalink
fix views in PropertyDetail
Browse files Browse the repository at this point in the history
  • Loading branch information
@sssomeshhh
sssomeshhh committed May 27, 2024
1 parent 5a1a2da commit cb5fef2
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 69 deletions.
4 changes: 4 additions & 0 deletions fe/src/components/PropertyAdd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,13 @@ const PropertyAdd = () => {
apiRequest('PUT', '/property', { data: form, headers: { ...getAuthHeader() } })
.then((res) => {
console.log('Property added!', res.data);
alert('Property added!');
location.href = location.origin + '/property/list';
})
.catch((err) => {
console.error('There was an error adding the property!', err);
alert('There was an error adding the property!');
location.href = location.origin + '/property/list';
});
};

Expand Down
171 changes: 102 additions & 69 deletions fe/src/components/PropertyDetail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import Header from "./Header";
const PropertyDetail = () => {
const [detail, setDetail] = useState([]);

const [whichView, setWhichView] = useState('show');

const getDetail = () => {
apiRequest('GET', location.pathname, { headers: { ...getAuthHeader() } })
.then((res) => {
Expand All @@ -24,16 +26,14 @@ const PropertyDetail = () => {
const handleLike = () => {
};

const handleInterested = () => {
return (
<div>
<p>Name: {detail.user.firstName} {detail.user.lastName}</p>
<br />
<p>Email Address: {detail.user.email}</p>
<br />
<p>Phone Number: {detail.user.phoneNumber}</p>
</div>
);
const handleInterested = (e) => {
e.preventDefault();
if (sessionStorage.getItem('role') == null) {
alert('Please Login!');
location.href = location.origin + '/login';
}
setWhichView("user");
//location.reload();
};

const handleChange = (e) => {
Expand All @@ -43,56 +43,35 @@ const PropertyDetail = () => {
});
};

const handleSubmit = (e) => {
const handleUpdate = (e) => {
e.preventDefault();
apiRequest('POST', location.pathname, { data: detail, headers: { ...getAuthHeader() } })
.then((res) => {
console.log('Property updated!', res.data);
console.log("Property updated!", res.data);
alert("Property updated!");
setWhichView("show");
location.reload();
})
.catch((err) => {
console.error('There was an error updating the property!', err);
console.error("There was an error updating the property!", err);
alert("There was an error updating the property!");
setWhichView("show");
location.reload();
});
};

useEffect(() => {
getDetail();
}, []);

const editProperty = () => {
return (
<form onSubmit={handleSubmit}>
<div>
<label>Title:</label>
<input type="text" name="title" value={detail.title} onChange={handleChange} />
</div>
<div>
<label>Description:</label>
<input type="text" name="description" value={detail.description} onChange={handleChange} />
</div>
<div>
<label>Location:</label>
<input type="text" name="location" value={detail.location} onChange={handleChange} />
</div>
<div>
<label>Bedrooms:</label>
<input type="number" name="bedrooms" value={detail.bedrooms} onChange={handleChange} />
</div>
<div>
<label>Bathrooms:</label>
<input type="number" name="bathrooms" value={detail.bathrooms} onChange={handleChange} />
</div>
<div>
<label>Rent:</label>
<input type="number" name="rent" value={detail.rent} onChange={handleChange} />
</div>
<button type="submit">Update</button>
</form>
);
const handleEdit = () => {
setWhichView("edit");
//location.reload();
};

const deleteProperty = (e) => {
const handleDelete = (e) => {
e.preventDefault();
apiRequest('DELETE', location.pathname, { headers: { ...getAuthHeader() } })
apiRequest("DELETE", location.pathname, { headers: { ...getAuthHeader() } })
.then((res) => {
console.log("Property deleted!", res.data);
alert("Property deleted!");
Expand All @@ -105,35 +84,89 @@ const PropertyDetail = () => {
});
};

return (
<div>
<Header />
<p>Title: {detail.title}</p>
<br />
<p>Description: {detail.description}</p>
<br />
<p>Location: {detail.location}</p>
<br />
<p>Bedrooms: {detail.bedrooms}</p>
<br />
<p>Bathrooms: {detail.bathrooms}</p>
<br />
<p>Rent: {detail.rent}</p>
<br />
{ (sessionStorage.getItem('role') === 'buyer')
? (
const renderView = () => {
if (whichView === 'show') {
return (
<div>
<p>Title: {detail.title}</p>
<br />
<p>Description: {detail.description}</p>
<br />
<p>Location: {detail.location}</p>
<br />
<p>Bedrooms: {detail.bedrooms}</p>
<br />
<p>Bathrooms: {detail.bathrooms}</p>
<br />
<p>Rent: {detail.rent}</p>
<br />
{(sessionStorage.getItem("role") === "seller")
? (
<div>
<button className="editproperty" onClick={handleEdit}>Edit</button>
<button className="deleteproperty" onClick={handleDelete}>Delete</button>
</div>
)
: (
<div>
<button className="likebutton" onClick={handleLike}>Like</button>
<button className="interestedbutton" onClick={handleInterested}>Interested</button>
</div>
)
}
</div>
);
} else {
if (whichView === "edit") {
return (
<div>
<button className="likebutton" onClick={handleLike}>Like</button>
<button className="interestedbutton" onClick={handleInterested}>Interested</button>
<form onSubmit={handleUpdate}>
<div>
<label>Title:</label>
<input type="text" name="title" value={detail.title} onChange={handleChange} />
</div>
<div>
<label>Description:</label>
<input type="text" name="description" value={detail.description} onChange={handleChange} />
</div>
<div>
<label>Location:</label>
<input type="text" name="location" value={detail.location} onChange={handleChange} />
</div>
<div>
<label>Bedrooms:</label>
<input type="number" name="bedrooms" value={detail.bedrooms} onChange={handleChange} />
</div>
<div>
<label>Bathrooms:</label>
<input type="number" name="bathrooms" value={detail.bathrooms} onChange={handleChange} />
</div>
<div>
<label>Rent:</label>
<input type="number" name="rent" value={detail.rent} onChange={handleChange} />
</div>
<button type="submit">Update</button>
</form>
</div>
)
: (
);
} else {
return (
<div>
<button className="editproperty" onClick={editProperty}>Edit</button>
<button className="deleteproperty" onClick={deleteProperty}>Delete</button>
<p>Name: {detail.seller.firstName} {detail.seller.lastName}</p>
<br />
<p>Email Address: {detail.seller.email}</p>
<br />
<p>Phone Number: {detail.seller.phoneNumber}</p>
</div>
)
);
}
}
}

return (
<div>
<Header />
{renderView()}
</div>
);
};
Expand Down

0 comments on commit cb5fef2

Please sign in to comment.