Merge pull request #85 from sympoll/fix-upload-user-pictures

Fix upload user pictures and more
sympoll · Sep 8, 2024 · 5c5cbca · 5c5cbca
2 parents ef35c09 + 5618b0d
commit 5c5cbca
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 33 deletions.
diff --git a/src/cmps/feed/poll/Poll.tsx b/src/cmps/feed/poll/Poll.tsx
@@ -26,6 +26,7 @@ import { useUser } from "../../../context/UserContext";
 import DeletePollButton from "../../global/DeletePollButton";
 import { useMembers } from "../../../context/MemebersContext";
 import { UserRoleName } from "../../../models/enum/UserRoleName.enum";
+import { fetchPicture } from "../../../services/media.service";
 
 interface PollProps {
   pollId: string;
@@ -186,9 +187,7 @@ export default function Poll({
           <div className="poll-info-title">
             <div className="poll-info-title__row1">
               <ProfilePicture
-                imageUrl={
-                  creatorProfilePictureUrl ? creatorProfilePictureUrl : defaultProfilePictureUrl
-                }
+                imageUrl={creatorProfilePictureUrl}
                 altText={creatorName + "'s profile picture"}
                 onClick={navigateToCreatorProfile}
               ></ProfilePicture>
@@ -213,9 +212,7 @@ export default function Poll({
           <div className="poll-info-title">
             <div className="poll-info-title__row1">
               <ProfilePicture
-                imageUrl={
-                  groupProfilePictureUrl ? groupProfilePictureUrl : defaultGroupProfilePictureUrl
-                }
+                imageUrl={groupProfilePictureUrl}
                 altText={creatorName + "'s profile picture"}
                 onClick={navigateToGroupProfile}
               ></ProfilePicture>

diff --git a/src/cmps/global/ProfilePicture.tsx b/src/cmps/global/ProfilePicture.tsx
@@ -1,4 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+import defaultProfilePictureUrl from "/imgs/profile/blank-profile-picture.jpg";
+import { fetchPicture } from "../../services/media.service";
 
 interface ProfilePictureProps {
   imageUrl: string;
@@ -14,6 +16,18 @@ export default function ProfilePicture({
   altText = "Profile Picture"
 }: ProfilePictureProps) {
   const [isHovered, setIsHovered] = useState(false);
+  const [image, setImage] = useState<string>(defaultProfilePictureUrl)
+
+  useEffect(() => {
+    fetchPicture(imageUrl)
+    .then((data) => {
+      console.log("Fetched user's profile picture");
+      setImage(data ?? defaultProfilePictureUrl);
+    })
+    .catch((error) => {
+      console.log("Unable to fetch user's profile picture");
+    });
+  },[])
 
   return (
     <div
@@ -32,7 +46,7 @@ export default function ProfilePicture({
           height: size,
           opacity: onClick ? (isHovered ? 0.9 : 1) : 1
         }}
-        src={imageUrl}
+        src={image}
         alt={altText}
         onMouseEnter={() => setIsHovered(true)} // Set hover state to true on mouse enter
         onMouseLeave={() => setIsHovered(false)} // Reset hover state on mouse leave

diff --git a/src/cmps/profile/GroupProfile.tsx b/src/cmps/profile/GroupProfile.tsx
@@ -20,7 +20,7 @@ import { UserRoleName } from "../../models/enum/UserRoleName.enum";
 import { fetchUserData } from "../../services/user.profile.service";
 import defaultProfilePictureUrl from "/imgs/profile/blank-group-profile-picture.jpg";
 import defaultProfileBannerUrl from "/imgs/profile/blank-profile-banner.jpg";
-import { uploadGroupProfileImage } from "../../services/media.service";
+import { fetchPicture, uploadGroupProfileImage } from "../../services/media.service";
 import { useUser } from "../../context/UserContext";
 
 export default function GroupInfo() {
@@ -45,6 +45,10 @@ export default function GroupInfo() {
   const [isProfilePictureMenuVisible, setIsProfilePictureMenuVisible] = useState<boolean>(false);
   const [isProfileBannerMenuVisible, setIsProfileBannerMenuVisible] = useState<boolean>(false);
 
+  const [canSetPictures, setCanSetPictures] = useState(false);
+  const [profileImageSrc, setProfileImageSrc] = useState<string>(defaultProfilePictureUrl);
+  const [bannerImageSrc, setBannerImageSrc] = useState<string>(defaultProfileBannerUrl);
+
   const [isUserHasPermissionToAddMember, setIsUserHasPermissionToAddMember] =
     useState<boolean>(false);
   const [isUserHasPermissionToRmvMember, setIsUserHasPermissionToRmvMember] =
@@ -70,6 +74,7 @@ export default function GroupInfo() {
         .then((data) => {
           console.log("Fetched group data for group with ID: ", groupId, data);
           setGroupData(data);
+          setCanSetPictures(true);
           setIsLoading(false);
         })
         .catch((error) => {
@@ -94,6 +99,30 @@ export default function GroupInfo() {
     fetchUserPermissionsInCommandBar();
   }, [members]);
 
+  useEffect(() => {
+    if(canSetPictures){
+      fetchPicture(groupData?.profilePictureUrl)
+      .then((data) => {
+        console.log("Fetched group's profile picture");
+        setProfileImageSrc(data ?? defaultProfilePictureUrl);
+      })
+      .catch((error) => {
+        console.log("Unable to fetch group's profile picture");
+      });
+
+      fetchPicture(groupData?.profileBannerUrl)
+      .then((data) => {
+        console.log("Fetched group's bannner picture");
+        setBannerImageSrc(data ?? defaultProfileBannerUrl);
+      })
+      .catch((error) => {
+        console.log("Unable to fetch group's banner picture");
+      });
+
+      setCanSetPictures(false);
+    }
+  }, [canSetPictures])
+
   const fetchUserPermissionsInCommandBar = () => {
     console.log("Fetching user permissions in group");
     const userRole = getMemberRole(userId);
@@ -158,6 +187,7 @@ export default function GroupInfo() {
             (prevGroupData) =>
               prevGroupData && { ...prevGroupData, profilePictureUrl: response.imageUrl }
           );
+          setCanSetPictures(true);
         } catch (error) {
           console.error("Failed to upload group profile picture: ", error);
         }
@@ -173,6 +203,7 @@ export default function GroupInfo() {
             (prevGroupData) =>
               prevGroupData && { ...prevGroupData, profileBannerUrl: response.imageUrl }
           );
+          setCanSetPictures(true);
         } catch (error) {
           console.error("Failed to upload group profile banner: ", error);
         }
@@ -242,9 +273,7 @@ export default function GroupInfo() {
         >
           <div>
             <img
-              src={
-                groupData.profileBannerUrl ? groupData.profileBannerUrl : defaultProfileBannerUrl
-              }
+              src={bannerImageSrc}
               alt="Banner"
               className="group-info__banner-img"
             />
@@ -281,11 +310,7 @@ export default function GroupInfo() {
           >
             <div>
               <img
-                src={
-                  groupData.profilePictureUrl
-                    ? groupData.profilePictureUrl
-                    : defaultProfilePictureUrl
-                }
+                src={profileImageSrc}
                 alt="Profile"
                 className="group-info__profile-img"
               />

diff --git a/src/cmps/profile/UserProfile.tsx b/src/cmps/profile/UserProfile.tsx
@@ -9,7 +9,7 @@ import {
 import LoadingAnimation from "../global/LoadingAnimation";
 import { getTimePassed } from "../../services/poll.service";
 import ContentPageMessage from "../content-page/messege/ContentPageMessage";
-import { uploadUserProfileImage } from "../../services/media.service";
+import { fetchPicture, uploadUserProfileImage } from "../../services/media.service";
 import defaultProfilePictureUrl from "/imgs/profile/blank-profile-picture.jpg";
 import defaultProfileBannerUrl from "/imgs/profile/blank-profile-banner.jpg";
 import ProfilePicture from "../global/ProfilePicture";
@@ -30,6 +30,11 @@ export default function UserProfile() {
 
   const [isProfilePictureMenuVisible, setIsProfilePictureMenuVisible] = useState<boolean>(false);
   const [isProfileBannerMenuVisible, setIsProfileBannerMenuVisible] = useState<boolean>(false);
+  const [canSetPictures, setCanSetPictures] = useState(false);
+  const [profileImageSrc, setProfileImageSrc] = useState<string>(defaultProfilePictureUrl);
+  const [bannerImageSrc, setBannerImageSrc] = useState<string>(defaultProfileBannerUrl);
+  const { user } = useUser();
+
   const navigate = useNavigate();
 
   const [isEditDescriptionMenuVisible, setIsEditDescriptionMenuVisible] = useState<boolean>(false);
@@ -54,6 +59,7 @@ export default function UserProfile() {
         console.log("Fetched user data for user with ID: ", userId, data);
         setUserData(data);
         setDescriptionText(data.description || defaultDescription);
+        setCanSetPictures(true);
         setIsLoading(false);
       })
       .catch((error) => {
@@ -71,8 +77,33 @@ export default function UserProfile() {
         console.log("Unable to fetch groups of user with ID " + userId);
         setErrorMessage("Unable to fetch groups of user with ID " + userId);
       });
+
   }, [userId]);
 
+  useEffect(() => {
+    if(canSetPictures){
+      fetchPicture(userData?.profilePictureUrl)
+      .then((data) => {
+        console.log("Fetched user's profile picture");
+        setProfileImageSrc(data ?? defaultProfilePictureUrl);
+      })
+      .catch((error) => {
+        console.log("Unable to fetch user's profile picture");
+      });
+
+      fetchPicture(userData?.profileBannerUrl)
+      .then((data) => {
+        console.log("Fetched user's bannner picture");
+        setBannerImageSrc(data ?? defaultProfileBannerUrl);
+      })
+      .catch((error) => {
+        console.log("Unable to fetch user's banner picture");
+      });
+
+      setCanSetPictures(false);
+    }
+  }, [canSetPictures])
+
   const handleProfileImageUpload = async (event: ChangeEvent<HTMLInputElement>) => {
     console.log("User profile picture was added, uploading...");
     const file = event.target.files?.[0];
@@ -92,6 +123,7 @@ export default function UserProfile() {
             (prevUserData) =>
               prevUserData && { ...prevUserData, profilePictureUrl: response.imageUrl }
           );
+          setCanSetPictures(true);
         } catch (error) {
           console.error("Failed to upload user profile picture: ", error);
         }
@@ -105,8 +137,9 @@ export default function UserProfile() {
           // Update the local user data to include the newly uploaded profile banner
           setUserData(
             (prevUserData) =>
-              prevUserData && { ...prevUserData, bannerPictureUrl: response.imageUrl }
+              prevUserData && { ...prevUserData, profileBannerUrl: response.imageUrl }
           );
+          setCanSetPictures(true);
         } catch (error) {
           console.error("Failed to upload user profile banner: ", error);
         }
@@ -165,11 +198,15 @@ export default function UserProfile() {
   };
 
   const toggleProfilePictureMenu = () => {
-    setIsProfilePictureMenuVisible(!isProfilePictureMenuVisible);
+    if(userId === user?.userId){
+      setIsProfilePictureMenuVisible(!isProfilePictureMenuVisible);  
+    }
   };
 
   const toggleProfileBannerMenu = () => {
-    setIsProfileBannerMenuVisible(!isProfileBannerMenuVisible);
+    if(userId === user?.userId){
+      setIsProfileBannerMenuVisible(!isProfileBannerMenuVisible);  
+    }
   };
 
   const toggleEditDescriptionMenu = () => {
@@ -194,7 +231,7 @@ export default function UserProfile() {
         <div className="user-profile__profile-banner-container" onClick={toggleProfileBannerMenu}>
           <div>
             <img
-              src={userData.bannerPictureUrl ? userData.bannerPictureUrl : defaultProfileBannerUrl}
+              src={bannerImageSrc}
               alt="Banner"
               className="user-profile__banner-img"
             />
@@ -224,9 +261,7 @@ export default function UserProfile() {
           >
             <div>
               <img
-                src={
-                  userData.profilePictureUrl ? userData.profilePictureUrl : defaultProfilePictureUrl
-                }
+                src={profileImageSrc}
                 alt="Profile"
                 className="user-profile__profile-img"
               />

diff --git a/src/cmps/sidebar/MembersSidebarItem.tsx b/src/cmps/sidebar/MembersSidebarItem.tsx
@@ -34,7 +34,7 @@ export default function MembersSidebarItem({
       <div id="members-sidebar-item-icon">
         <ProfilePicture
           size="20px"
-          imageUrl={profilePictureUrl ? profilePictureUrl : defaultProfilePictureUrl}
+          imageUrl={profilePictureUrl}
         />
       </div>
       <div id="members-sidebar-item-name">{name}</div>

diff --git a/src/cmps/sidebar/SidebarUserInfo.tsx b/src/cmps/sidebar/SidebarUserInfo.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { UserData } from "../../models/UserData.model";
 import { useNavigate } from "react-router-dom";
-import defaultProfilePictureUrl from "/imgs/profile/blank-profile-picture.jpg";
 import ProfilePicture from "../global/ProfilePicture";
 import { useAuth } from "../../context/AuthProvider";
 
@@ -41,9 +40,7 @@ export default function SidebarUserInfo({ userData }: SidebarUserInfoProps) {
   return (
     <div className="sidebar-user-info-container">
       <ProfilePicture
-        imageUrl={
-          userData.profilePictureUrl ? userData.profilePictureUrl : defaultProfilePictureUrl
-        }
+        imageUrl={userData.profilePictureUrl}
         onClick={onUsernameClick}
       />
       <div className="sidebar-user-info-data">

diff --git a/src/context/AuthProvider.tsx b/src/context/AuthProvider.tsx
@@ -63,7 +63,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
           username: signedUpUser.username,
           email: signedUpUser.email,
           profilePictureUrl: signedUpUser.profilePictureUrl,
-          bannerPictureUrl: signedUpUser.bannerPictureUrl,
+          profileBannerUrl: signedUpUser.profileBannerUrl,
           timeCreated: signedUpUser.timeCreated
         });
         console.log(user);
@@ -106,7 +106,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
             username: signedUpUser.username,
             email: signedUpUser.email,
             profilePictureUrl: signedUpUser.profilePictureUrl,
-            bannerPictureUrl: signedUpUser.bannerPictureUrl,
+            profileBannerUrl: signedUpUser.profileBannerUrl,
             timeCreated: signedUpUser.timeCreated
           });
           // If authentication is disabled, mock authenticated state

diff --git a/src/models/UserData.model.ts b/src/models/UserData.model.ts
@@ -4,6 +4,6 @@ export interface UserData {
     email: string;
     description: string;
     profilePictureUrl: string;
-    bannerPictureUrl: string;
+    profileBannerUrl: string;
     timeCreated: string;
 }
diff --git a/src/services/media.service.ts b/src/services/media.service.ts
@@ -98,3 +98,19 @@ export async function uploadGroupProfileImage(
     throw throwAxiosErr(err);
   }
 }
+
+export async function fetchPicture(pictureUrl: string | undefined) : Promise<string | undefined> {
+  console.log(cmpName, "Sending request to receive picture url: " + pictureUrl);
+  if(pictureUrl){
+    try{
+      const response = await axios.get(pictureUrl, {
+        responseType: "blob",
+      });
+
+      return URL.createObjectURL(response.data);
+    } catch (err) {
+      console.error(cmpName, "Error getting the picture: " + pictureUrl + " Error: " + err);
+      throwAxiosErr(err);
+    }
+  }
+}