+
+ );
+}
diff --git a/src/cmps/popup/show-group-members-popup/ShowGroupMembersPopupItem.tsx b/src/cmps/popup/show-group-members-popup/ShowGroupMembersPopupItem.tsx
new file mode 100644
index 0000000..04ca194
--- /dev/null
+++ b/src/cmps/popup/show-group-members-popup/ShowGroupMembersPopupItem.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import ProfilePicture from "../../global/ProfilePicture";
+import { useNavigate } from "react-router-dom";
+import defaultProfilePicture from "/imgs/profile/blank-profile-picture.jpg";
+
+interface ShowGroupMembersPopupItemProps {
+ profilePictureUrl: string;
+ userId: string;
+ username: string;
+ roleName: string;
+}
+
+export default function ShowGroupMembersPopupItem({
+ profilePictureUrl,
+ userId,
+ username,
+ roleName
+}: ShowGroupMembersPopupItemProps) {
+ const navigate = useNavigate();
+
+ const navigateToUserProfile = () => {
+ navigate(`/${userId}`);
+ };
+
+ return (
+ e.stopPropagation()}>
+
+ {"Members of " + groupName}
+-
+ {members.map((member) => (
+
{username}
+ {roleName != "Member" && (
+ {roleName}
+ )}
+
-
+
+
- 
+ 
{isProfileBannerMenuVisible && (
-
+
-
+
- 
+ 
{isProfilePictureMenuVisible && (
-
+
-
+
-
-
- {groupData.groupName}
+
+
{groupData.groupName}
+
+
{isUserHasPermissionToAddMember && (
setIsDeleteVerifyPopupOpen(false)}
/>
)}
-
-
- {isUserHasPermissionToEditDescription && (
+
+
+ {isUserHasPermissionToEditGroupProfile && (
(false);
const [isProfileBannerMenuVisible, setIsProfileBannerMenuVisible] = useState(false);
- const [canSetPictures, setCanSetPictures] = useState(false);
- const [profileImageSrc, setProfileImageSrc] = useState(defaultProfilePictureUrl);
- const [bannerImageSrc, setBannerImageSrc] = useState(defaultProfileBannerUrl);
const { user } = useUser();
const navigate = useNavigate();
@@ -45,7 +42,7 @@ export default function UserProfile() {
const resetUserDescriptionText = () =>
setDescriptionText(userData ? userData.description || defaultDescription : defaultDescription);
- const isProfileOfLoggedInUser = () => loggedInUser?.userId === userId;
+ const isProfileOfLoggedInUser = loggedInUser?.userId === userId;
useEffect(() => {
setIsLoading(true);
@@ -59,7 +56,6 @@ 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) => {
@@ -79,30 +75,6 @@ export default function UserProfile() {
});
}, [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) => {
console.log("User profile picture was added, uploading...");
const file = event.target.files?.[0];
@@ -122,7 +94,6 @@ export default function UserProfile() {
(prevUserData) =>
prevUserData && { ...prevUserData, profilePictureUrl: response.imageUrl }
);
- setCanSetPictures(true);
} catch (error) {
console.error("Failed to upload user profile picture: ", error);
}
@@ -138,7 +109,6 @@ export default function UserProfile() {
(prevUserData) =>
prevUserData && { ...prevUserData, profileBannerUrl: response.imageUrl }
);
- setCanSetPictures(true);
} catch (error) {
console.error("Failed to upload user profile banner: ", error);
}
@@ -219,7 +189,13 @@ export default function UserProfile() {
+
)}
{isEditingDescription ? ( -
diff --git a/src/cmps/profile/group/GroupProfileInfoBox.tsx b/src/cmps/profile/group/GroupProfileInfoBox.tsx
new file mode 100644
index 0000000..286a0ec
--- /dev/null
+++ b/src/cmps/profile/group/GroupProfileInfoBox.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { GroupMember } from "../../../models/GroupMember.model";
+import CustomButton from "../../global/CustomButton";
+import ShowGroupMembersPopup from "../../popup/show-group-members-popup/ShowGroupMembersPopup";
+
+interface GroupProfileInfoBoxProps {
+ groupId: string;
+ groupName: string;
+ timePassed?: string;
+ members?: GroupMember[];
+}
+
+export default function GroupProfileInfoBox({
+ groupId,
+ groupName,
+ timePassed,
+ members
+}: GroupProfileInfoBoxProps) {
+ const [isMembersPopupVisible, setIsMembersPopupVisible] = useState(false);
+
+ const handleShowMembersClick = () => {
+ setIsMembersPopupVisible(true);
+ };
+ const handleCloseMembersPopupClick = () => {
+ setIsMembersPopupVisible(false);
+ };
+
+ return (
+ Description:
{isEditingDescription ? ( -
+
@@ -501,12 +483,13 @@ export default function GroupInfo() {
- {descriptionText}
)}
-
-
-
Info:
--
Created:
- {timePassed}-
Group ID:
{groupData?.groupId} +
+
+
+ );
+}
diff --git a/src/cmps/profile/UserProfile.tsx b/src/cmps/profile/user/UserProfile.tsx
similarity index 84%
rename from src/cmps/profile/UserProfile.tsx
rename to src/cmps/profile/user/UserProfile.tsx
index 8747f03..2dafb4a 100644
--- a/src/cmps/profile/UserProfile.tsx
+++ b/src/cmps/profile/user/UserProfile.tsx
@@ -1,22 +1,22 @@
import React, { ChangeEvent, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
-import { UserData } from "../../models/UserData.model";
+import { UserData } from "../../../models/UserData.model";
import {
capitalizeWords,
fetchUserData,
saveUserDescription
-} from "../../services/user.profile.service";
-import LoadingAnimation from "../global/LoadingAnimation";
-import { getTimePassed } from "../../services/poll.service";
-import ContentPageMessage from "../content-page/messege/ContentPageMessage";
-import { fetchPicture, uploadUserProfileImage } from "../../services/media.service";
+} from "../../../services/user.profile.service";
+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 defaultProfilePictureUrl from "/imgs/profile/blank-profile-picture.jpg";
import defaultProfileBannerUrl from "/imgs/profile/blank-profile-banner.jpg";
-import ProfilePicture from "../global/ProfilePicture";
-import { fetchUserGroups } from "../../services/group.service";
-import { GroupData } from "../../models/GroupData.model";
+import ProfilePicture from "../../global/ProfilePicture";
+import { fetchUserGroups } from "../../../services/group.service";
+import { GroupData } from "../../../models/GroupData.model";
import EditDescriptionIcon from "@mui/icons-material/MoreVert";
-import { useUser } from "../../context/UserContext";
+import { useUser } from "../../../context/UserContext";
export default function UserProfile() {
const { userId } = useParams();
@@ -30,9 +30,6 @@ export default function UserProfile() {
const [isProfilePictureMenuVisible, setIsProfilePictureMenuVisible] = useStateInfo:
+
+ {timePassed && (
+
+
+
+ )}
+ {groupId && (
+ Created:
+{timePassed}
+
+
+ )}
+ {members && (
+ Group ID:
+{groupId}
+
+
+ Show Group Members
+
+ {isMembersPopupVisible && (
+
+ )}
+ Group Members:
++ {"There are " + members.length + " group members in the group."} +
+
-
+ 
{isProfileBannerMenuVisible && (
@@ -245,7 +221,13 @@ export default function UserProfile() {
onClick={toggleProfilePictureMenu}
>
-
+ 
{isProfilePictureMenuVisible && (
@@ -276,7 +258,7 @@ export default function UserProfile() {
- {isProfileOfLoggedInUser() && (
+ {isProfileOfLoggedInUser && (
(true);
const { groupId } = useParams();
const { members, setMembers, sortMembers } = useMembers();
- const [isShowingAllGroups, setIsShowingAllGroups] = useState(true);
+ const [isShowingFriendsList, setIsShowingFriendsList] = useState(true);
const { registerForUpdate } = useUpdateContext(); // Access context
const { userId } = useParams();
+ const location = useLocation();
const cmpName = "MEMBERS_SIDEBAR ";
// Initial fetch on component render
useEffect(() => {
updateMembers();
- }, [groupId, userId]);
+ }, [groupId, userId, location.pathname]);
const updateMembers = useCallback(async () => {
- if (groupId && !userId) {
+ const isInFeedPage = location.pathname.startsWith("/feed");
+ const isInGroupPage = location.pathname.startsWith("/group");
+
+ if (isInFeedPage && groupId && !userId) {
+ // On specific group feed page
setIsLoading(true);
- setIsShowingAllGroups(false);
+ setIsShowingFriendsList(false);
try {
const fetchedMembers = await fetchGroupMembers(groupId);
console.log("Fetched members: " + fetchedMembers[0].userData);
@@ -35,13 +40,20 @@ export default function MembersSidebar() {
console.error(cmpName + error);
setIsLoading(false);
}
- } else {
- if (!userId) {
- setIsShowingAllGroups(true);
- setMembers([]);
- }
+ } else if (!isInFeedPage && !groupId && userId) {
+ // On user profile page
+ setIsShowingFriendsList(true);
+ setMembers(undefined);
+ } else if (isInGroupPage) {
+ // On group profile page
+ setIsShowingFriendsList(true);
+ setMembers(undefined);
+ } else if (isInFeedPage) {
+ // On all groups feed page
+ setIsShowingFriendsList(true);
+ setMembers(undefined);
}
- }, [groupId, userId]);
+ }, [groupId, userId, location.pathname]);
useEffect(() => {
// Register the updateMembers function and handle unregistration
@@ -59,11 +71,11 @@ export default function MembersSidebar() {
return (
-
- {!isShowingAllGroups && "Group Members:"}
+
+ {!isShowingFriendsList && "Group Members:"}
-
- {isLoading && !isShowingAllGroups && (
+ {isLoading && !isShowingFriendsList && (