moved private information, test fixes
This commit is contained in:
jackiettran
@@ -40,6 +40,7 @@ const Profile: React.FC = () => {
|
||||
acceptedRentals: 0,
|
||||
totalRentals: 0,
|
||||
});
|
||||
const [showPersonalInfo, setShowPersonalInfo] = useState(false);
|
||||
const [availabilityData, setAvailabilityData] = useState({
|
||||
generalAvailableAfter: "09:00",
|
||||
generalAvailableBefore: "17:00",
|
||||
@@ -196,14 +197,14 @@ const Profile: React.FC = () => {
|
||||
// Fetch past rentals as a renter
|
||||
const renterResponse = await rentalAPI.getRentals();
|
||||
const pastRenterRentals = renterResponse.data.filter((r: Rental) =>
|
||||
["completed", "cancelled"].includes(r.status)
|
||||
["completed", "cancelled", "declined"].includes(r.status)
|
||||
);
|
||||
setPastRenterRentals(pastRenterRentals);
|
||||
|
||||
// Fetch past rentals as an owner
|
||||
const ownerResponse = await rentalAPI.getListings();
|
||||
const pastOwnerRentals = ownerResponse.data.filter((r: Rental) =>
|
||||
["completed", "cancelled"].includes(r.status)
|
||||
["completed", "cancelled", "declined"].includes(r.status)
|
||||
);
|
||||
setPastOwnerRentals(pastOwnerRentals);
|
||||
} catch (err) {
|
||||
@@ -655,15 +656,6 @@ const Profile: React.FC = () => {
|
||||
<i className="bi bi-clock-history me-2"></i>
|
||||
Rental History
|
||||
</button>
|
||||
<button
|
||||
className={`list-group-item list-group-item-action ${
|
||||
activeSection === "personal-info" ? "active" : ""
|
||||
}`}
|
||||
onClick={() => setActiveSection("personal-info")}
|
||||
>
|
||||
<i className="bi bi-person me-2"></i>
|
||||
Personal Information
|
||||
</button>
|
||||
<button
|
||||
className="list-group-item list-group-item-action text-danger"
|
||||
onClick={logout}
|
||||
@@ -794,6 +786,80 @@ const Profile: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Personal Information Card */}
|
||||
<div className="card mb-4">
|
||||
<div className="card-body">
|
||||
<div className="d-flex align-items-center mb-3">
|
||||
<h5 className="card-title mb-0">Personal Information</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link text-primary p-0 ms-2"
|
||||
onClick={() => setShowPersonalInfo(!showPersonalInfo)}
|
||||
style={{ textDecoration: 'none' }}
|
||||
>
|
||||
<i className={`bi ${showPersonalInfo ? 'bi-eye' : 'bi-eye-slash'} fs-5`}></i>
|
||||
</button>
|
||||
</div>
|
||||
{showPersonalInfo && (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
disabled={!editing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="phone" className="form-label">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="form-control"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="(123) 456-7890"
|
||||
disabled={!editing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
<div className="d-flex gap-2">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save Changes
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
Edit Information
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Card */}
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
@@ -877,6 +943,8 @@ const Profile: React.FC = () => {
|
||||
className={`badge ${
|
||||
rental.status === "completed"
|
||||
? "bg-success"
|
||||
: rental.status === "declined"
|
||||
? "bg-secondary"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
@@ -1013,6 +1081,8 @@ const Profile: React.FC = () => {
|
||||
className={`badge ${
|
||||
rental.status === "completed"
|
||||
? "bg-success"
|
||||
: rental.status === "declined"
|
||||
? "bg-secondary"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
@@ -1095,72 +1165,6 @@ const Profile: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Personal Information Section */}
|
||||
{activeSection === "personal-info" && (
|
||||
<div>
|
||||
<h4 className="mb-4">Personal Information</h4>
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-3">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
disabled={!editing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label htmlFor="phone" className="form-label">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
className="form-control"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder="(123) 456-7890"
|
||||
disabled={!editing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
<div className="d-flex gap-2">
|
||||
<button type="submit" className="btn btn-primary">
|
||||
Save Changes
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary"
|
||||
onClick={handleCancel}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setEditing(true)}
|
||||
>
|
||||
Edit Information
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Owner Settings Section */}
|
||||
{activeSection === "owner-settings" && (
|
||||
<div>
|
||||
|
||||
@@ -379,8 +379,13 @@ const RentItem: React.FC = () => {
|
||||
<div className="d-flex justify-content-between">
|
||||
<strong>Total:</strong>
|
||||
{costLoading ? (
|
||||
<div className="spinner-border spinner-border-sm" role="status">
|
||||
<span className="visually-hidden">Calculating...</span>
|
||||
<div
|
||||
className="spinner-border spinner-border-sm"
|
||||
role="status"
|
||||
>
|
||||
<span className="visually-hidden">
|
||||
Calculating...
|
||||
</span>
|
||||
</div>
|
||||
) : costError ? (
|
||||
<small className="text-danger">Error</small>
|
||||
|
||||
@@ -170,9 +170,9 @@ const Renting: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// Filter rentals - show active and declined rentals
|
||||
// Filter rentals - show only active rentals (declined go to history)
|
||||
const renterActiveRentals = rentals.filter((r) =>
|
||||
["pending", "confirmed", "declined", "active"].includes(r.status)
|
||||
["pending", "confirmed", "active"].includes(r.status)
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
@@ -199,7 +199,7 @@ const Renting: React.FC = () => {
|
||||
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<h1>My Rentals</h1>
|
||||
<h1>Rentals</h1>
|
||||
|
||||
{renterActiveRentals.length === 0 ? (
|
||||
<div className="text-center py-5">
|
||||
@@ -301,8 +301,7 @@ const Renting: React.FC = () => {
|
||||
|
||||
{rental.status === "declined" && rental.declineReason && (
|
||||
<div className="alert alert-warning mt-2 mb-1 p-2 small">
|
||||
<strong>Decline reason:</strong>{" "}
|
||||
{rental.declineReason}
|
||||
<strong>Decline reason:</strong> {rental.declineReason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user