From e20e33a0f68530c14f9e26bb51a70e4f587dd0a8 Mon Sep 17 00:00:00 2001
From: jackiettran <41605212+jackiettran@users.noreply.github.com>
Date: Fri, 7 Nov 2025 13:34:24 -0500
Subject: [PATCH] updated links

---
 frontend/src/components/ItemReviews.tsx | 10 ++++++++--
 frontend/src/pages/Owning.tsx           |  9 +++++++--
 frontend/src/pages/Profile.tsx          | 18 ++++++++++++++----
 frontend/src/pages/Renting.tsx          | 12 +++++++++---
 4 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ItemReviews.tsx b/frontend/src/components/ItemReviews.tsx
index a39f83a..2612c57 100644
--- a/frontend/src/components/ItemReviews.tsx
+++ b/frontend/src/components/ItemReviews.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { Rental } from "../types";
 import { itemAPI } from "../services/api";
 
@@ -7,6 +8,7 @@ interface ItemReviewsProps {
 }
 
 const ItemReviews: React.FC<ItemReviewsProps> = ({ itemId }) => {
+  const navigate = useNavigate();
   const [reviews, setReviews] = useState<Rental[]>([]);
   const [loading, setLoading] = useState(true);
   const [averageRating, setAverageRating] = useState(0);
@@ -78,7 +80,11 @@ const ItemReviews: React.FC<ItemReviewsProps> = ({ itemId }) => {
               <div key={rental.id} className="mb-3 pb-3 border-bottom">
                 <div className="d-flex justify-content-between align-items-start mb-2">
                   <div>
-                    <div className="d-flex align-items-center gap-2">
+                    <div
+                      className="d-flex align-items-center gap-2"
+                      onClick={() => rental.renter && navigate(`/users/${rental.renterId}`)}
+                      style={{ cursor: "pointer" }}
+                    >
                       {rental.renter?.profileImage ? (
                         <img
                           src={rental.renter.profileImage}
@@ -102,7 +108,7 @@ const ItemReviews: React.FC<ItemReviewsProps> = ({ itemId }) => {
                         </div>
                       )}
                       <div>
-                        <strong>
+                        <strong style={{ color: "#0d6efd" }}>
                           {rental.renter?.firstName} {rental.renter?.lastName}
                         </strong>
                         <div className="small">
diff --git a/frontend/src/pages/Owning.tsx b/frontend/src/pages/Owning.tsx
index 6b082c0..cd6a292 100644
--- a/frontend/src/pages/Owning.tsx
+++ b/frontend/src/pages/Owning.tsx
@@ -321,8 +321,13 @@ const Owning: React.FC = () => {
 
                     {rental.renter && (
                       <p className="mb-1 text-dark small">
-                        <strong>Renter:</strong> {rental.renter.firstName}{" "}
-                        {rental.renter.lastName}
+                        <strong>Renter:</strong>{" "}
+                        <span
+                          onClick={() => navigate(`/users/${rental.renterId}`)}
+                          style={{ cursor: "pointer" }}
+                        >
+                          {rental.renter.firstName} {rental.renter.lastName}
+                        </span>
                       </p>
                     )}
 
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 2d8a08d..1e286f2 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { userAPI, itemAPI, rentalAPI, addressAPI } from "../services/api";
 import { User, Item, Rental, Address } from "../types";
@@ -14,6 +15,7 @@ import {
 
 const Profile: React.FC = () => {
   const { user, updateUser, logout } = useAuth();
+  const navigate = useNavigate();
   const [loading, setLoading] = useState(true);
   const [editing, setEditing] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -970,8 +972,12 @@ const Profile: React.FC = () => {
                                 {rental.owner && (
                                   <p className="mb-1 small">
                                     <strong>Owner:</strong>{" "}
-                                    {rental.owner.firstName}{" "}
-                                    {rental.owner.lastName}
+                                    <span
+                                      onClick={() => navigate(`/users/${rental.ownerId}`)}
+                                      style={{ cursor: "pointer" }}
+                                    >
+                                      {rental.owner.firstName} {rental.owner.lastName}
+                                    </span>
                                   </p>
                                 )}
 
@@ -1071,8 +1077,12 @@ const Profile: React.FC = () => {
                                 {rental.renter && (
                                   <p className="mb-1 small">
                                     <strong>Renter:</strong>{" "}
-                                    {rental.renter.firstName}{" "}
-                                    {rental.renter.lastName}
+                                    <span
+                                      onClick={() => navigate(`/users/${rental.renterId}`)}
+                                      style={{ cursor: "pointer" }}
+                                    >
+                                      {rental.renter.firstName} {rental.renter.lastName}
+                                    </span>
                                   </p>
                                 )}
 
diff --git a/frontend/src/pages/Renting.tsx b/frontend/src/pages/Renting.tsx
index 895d9a1..2479e65 100644
--- a/frontend/src/pages/Renting.tsx
+++ b/frontend/src/pages/Renting.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
 import { rentalAPI, conditionCheckAPI } from "../services/api";
 import { Rental } from "../types";
@@ -38,6 +38,7 @@ const Renting: React.FC = () => {
   };
 
   const { user } = useAuth();
+  const navigate = useNavigate();
   const [rentals, setRentals] = useState<Rental[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -282,8 +283,13 @@ const Renting: React.FC = () => {
 
                     {rental.owner && (
                       <p className="mb-1 text-dark">
-                        <strong>Owner:</strong> {rental.owner.firstName}{" "}
-                        {rental.owner.lastName}
+                        <strong>Owner:</strong>{" "}
+                        <span
+                          onClick={() => navigate(`/users/${rental.ownerId}`)}
+                          style={{ cursor: "pointer" }}
+                        >
+                          {rental.owner.firstName} {rental.owner.lastName}
+                        </span>
                       </p>
                     )}