imageFilenames and imageFilename, backend integration tests, frontend tests, removed username references

frontend/src/pages/EditItem.tsx

@@ -162,8 +162,8 @@ const EditItem: React.FC = () => {
       });
 
       // Set existing images as previews
-      if (item.images && item.images.length > 0) {
-        setImagePreviews(item.images);
+      if (item.imageFilenames && item.imageFilenames.length > 0) {
+        setImagePreviews(item.imageFilenames);
       }
 
       // Determine which pricing unit to select based on existing data

frontend/src/pages/ForumPostDetail.tsx

@@ -343,9 +343,9 @@ const ForumPostDetail: React.FC = () => {
                 {post.content}
               </div>
 
-              {post.images && post.images.length > 0 && (
+              {post.imageFilenames && post.imageFilenames.length > 0 && (
                 <div className="row g-2 mb-3">
-                  {post.images.map((image, index) => (
+                  {post.imageFilenames.map((image, index) => (
                     <div key={index} className="col-6 col-md-4">
                       <img
                         src={getForumImageUrl(image)}

frontend/src/pages/ItemDetail.tsx

@@ -414,10 +414,10 @@ const ItemDetail: React.FC = () => {
           <div className="row">
             <div className="col-md-8">
               {/* Images */}
-              {item.images.length > 0 ? (
+              {item.imageFilenames.length > 0 ? (
                 <div className="mb-4">
                   <img
-                    src={item.images[selectedImage]}
+                    src={item.imageFilenames[selectedImage]}
                     alt={item.name}
                     className="img-fluid rounded mb-3"
                     style={{
@@ -426,9 +426,9 @@ const ItemDetail: React.FC = () => {
                       objectFit: "cover",
                     }}
                   />
-                  {item.images.length > 1 && (
+                  {item.imageFilenames.length > 1 && (
                     <div className="d-flex gap-2 overflow-auto justify-content-center">
-                      {item.images.map((image, index) => (
+                      {item.imageFilenames.map((image, index) => (
                         <img
                           key={index}
                           src={image}
@@ -478,9 +478,9 @@ const ItemDetail: React.FC = () => {
                   onClick={() => navigate(`/users/${item.ownerId}`)}
                   style={{ cursor: "pointer" }}
                 >
-                  {item.owner.profileImage ? (
+                  {item.owner.imageFilename ? (
                     <img
-                      src={item.owner.profileImage}
+                      src={item.owner.imageFilename}
                       alt={`${item.owner.firstName} ${item.owner.lastName}`}
                       className="rounded-circle me-2"
                       style={{

frontend/src/pages/Messages.tsx

@@ -230,9 +230,9 @@ const Messages: React.FC = () => {
                     <div className="d-flex w-100 justify-content-between align-items-start">
                       <div className="d-flex align-items-center flex-grow-1">
                         {/* Profile Picture */}
-                        {conversation.partner.profileImage ? (
+                        {conversation.partner.imageFilename ? (
                           <img
-                            src={conversation.partner.profileImage}
+                            src={conversation.partner.imageFilename}
                             alt={`${conversation.partner.firstName} ${conversation.partner.lastName}`}
                             className="rounded-circle me-3"
                             style={{

frontend/src/pages/Owning.tsx

@@ -306,9 +306,9 @@ const Owning: React.FC = () => {
             {allOwnerRentals.map((rental) => (
               <div key={rental.id} className="col-md-6 col-lg-4 mb-4">
                 <div className="card h-100">
-                  {rental.item?.images && rental.item.images[0] && (
+                  {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                     <img
-                      src={rental.item.images[0]}
+                      src={rental.item.imageFilenames[0]}
                       className="card-img-top"
                       alt={rental.item.name}
                       style={{ height: "200px", objectFit: "cover" }}
@@ -527,9 +527,9 @@ const Owning: React.FC = () => {
                   navigate(`/items/${item.id}`);
                 }}
               >
-                {item.images && item.images[0] && (
+                {item.imageFilenames && item.imageFilenames[0] && (
                   <img
-                    src={item.images[0]}
+                    src={item.imageFilenames[0]}
                     className="card-img-top"
                     alt={item.name}
                     style={{ height: "200px", objectFit: "cover" }}

frontend/src/pages/Profile.tsx

@@ -39,7 +39,7 @@ const Profile: React.FC = () => {
     state: string;
     zipCode: string;
     country: string;
-    profileImage: string;
+    imageFilename: string;
     itemRequestNotificationRadius: number | null;
   }>({
     firstName: "",
@@ -52,7 +52,7 @@ const Profile: React.FC = () => {
     state: "",
     zipCode: "",
     country: "",
-    profileImage: "",
+    imageFilename: "",
     itemRequestNotificationRadius: 10,
   });
   const [imageFile, setImageFile] = useState<File | null>(null);
@@ -156,12 +156,12 @@ const Profile: React.FC = () => {
         state: response.data.state || "",
         zipCode: response.data.zipCode || "",
         country: response.data.country || "",
-        profileImage: response.data.profileImage || "",
+        imageFilename: response.data.imageFilename || "",
         itemRequestNotificationRadius:
           response.data.itemRequestNotificationRadius || 10,
       });
-      if (response.data.profileImage) {
-        setImagePreview(getImageUrl(response.data.profileImage));
+      if (response.data.imageFilename) {
+        setImagePreview(getImageUrl(response.data.imageFilename));
       }
     } catch (err: any) {
       setError(err.response?.data?.message || "Failed to fetch profile");
@@ -304,14 +304,14 @@ const Profile: React.FC = () => {
       // Upload image immediately
       try {
         const formData = new FormData();
-        formData.append("profileImage", file);
+        formData.append("imageFilename", file);
 
         const response = await userAPI.uploadProfileImage(formData);
 
-        // Update the profileImage in formData with the new filename
+        // Update the imageFilename in formData with the new filename
         setFormData((prev) => ({
           ...prev,
-          profileImage: response.data.filename,
+          imageFilename: response.data.filename,
         }));
 
         // Update preview to use the uploaded image URL
@@ -322,8 +322,8 @@ const Profile: React.FC = () => {
         // Reset on error
         setImageFile(null);
         setImagePreview(
-          profileData?.profileImage
-            ? getImageUrl(profileData.profileImage)
+          profileData?.imageFilename
+            ? getImageUrl(profileData.imageFilename)
             : null
         );
       }
@@ -336,8 +336,8 @@ const Profile: React.FC = () => {
     setSuccess(null);
 
     try {
-      // Don't send profileImage in the update data as it's handled separately
-      const { profileImage, ...updateData } = formData;
+      // Don't send imageFilename in the update data as it's handled separately
+      const { imageFilename, ...updateData } = formData;
 
       const response = await userAPI.updateProfile(updateData);
       setProfileData(response.data);
@@ -379,12 +379,12 @@ const Profile: React.FC = () => {
         state: profileData.state || "",
         zipCode: profileData.zipCode || "",
         country: profileData.country || "",
-        profileImage: profileData.profileImage || "",
+        imageFilename: profileData.imageFilename || "",
         itemRequestNotificationRadius:
           profileData.itemRequestNotificationRadius || 10,
       });
       setImagePreview(
-        profileData.profileImage ? getImageUrl(profileData.profileImage) : null
+        profileData.imageFilename ? getImageUrl(profileData.imageFilename) : null
       );
     }
   };
@@ -774,7 +774,7 @@ const Profile: React.FC = () => {
                       )}
                       {editing && (
                         <label
-                          htmlFor="profileImageOverview"
+                          htmlFor="imageFilenameOverview"
                           className="position-absolute bottom-0 end-0 btn btn-sm btn-primary rounded-circle"
                           style={{
                             width: "35px",
@@ -785,7 +785,7 @@ const Profile: React.FC = () => {
                           <i className="bi bi-camera-fill"></i>
                           <input
                             type="file"
-                            id="profileImageOverview"
+                            id="imageFilenameOverview"
                             accept="image/*"
                             onChange={handleImageChange}
                             className="d-none"
@@ -1222,9 +1222,9 @@ const Profile: React.FC = () => {
                             className="col-md-6 col-lg-4 mb-4"
                           >
                             <div className="card h-100">
-                              {rental.item?.images && rental.item.images[0] && (
+                              {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                                 <img
-                                  src={rental.item.images[0]}
+                                  src={rental.item.imageFilenames[0]}
                                   className="card-img-top"
                                   alt={rental.item.name}
                                   style={{
@@ -1359,9 +1359,9 @@ const Profile: React.FC = () => {
                             className="col-md-6 col-lg-4 mb-4"
                           >
                             <div className="card h-100">
-                              {rental.item?.images && rental.item.images[0] && (
+                              {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                                 <img
-                                  src={rental.item.images[0]}
+                                  src={rental.item.imageFilenames[0]}
                                   className="card-img-top"
                                   alt={rental.item.name}
                                   style={{

frontend/src/pages/PublicProfile.tsx

@@ -71,9 +71,9 @@ const PublicProfile: React.FC = () => {
           <div className="card">
             <div className="card-body">
               <div className="text-center mb-4">
-                {user.profileImage ? (
+                {user.imageFilename ? (
                   <img
-                    src={user.profileImage}
+                    src={user.imageFilename}
                     alt={`${user.firstName} ${user.lastName}`}
                     className="rounded-circle mb-3"
                     style={{ width: '150px', height: '150px', objectFit: 'cover' }}
@@ -111,9 +111,9 @@ const PublicProfile: React.FC = () => {
                         onClick={() => navigate(`/items/${item.id}`)}
                         style={{ cursor: 'pointer' }}
                       >
-                        {item.images.length > 0 ? (
+                        {item.imageFilenames.length > 0 ? (
                           <img
-                            src={item.images[0]}
+                            src={item.imageFilenames[0]}
                             className="card-img-top"
                             alt={item.name}
                             style={{ height: '200px', objectFit: 'cover' }}

frontend/src/pages/RentItem.tsx

@@ -341,9 +341,9 @@ const RentItem: React.FC = () => {
             <div className="col-md-4">
               <div className="card">
                 <div className="card-body">
-                  {item.images && item.images[0] && (
+                  {item.imageFilenames && item.imageFilenames[0] && (
                     <img
-                      src={item.images[0]}
+                      src={item.imageFilenames[0]}
                       alt={item.name}
                       className="img-fluid rounded mb-3"
                       style={{

frontend/src/pages/Renting.tsx

@@ -230,9 +230,9 @@ const Renting: React.FC = () => {
                   className="card h-100"
                   style={{ cursor: rental.item ? "pointer" : "default" }}
                 >
-                  {rental.item?.images && rental.item.images[0] && (
+                  {rental.item?.imageFilenames && rental.item.imageFilenames[0] && (
                     <img
-                      src={rental.item.images[0]}
+                      src={rental.item.imageFilenames[0]}
                       className="card-img-top"
                       alt={rental.item.name}
                       style={{ height: "200px", objectFit: "cover" }}