From 21dade602f51afad7ba687bcfacd74bf599e8c64 Mon Sep 17 00:00:00 2001 From: rohitPandey469 Date: Sun, 11 Feb 2024 22:16:13 +0530 Subject: [PATCH 1/2] Connected the Follow Up Button to redux actions --- src/components/CardTabs/Users/UserElement.jsx | 37 ++++-- src/components/HomePage/index.jsx | 108 ++++++++++++++---- src/store/actions/profileActions.js | 6 + 3 files changed, 120 insertions(+), 31 deletions(-) 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..0ee0ad0b 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,75 @@ function HomePage({ background = "white", textColor = "black" }) { "Python", "React" ]); - + const profileToFollowData = { + // displayName: "SouGatariju" + // email: "sougatariju13@gmail.com" + uid: "850pPlsLaCg6JjmrKjOu6JqRPwhb" + }; + 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, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, firestore) + } } ]); @@ -142,40 +191,55 @@ function HomePage({ background = "white", textColor = "black" }) { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, firestore) + } }, { name: "Janvi Thakkar", img: [OrgUser], desg: "Software Engineer", - onClick: {} + onClick: { + addUserFollower: () => + addUserFollower(profileData, profileToFollowData, firestore), + isUserFollower: () => + isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + removeUserFollower: () => + removeUserFollower(profileData, profileToFollowData, 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/store/actions/profileActions.js b/src/store/actions/profileActions.js index c3a96c31..9f785df2 100644 --- a/src/store/actions/profileActions.js +++ b/src/store/actions/profileActions.js @@ -195,6 +195,7 @@ 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; }; @@ -209,7 +210,9 @@ export const addUserFollower = async ( profileData.uid, firestore ); + console.log("Add User Follow ran!!!") if (followStatus === false) { + console.log("New Follower") 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 follower") await firestore .collection("user_followers") .doc(`${profileData.uid}_${currentProfileData.uid}`) @@ -276,6 +281,7 @@ export const removeUserFollower = async ( : 0 }); } + console.log("Remove User Follow ran!!!") } catch (e) { console.log(e); } From e1ea72bca53b8bcd25a1281329b9ea0d9ab2a667 Mon Sep 17 00:00:00 2001 From: rohitPandey469 Date: Tue, 13 Feb 2024 16:13:19 +0530 Subject: [PATCH 2/2] Added Followers Up Modal --- src/components/HomePage/index.jsx | 17 +++--- .../profile/ProfileCardOne/index.jsx | 53 ++++++++++++++++--- .../User/UserProfile/UserProfile.jsx | 22 ++++++-- src/store/actions/profileActions.js | 44 ++++++++++++--- 4 files changed, 115 insertions(+), 21 deletions(-) diff --git a/src/components/HomePage/index.jsx b/src/components/HomePage/index.jsx index 0ee0ad0b..893e3906 100644 --- a/src/components/HomePage/index.jsx +++ b/src/components/HomePage/index.jsx @@ -119,6 +119,11 @@ function HomePage({ background = "white", textColor = "black" }) { // email: "sougatariju13@gmail.com" uid: "850pPlsLaCg6JjmrKjOu6JqRPwhb" }; + const profileToFollowData2={ + // displayName: "Codelabz User" + // email: "codelabzuser@example.com" + uid: "qrEH9fQUqUe7kONHtmC0GncTKYBP" + } const profileData = useSelector(({ firebase: { profile } }) => profile); useEffect(() => { const getFeed = async () => { @@ -138,11 +143,11 @@ function HomePage({ background = "white", textColor = "black" }) { desg: "Software Engineer", onClick: { addUserFollower: () => - addUserFollower(profileData, profileToFollowData, firestore), + addUserFollower(profileData, profileToFollowData2, firestore), isUserFollower: () => - isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + isUserFollower(profileData.uid, profileToFollowData2.uid, firestore), removeUserFollower: () => - removeUserFollower(profileData, profileToFollowData, firestore) + removeUserFollower(profileData, profileToFollowData2, firestore) } }, { @@ -193,11 +198,11 @@ function HomePage({ background = "white", textColor = "black" }) { desg: "Software Engineer", onClick: { addUserFollower: () => - addUserFollower(profileData, profileToFollowData, firestore), + addUserFollower(profileData, profileToFollowData2, firestore), isUserFollower: () => - isUserFollower(profileData.uid, profileToFollowData.uid, firestore), + isUserFollower(profileData.uid, profileToFollowData2.uid, firestore), removeUserFollower: () => - removeUserFollower(profileData, profileToFollowData, firestore) + removeUserFollower(profileData, profileToFollowData2, firestore) } }, { diff --git a/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx b/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx index 5e442525..63fb4192 100644 --- a/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx +++ b/src/components/ProfileBanner/profile/ProfileCardOne/index.jsx @@ -1,8 +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"; @@ -13,9 +20,10 @@ export default function ProfileCardOne({ name, story, followers, - following + following, }) { const classes = useStyles(); + const [openModal, setOpenModal] = useState(false); const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = event => { @@ -24,8 +32,40 @@ export default function ProfileCardOne({ const handleClose = () => { setAnchorEl(null); }; + const handleFollowerClick = () => { + setOpenModal(true); + }; return ( <> + setOpenModal(false)}> + + + Followers + + + {followers.map((follower, index) => ( + + + {follower?.displayName} + + ))} + + + +
- {followers} followers + {followers.length} followers diff --git a/src/components/User/UserProfile/UserProfile.jsx b/src/components/User/UserProfile/UserProfile.jsx index c0e31882..8795bf17 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 { getUserFollowers } 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 [followers, setFollowers] = useState([]); + const firestore = useFirestore(); const [organizations, setUpOrganizations] = useState([ { name: "Google Summer of Code", @@ -69,7 +72,20 @@ function UserProfile(props) { img: [OrgUser] } ]); - + useEffect(() => { + const fetchFollowers = async () => { + try { + const followersData = await getUserFollowers( + props.profileData.uid, + firestore + ); + setFollowers(followersData); + } catch (error) { + console.error("Error fetching user's followers:", error); + } + }; + fetchFollowers(); + }, []); return ( <>
@@ -86,7 +102,7 @@ function UserProfile(props) { story={ "Lorem ipsum dolor sit amet, consectetuer adipiscing elit" } - followers={402} + followers={followers} following={40} /> diff --git a/src/store/actions/profileActions.js b/src/store/actions/profileActions.js index 9f785df2..b1973307 100644 --- a/src/store/actions/profileActions.js +++ b/src/store/actions/profileActions.js @@ -195,7 +195,7 @@ export const isUserFollower = async (followerId, followingId, firestore) => { .collection("user_followers") .doc(`${followingId}_${followerId}`) .get(); - console.log("Is User follower ran!!!",followerDoc.exists) + console.log("Is User follower ran!!!", followerDoc.exists); return followerDoc.exists; }; @@ -210,9 +210,9 @@ export const addUserFollower = async ( profileData.uid, firestore ); - console.log("Add User Follow ran!!!") + console.log("Add User Follow ran!!!"); if (followStatus === false) { - console.log("New Follower") + console.log("New Follower"); await firestore .collection("user_followers") .doc(`${profileData.uid}_${currentProfileData.uid}`) @@ -255,9 +255,9 @@ export const removeUserFollower = async ( profileData.uid, firestore ); - console.log("Remove User Follow ran!!!") + console.log("Remove User Follow ran!!!"); if (followStatus === true) { - console.log("Removing the follower") + console.log("Removing the follower"); await firestore .collection("user_followers") .doc(`${profileData.uid}_${currentProfileData.uid}`) @@ -281,12 +281,44 @@ export const removeUserFollower = async ( : 0 }); } - console.log("Remove User Follow ran!!!") + console.log("Remove User Follow ran!!!"); } catch (e) { console.log(e); } }; +export const getUserFollowers = async (userUID, firestore) => { + try { + const querySnapshot = await firestore + .collection("user_followers") + .where("followingId", "==", userUID) + .get(); + + const followers = []; + + querySnapshot.forEach(async doc => { + const followerId = doc.data().followerId; + const userDoc = await firestore + .collection("cl_user") + .doc(followerId) + .get(); + if (userDoc.exists) { + const userData = userDoc.data(); + followers.push({ + uid: followerId, + displayName: userData.displayName, + photoURL: userData.photoURL + }); + } + }); + + return followers; + } catch (error) { + console.error("Error fetching user followers:", error); + throw error; + } +}; + const getAllOrgsOfCurrentUser = () => async (firebase, firestore) => { try { const auth = firebase.auth().currentUser;