diff --git a/src/components/CardTabs/Users/UserElement.jsx b/src/components/CardTabs/Users/UserElement.jsx index 2a6c2a9c..3b216623 100644 --- a/src/components/CardTabs/Users/UserElement.jsx +++ b/src/components/CardTabs/Users/UserElement.jsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Box from "@mui/material/Box"; import AddUser from "../../../assets/images/add-user.svg"; import CheckUser from "../../../assets/images/square-check-regular.svg"; @@ -6,6 +6,31 @@ import CheckUser from "../../../assets/images/square-check-regular.svg"; const UserElement = ({ user, index, useStyles }) => { const classes = useStyles(); const [icon, setIcon] = useState(true); + useEffect(() => { + const fetchData = async () => { + try { + const isFollowing = await user.onClick.isUserFollower(); + setIcon(!isFollowing); + } catch (error) { + console.error("Error fetching follower status:", error); + } + }; + fetchData(); + }, [icon]); + const handleUserClick = async event => { + event.preventDefault(); + try { + let isFollowing = await user.onClick.isUserFollower(); + if (isFollowing) { + await user.onClick.removeUserFollower(); + } else { + await user.onClick.addUserFollower(); + } + setIcon(isFollowing); + } catch (error) { + console.error("Error toggling follower status:", error); + } + }; return ( { { - setIcon(false); - }} + onClick={handleUserClick} data-testId={index == 0 ? "UserAdd" : ""} - sx={ - icon && { - cursor: "pointer" - } - } + sx={icon && { cursor: "pointer" }} > diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx index e8190e6b..eb98fe42 100644 --- a/src/components/HomePage/index.jsx +++ b/src/components/HomePage/index.jsx @@ -37,6 +37,11 @@ import { getTutorialFeedData, getTutorialFeedIdArray } from "../../store/actions/tutorialPageActions"; +import { addUserFollower } from "../../store/actions"; +import { + isUserFollower, + removeUserFollower +} from "../../store/actions/profileActions"; function HomePage({ background = "white", textColor = "black" }) { const classes = useStyles(); @@ -109,31 +114,87 @@ function HomePage({ background = "white", textColor = "black" }) { "Python", "React" ]); - + const profileToFollowData1 = { + // displayName: "SouGatariju" + // email: "sougatariju13@gmail.com" + uid: "850pPlsLaCg6JjmrKjOu6JqRPwhb" + }; + const profileToFollowData2={ + // displayName: "Shiva Nanda" + uid: "FdUlui4yIE5AN2P38EZOGq2ajLm4" + } + const profileToFollowData3={ + // displayName: "Mahendar Goud" + uid: "ufeINR1inzJu5SjBByaCYLXn3BG6" + } + const profileToFollowData4={ + // diplayName: "Sarfaraz Alam" + uid: "wdskLNE5S604JdZI8e9lAPC8VWzw" + } + const profileData = useSelector(({ firebase: { profile } }) => profile); + useEffect(() => { + const getFeed = async () => { + const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)( + firebase, + firestore, + dispatch + ); + getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch); + }; + getFeed(); + }, []); const [usersToFollow, setUsersToFollow] = useState([ { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData1, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData1.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData1, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData2, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData2.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData2, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData3, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData3.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData3, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData4, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData4.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData4, firestore) + } } ]); @@ -142,40 +203,55 @@ function HomePage({ background = "white", textColor = "black" }) { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData1, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData1.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData1, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData2, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData2.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData2, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData3, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData3.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData3, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData4, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData4.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData4, firestore) + } } ]); - - const profileData = useSelector(({ firebase: { profile } }) => profile); - useEffect(() => { - const getFeed = async () => { - const tutorialIdArray = await getTutorialFeedIdArray(profileData.uid)( - firebase, - firestore, - dispatch - ); - getTutorialFeedData(tutorialIdArray)(firebase, firestore, dispatch); - }; - getFeed(); - }, []); const tutorials = useSelector( ({ tutorialPage: { diff --git a/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx b/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx index 5e442525..dcc23f85 100644 --- a/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx @@ -1,9 +1,15 @@ import React, { useState } from "react"; import useStyles from "./styles"; -import Typography from "@mui/material/Typography"; -import Grid from "@mui/material/Grid"; -import { Button, Menu, MenuItem } from "@mui/material"; - +import { + Modal, + Box, + Typography, + Grid, + Avatar, + Button, + Menu, + MenuItem +} from "@mui/material"; // import dp from "../../../../assets/images/demoperson1.jpeg"; import iconbuttonImage from "../../../../assets/images/Filled3dots.svg"; import { Link } from "react-router-dom"; @@ -13,9 +19,11 @@ export default function ProfileCardOne({ name, story, followers, - following + following_count, + followings, }) { const classes = useStyles(); + const [openModal, setOpenModal] = useState(false); const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = event => { @@ -24,8 +32,43 @@ export default function ProfileCardOne({ const handleClose = () => { setAnchorEl(null); }; + const handleFollowingClick = () => { + setOpenModal(true); + }; return ( <> + setOpenModal(false)}> + + + Followings + + + {followings.map((following, index) => ( + + + {following?.displayName} + + ))} + + + +
- {following} following + onClick={handleFollowingClick} + > + {following_count} following diff --git a/src/components/User/UserProfile/UserProfile.jsx b/src/components/User/UserProfile/UserProfile.jsx index c0e31882..f9f84291 100644 --- a/src/components/User/UserProfile/UserProfile.jsx +++ b/src/components/User/UserProfile/UserProfile.jsx @@ -9,6 +9,8 @@ import OrgUser from "../../../assets/images/org-user.svg"; import { userList } from "../../HomePage/userList"; import Card from "@mui/material/Card"; import UserHighlights from "./UserHighlights"; +import { getUserFollowings } from "../../../store/actions/profileActions"; +import { useFirestore } from "react-redux-firebase"; const useStyles = makeStyles(theme => ({ parentBody: { @@ -50,7 +52,8 @@ const useStyles = makeStyles(theme => ({ function UserProfile(props) { const classes = useStyles(); - + const [followings, setFollowings] = useState([]); + const firestore = useFirestore(); const [organizations, setUpOrganizations] = useState([ { name: "Google Summer of Code", @@ -69,7 +72,18 @@ function UserProfile(props) { img: [OrgUser] } ]); - + useEffect(() => { + const fetchFollowings = async () => { + try { + const followingsData = await getUserFollowings(props.profileData.uid, firestore); + setFollowings(followingsData); + } catch (error) { + console.error("Error fetching user's followings:", error); + } + }; + + fetchFollowings(); + }, []); return ( <>
@@ -87,7 +101,8 @@ function UserProfile(props) { "Lorem ipsum dolor sit amet, consectetuer adipiscing elit" } followers={402} - following={40} + following_count={props.profileData.followingCount} + followings={followings} /> diff --git a/src/store/actions/profileActions.js b/src/store/actions/profileActions.js index c3a96c31..cf098fad 100644 --- a/src/store/actions/profileActions.js +++ b/src/store/actions/profileActions.js @@ -195,12 +195,13 @@ export const isUserFollower = async (followerId, followingId, firestore) => { .collection("user_followers") .doc(`${followingId}_${followerId}`) .get(); + console.log("Is User follower ran!!!", followerDoc.exists); return followerDoc.exists; }; export const addUserFollower = async ( - currentProfileData, - profileData, + currentProfileData, //follower + profileData, //following firestore ) => { try { @@ -209,7 +210,9 @@ export const addUserFollower = async ( profileData.uid, firestore ); + console.log("Add User Follow ran!!!"); if (followStatus === false) { + console.log("New Following"); await firestore .collection("user_followers") .doc(`${profileData.uid}_${currentProfileData.uid}`) @@ -252,7 +255,9 @@ export const removeUserFollower = async ( profileData.uid, firestore ); + console.log("Remove User Follow ran!!!"); if (followStatus === true) { + console.log("Removing the following"); await firestore .collection("user_followers") .doc(`${profileData.uid}_${currentProfileData.uid}`) @@ -276,11 +281,47 @@ export const removeUserFollower = async ( : 0 }); } + console.log("Remove User Follow ran!!!"); } catch (e) { console.log(e); } }; +export const getUserFollowings = async (userUID, firestore) => { + try { + const querySnapshot = await firestore + .collection("user_followers") + .where("followerId", "==", userUID) + .get(); + + const followings = []; + + querySnapshot.forEach(async doc => { + const followingId = doc.data().followingId; + // Fetch user details based on the following ID + const userDoc = await firestore + .collection("cl_user") + .doc(followingId) + .get(); + if (userDoc.exists) { + const userData = userDoc.data(); + // Add user details to the followings array + followings.push({ + uid: followingId, + displayName: userData.displayName, + photoURL: userData.photoURL + }); + } + }); + + return followings; + } catch (error) { + console.error("Error fetching user followings:", error); + } +}; + +export const getUserFollowers = async (profileData, firestore) => {}; + const getAllOrgsOfCurrentUser = () => async (firebase, firestore) => { try { const auth = firebase.auth().currentUser;