restructuring for rental requests. started double blind reviews

frontend/src/pages/MyRentals.tsx

@@ -3,15 +3,35 @@ import { Link } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { rentalAPI } from "../services/api";
 import { Rental } from "../types";
-import ReviewModal from "../components/ReviewModal";
+import ReviewItemModal from "../components/ReviewModal";
 import ConfirmationModal from "../components/ConfirmationModal";
 
 const MyRentals: React.FC = () => {
+  // Helper function to format time
+  const formatTime = (timeString?: string) => {
+    if (!timeString || timeString.trim() === "") return "";
+    try {
+      const [hour, minute] = timeString.split(":");
+      const hourNum = parseInt(hour);
+      const hour12 = hourNum === 0 ? 12 : hourNum > 12 ? hourNum - 12 : hourNum;
+      const period = hourNum < 12 ? "AM" : "PM";
+      return `${hour12}:${minute} ${period}`;
+    } catch (error) {
+      return "";
+    }
+  };
+
+  // Helper function to format date and time together
+  const formatDateTime = (dateString: string, timeString?: string) => {
+    const date = new Date(dateString).toLocaleDateString();
+    const formattedTime = formatTime(timeString);
+    return formattedTime ? `${date} at ${formattedTime}` : date;
+  };
+
   const { user } = useAuth();
   const [rentals, setRentals] = useState<Rental[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [activeTab, setActiveTab] = useState<"active" | "past">("active");
   const [showReviewModal, setShowReviewModal] = useState(false);
   const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
   const [showCancelModal, setShowCancelModal] = useState(false);
@@ -25,6 +45,10 @@ const MyRentals: React.FC = () => {
   const fetchRentals = async () => {
     try {
       const response = await rentalAPI.getMyRentals();
+      console.log("MyRentals data from backend:", response.data);
+      if (response.data.length > 0) {
+        console.log("First rental object:", response.data[0]);
+      }
       setRentals(response.data);
     } catch (err: any) {
       setError(err.response?.data?.message || "Failed to fetch rentals");
@@ -44,7 +68,7 @@ const MyRentals: React.FC = () => {
     setCancelling(true);
     try {
       await rentalAPI.updateRentalStatus(rentalToCancel, "cancelled");
-      fetchRentals(); // Refresh the list
+      fetchRentals();
       setShowCancelModal(false);
       setRentalToCancel(null);
     } catch (err: any) {
@@ -60,19 +84,14 @@ const MyRentals: React.FC = () => {
   };
 
   const handleReviewSuccess = () => {
-    fetchRentals(); // Refresh to show the review has been added
+    fetchRentals();
     alert("Thank you for your review!");
   };
 
-  // Filter rentals based on status
-  const activeRentals = rentals.filter((r) =>
+  // Filter rentals - only show active rentals (pending, confirmed, active)
+  const renterActiveRentals = rentals.filter((r) =>
     ["pending", "confirmed", "active"].includes(r.status)
   );
-  const pastRentals = rentals.filter((r) =>
-    ["completed", "cancelled"].includes(r.status)
-  );
-
-  const displayedRentals = activeTab === "active" ? activeRentals : pastRentals;
 
   if (loading) {
     return (
@@ -100,156 +119,134 @@ const MyRentals: React.FC = () => {
     <div className="container mt-4">
       <h1>My Rentals</h1>
 
-      <ul className="nav nav-tabs mb-4">
-        <li className="nav-item">
-          <button
-            className={`nav-link ${activeTab === "active" ? "active" : ""}`}
-            onClick={() => setActiveTab("active")}
-          >
-            Active Rentals ({activeRentals.length})
-          </button>
-        </li>
-        <li className="nav-item">
-          <button
-            className={`nav-link ${activeTab === "past" ? "active" : ""}`}
-            onClick={() => setActiveTab("past")}
-          >
-            Past Rentals ({pastRentals.length})
-          </button>
-        </li>
-      </ul>
-
-      {displayedRentals.length === 0 ? (
+      {renterActiveRentals.length === 0 ? (
         <div className="text-center py-5">
-          <p className="text-muted">
-            {activeTab === "active"
-              ? "You don't have any active rentals."
-              : "You don't have any past rentals."}
-          </p>
-          <Link to="/items" className="btn btn-primary mt-3">
+          <h5 className="text-muted">No Active Rental Requests</h5>
+          <p className="text-muted">You don't have any rental requests at the moment.</p>
+          <Link to="/items" className="btn btn-primary">
             Browse Items to Rent
           </Link>
         </div>
       ) : (
         <div className="row">
-          {displayedRentals.map((rental) => (
-            <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
-              <Link
-                to={rental.item ? `/items/${rental.item.id}` : "#"}
-                className="text-decoration-none"
-                onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
-                  const target = e.target as HTMLElement;
-                  if (!rental.item || target.closest("button")) {
-                    e.preventDefault();
-                  }
-                }}
-              >
-                <div
-                  className="card h-100"
-                  style={{ cursor: rental.item ? "pointer" : "default" }}
+          {renterActiveRentals.map((rental) => (
+              <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
+                <Link
+                  to={rental.item ? `/items/${rental.item.id}` : "#"}
+                  className="text-decoration-none"
+                  onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                    const target = e.target as HTMLElement;
+                    if (!rental.item || target.closest("button")) {
+                      e.preventDefault();
+                    }
+                  }}
                 >
-                  {rental.item?.images && rental.item.images[0] && (
-                    <img
-                      src={rental.item.images[0]}
-                      className="card-img-top"
-                      alt={rental.item.name}
-                      style={{ height: "200px", objectFit: "cover" }}
-                    />
-                  )}
-                  <div className="card-body">
-                    <h5 className="card-title text-dark">
-                      {rental.item ? rental.item.name : "Item Unavailable"}
-                    </h5>
-
-                    <div className="mb-2">
-                      <span
-                        className={`badge ${
-                          rental.status === "active"
-                            ? "bg-success"
-                            : rental.status === "pending"
-                            ? "bg-warning"
-                            : rental.status === "confirmed"
-                            ? "bg-info"
-                            : rental.status === "completed"
-                            ? "bg-secondary"
-                            : "bg-danger"
-                        }`}
-                      >
-                        {rental.status.charAt(0).toUpperCase() +
-                          rental.status.slice(1)}
-                      </span>
-                      {rental.paymentStatus === "paid" && (
-                        <span className="badge bg-success ms-2">Paid</span>
-                      )}
-                    </div>
-
-                    <p className="mb-1 text-dark">
-                      <strong>Rental Period:</strong>
-                      <br />
-                      {new Date(rental.startDate).toLocaleDateString()} -{" "}
-                      {new Date(rental.endDate).toLocaleDateString()}
-                    </p>
-
-                    <p className="mb-1 text-dark">
-                      <strong>Total:</strong> ${rental.totalAmount}
-                    </p>
-
-                    <p className="mb-1 text-dark">
-                      <strong>Delivery:</strong>{" "}
-                      {rental.deliveryMethod === "pickup"
-                        ? "Pick-up"
-                        : "Delivery"}
-                    </p>
-
-                    {rental.owner && (
-                      <p className="mb-1 text-dark">
-                        <strong>Owner:</strong> {rental.owner.firstName}{" "}
-                        {rental.owner.lastName}
-                      </p>
+                  <div className="card h-100" style={{ cursor: rental.item ? "pointer" : "default" }}>
+                    {rental.item?.images && rental.item.images[0] && (
+                      <img
+                        src={rental.item.images[0]}
+                        className="card-img-top"
+                        alt={rental.item.name}
+                        style={{ height: "200px", objectFit: "cover" }}
+                      />
                     )}
+                    <div className="card-body">
+                      <h5 className="card-title text-dark">
+                        {rental.item ? rental.item.name : "Item Unavailable"}
+                      </h5>
 
-                    {rental.status === "cancelled" &&
-                      rental.rejectionReason && (
+                      <div className="mb-2">
+                        <span className={`badge ${
+                          rental.status === "active" ? "bg-success" :
+                          rental.status === "pending" ? "bg-warning" :
+                          rental.status === "confirmed" ? "bg-info" : "bg-danger"
+                        }`}>
+                          {rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
+                        </span>
+                        {rental.paymentStatus === "paid" && (
+                          <span className="badge bg-success ms-2">Paid</span>
+                        )}
+                      </div>
+
+                      <p className="mb-1 text-dark">
+                        <strong>Rental Period:</strong>
+                        <br />
+                        <strong>Start:</strong> {formatDateTime(rental.startDate, rental.startTime)}
+                        <br />
+                        <strong>End:</strong> {formatDateTime(rental.endDate, rental.endTime)}
+                      </p>
+
+                      <p className="mb-1 text-dark">
+                        <strong>Total:</strong> ${rental.totalAmount}
+                      </p>
+
+                      {rental.owner && (
+                        <p className="mb-1 text-dark">
+                          <strong>Owner:</strong> {rental.owner.firstName} {rental.owner.lastName}
+                        </p>
+                      )}
+
+                      {rental.renterPrivateMessage && rental.renterReviewVisible && (
+                        <div className="alert alert-info mt-2 mb-2 p-2 small">
+                          <strong><i className="bi bi-envelope-fill me-1"></i>Private Note from Owner:</strong>
+                          <br />
+                          {rental.renterPrivateMessage}
+                        </div>
+                      )}
+
+                      {rental.status === "cancelled" && rental.rejectionReason && (
                         <div className="alert alert-warning mt-2 mb-1 p-2 small">
-                          <strong>Rejection reason:</strong>{" "}
-                          {rental.rejectionReason}
+                          <strong>Rejection reason:</strong> {rental.rejectionReason}
                         </div>
                       )}
 
-                    <div className="d-flex gap-2 mt-3">
-                      {rental.status === "pending" && (
-                        <button
-                          className="btn btn-sm btn-danger"
-                          onClick={() => handleCancelClick(rental.id)}
-                        >
-                          Cancel
-                        </button>
-                      )}
-                      {rental.status === "completed" && !rental.rating && (
-                        <button
-                          className="btn btn-sm btn-primary"
-                          onClick={() => handleReviewClick(rental)}
-                        >
-                          Leave Review
-                        </button>
-                      )}
-                      {rental.status === "completed" && rental.rating && (
-                        <div className="text-success small">
-                          <i className="bi bi-check-circle-fill me-1"></i>
-                          Reviewed ({rental.rating}/5)
-                        </div>
-                      )}
+                      <div className="d-flex gap-2 mt-3">
+                        {rental.status === "pending" && (
+                          <button
+                            className="btn btn-sm btn-danger"
+                            onClick={() => handleCancelClick(rental.id)}
+                          >
+                            Cancel
+                          </button>
+                        )}
+                        {rental.status === "active" && !rental.itemRating && !rental.itemReviewSubmittedAt && (
+                          <button
+                            className="btn btn-sm btn-primary"
+                            onClick={() => handleReviewClick(rental)}
+                          >
+                            Review
+                          </button>
+                        )}
+                        {rental.itemReviewSubmittedAt && !rental.itemReviewVisible && (
+                          <div className="text-info small">
+                            <i className="bi bi-clock me-1"></i>
+                            Review Submitted
+                          </div>
+                        )}
+                        {rental.itemReviewVisible && rental.itemRating && (
+                          <div className="text-success small">
+                            <i className="bi bi-check-circle-fill me-1"></i>
+                            Review Published ({rental.itemRating}/5)
+                          </div>
+                        )}
+                        {rental.status === "completed" && rental.rating && !rental.itemRating && (
+                          <div className="text-success small">
+                            <i className="bi bi-check-circle-fill me-1"></i>
+                            Reviewed ({rental.rating}/5)
+                          </div>
+                        )}
+                      </div>
                     </div>
                   </div>
-                </div>
-              </Link>
-            </div>
-          ))}
+                </Link>
+              </div>
+            ))}
         </div>
       )}
 
+      {/* Review Modal */}
       {selectedRental && (
-        <ReviewModal
+        <ReviewItemModal
           show={showReviewModal}
           onClose={() => {
             setShowReviewModal(false);
@@ -278,4 +275,4 @@ const MyRentals: React.FC = () => {
   );
 };
 
-export default MyRentals;
+export default MyRentals;