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

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={{