Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made components that create and edit item can share, started item detail changes, listings provide more views

Browse Source
This commit is contained in:
jackiettran
2025-08-20 17:06:47 -04:00
parent ddd27a59f9
commit b624841350
13 changed files with 1008 additions and 982 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
frontend/src/pages/ItemDetail.tsx
View File

@@ -88,6 +88,15 @@ const ItemDetail: React.FC = () => {
<div className="container mt-5">
<div className="row justify-content-center">
<div className="col-md-10">
{isOwner && (
<div className="d-flex justify-content-end mb-3">
<button className="btn btn-outline-primary" onClick={handleEdit}>
<i className="bi bi-pencil me-2"></i>
Edit Listing
</button>
</div>
)}
{item.images.length > 0 ? (
<div className="mb-4">
<img
@@ -117,78 +126,89 @@ const ItemDetail: React.FC = () => {
</div>
)}
<div className="row">
<div className="col-md-8">
<h1>{item.name}</h1>
<p className="text-muted">{item.location}</p>
{item.owner && (
<div
className="d-flex align-items-center mt-2 mb-3"
onClick={() => navigate(`/users/${item.ownerId}`)}
style={{ cursor: 'pointer' }}
>
{item.owner.profileImage ? (
<img
src={item.owner.profileImage}
alt={`${item.owner.firstName} ${item.owner.lastName}`}
className="rounded-circle me-2"
style={{ width: '30px', height: '30px', objectFit: 'cover' }}
/>
) : (
<div
className="rounded-circle bg-secondary d-flex align-items-center justify-content-center me-2"
style={{ width: '30px', height: '30px' }}
>
<i className="bi bi-person-fill text-white" style={{ fontSize: '0.8rem' }}></i>
</div>
)}
<span className="text-muted">{item.owner.firstName} {item.owner.lastName}</span>
</div>
)}
<div className="mb-4">
<h5>Description</h5>
<p>{item.description}</p>
</div>
<div className="mb-4">
<h5>Pricing</h5>
<div className="row">
{item.pricePerHour && (
<div className="col-6">
<strong>Per Hour:</strong> ${item.pricePerHour}
<div className="col-md-8">
{/* Item Name */}
<h1 className="mb-3">{item.name}</h1>
{/* Owner Info */}
{item.owner && (
<div
className="d-flex align-items-center mb-4"
onClick={() => navigate(`/users/${item.ownerId}`)}
style={{ cursor: 'pointer' }}
>
{item.owner.profileImage ? (
<img
src={item.owner.profileImage}
alt={`${item.owner.firstName} ${item.owner.lastName}`}
className="rounded-circle me-2"
style={{ width: '30px', height: '30px', objectFit: 'cover' }}
/>
) : (
<div
className="rounded-circle bg-secondary d-flex align-items-center justify-content-center me-2"
style={{ width: '30px', height: '30px' }}
>
<i className="bi bi-person-fill text-white" style={{ fontSize: '0.8rem' }}></i>
</div>
)}
<span className="text-muted">{item.owner.firstName} {item.owner.lastName}</span>
</div>
)}
{/* Description (no label) */}
<div className="mb-4">
<p>{item.description}</p>
</div>
)}
{item.pricePerDay && (
<div className="col-6">
<strong>Per Day:</strong> ${item.pricePerDay}
</div>
{/* Right Side - Pricing Card */}
<div className="col-md-4">
<div className="card">
<div className="card-body text-center">
{item.pricePerHour && (
<div className="mb-2">
<h4>${Math.floor(item.pricePerHour)}/Hour</h4>
</div>
)}
{item.pricePerDay && (
<div className="mb-2">
<h4>${Math.floor(item.pricePerDay)}/Day</h4>
</div>
)}
{item.pricePerWeek && (
<div className="mb-2">
<h4>${Math.floor(item.pricePerWeek)}/Week</h4>
</div>
)}
{item.pricePerMonth && (
<div className="mb-4">
<h4>${Math.floor(item.pricePerMonth)}/Month</h4>
</div>
)}
{/* Action Buttons */}
{!isOwner && item.availability && !isAlreadyRenting && (
<div className="d-grid">
<button className="btn btn-primary" onClick={handleRent}>
Rent This Item
</button>
</div>
)}
{!isOwner && isAlreadyRenting && (
<div className="d-grid">
<button className="btn btn-success" disabled style={{ opacity: 0.8 }}>
✓ Renting
</button>
</div>
)}
</div>
</div>
)}
{item.pricePerWeek && (
<div className="col-6">
<strong>Per Week:</strong> ${item.pricePerWeek}
</div>
)}
{item.pricePerMonth && (
<div className="col-6">
<strong>Per Month:</strong> ${item.pricePerMonth}
</div>
)}
</div>
</div>
</div>
<div className="mb-4">
<h5>Details</h5>
<p><strong>Replacement Cost:</strong> ${item.replacementCost}</p>
{item.minimumRentalDays && (
<p><strong>Minimum Rental:</strong> {item.minimumRentalDays} days</p>
)}
{item.maximumRentalDays && (
<p><strong>Maximum Rental:</strong> {item.maximumRentalDays} days</p>
)}
</div>
{/* Map */}
<LocationMap
latitude={item.latitude}
longitude={item.longitude}
@@ -196,6 +216,9 @@ const ItemDetail: React.FC = () => {
itemName={item.name}
/>
<ItemReviews itemId={item.id} />
{/* Rules */}
{item.rules && (
<div className="mb-4">
<h5>Rules</h5>
@@ -203,30 +226,9 @@ const ItemDetail: React.FC = () => {
</div>
)}
<ItemReviews itemId={item.id} />
<div className="d-flex gap-2 mb-5">
{isOwner ? (
<button className="btn btn-primary" onClick={handleEdit}>
Edit Listing
</button>
) : (
item.availability && !isAlreadyRenting && (
<button className="btn btn-primary" onClick={handleRent}>
Rent This Item
</button>
)
)}
{!isOwner && isAlreadyRenting && (
<button className="btn btn-success" disabled style={{ opacity: 0.8 }}>
✓ Renting
</button>
)}
<button className="btn btn-secondary" onClick={() => navigate(-1)}>
Back
</button>
</div>
</div>
{/* Replacement Cost (under Rules) */}
<div className="mb-4">
<p><strong>Replacement Cost:</strong> ${item.replacementCost}</p>
</div>
</div>
</div>