From 21dade602f51afad7ba687bcfacd74bf599e8c64 Mon Sep 17 00:00:00 2001 From: rohitPandey469 Date: Sun, 11 Feb 2024 22:16:13 +0530 Subject: [PATCH] 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); }