From 2b56c5f95008b74a1dd935565a42aa15a2aef36d Mon Sep 17 00:00:00 2001 From: Shikhar Date: Wed, 28 Feb 2024 19:04:46 +0530 Subject: [PATCH] feat/followProfile --- src/components/CardTabs/Users/UserElement.jsx | 12 +- src/components/Profile/ViewProfile/index.jsx | 552 ++++++++++-------- src/helpers/images.jsx | 2 +- src/routes.jsx | 6 +- src/store/actions/index.js | 1 + src/store/actions/profileActions.js | 19 + 6 files changed, 353 insertions(+), 239 deletions(-) diff --git a/src/components/CardTabs/Users/UserElement.jsx b/src/components/CardTabs/Users/UserElement.jsx index 2a6c2a9c..ba033e31 100644 --- a/src/components/CardTabs/Users/UserElement.jsx +++ b/src/components/CardTabs/Users/UserElement.jsx @@ -2,6 +2,7 @@ import React, { 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"; +import { Link } from "react-router-dom" const UserElement = ({ user, index, useStyles }) => { const classes = useStyles(); @@ -17,6 +18,7 @@ const UserElement = ({ user, index, useStyles }) => { }} gutterBottom > + { cursor: "pointer" }} > + + - {user.name} + {user.displayName || user.name} - {user.desg} + {user.handle || user.desg} + + { setIcon(false); diff --git a/src/components/Profile/ViewProfile/index.jsx b/src/components/Profile/ViewProfile/index.jsx index 7dd8fec3..fc670d51 100644 --- a/src/components/Profile/ViewProfile/index.jsx +++ b/src/components/Profile/ViewProfile/index.jsx @@ -3,7 +3,7 @@ import { useDispatch, useSelector } from "react-redux"; import { useParams } from "react-router-dom"; import { clearUserProfile, - getUserProfileData, + getFollowProfileData, addUserFollower, removeUserFollower } from "../../../store/actions"; @@ -24,9 +24,57 @@ import LinkedInIcon from "@mui/icons-material/LinkedIn"; import LinkIcon from "@mui/icons-material/Link"; import FlagIcon from "@mui/icons-material/Flag"; import Typography from "@mui/material/Typography"; +import { makeStyles } from "@mui/styles"; -const ProfileView = () => { - const { handle } = useParams(); +const useStyles = makeStyles(theme => ({ + parentBody: { + background: "#f9f9f9", + display: "flex", + justifyContent: "space-evenly", + paddingTop: theme.spacing(5) + }, + icons: { + background: "#fff", + display: "flex", + }, + icon: { + marginRight: "10px", + paddingRight: "20px", + paddingLeft: "20px", + paddingTop: "0%", + paddingBottom: "-100px", + borderRadius: "20px", + '&:hover': { + background: "#F9F9F9", + }, + }, + profileName: { + fontSize: "30px", + fontWeight: "bold", + }, + description: { + fontSize: "30px", + }, + leftPart: { + marginRight: "20px", + marginLeft: "10px" + }, + iconName: { + fontSize: "20px", + marginTop: "6px", + }, + iconres: { + display: "flex", + flexDirection: "column", + [theme.breakpoints.up('md')]: { + flexDirection: "row", + } + } + +})) + +const ViewProfile = () => { + const { id } = useParams(); const firestore = useFirestore(); const firebase = useFirebase(); const dispatch = useDispatch(); @@ -34,14 +82,30 @@ const ProfileView = () => { const [targetUserFollowing, setTargetUserFollowing] = useState(0); const [following, setFollowing] = useState([]); const [followDisable, setFollowDisable] = useState(false); + const [data, setData] = useState([]); + const classes = useStyles(); const db = firebase.firestore(); + //useEffect(() => { + // getUserProfileData(handle)(firebase, firestore, dispatch); + // return () => { + // clearUserProfile()(dispatch); + // }; + //}, [firebase, firestore, dispatch, handle]); + useEffect(() => { - getUserProfileData(handle)(firebase, firestore, dispatch); - return () => { - clearUserProfile()(dispatch); - }; - }, [firebase, firestore, dispatch, handle]); + const fetchData = async () => { + try { + const profileData = await getFollowProfileData(id)(firebase, firestore, dispatch); + setData(profileData); + } catch (error) { + console.log("Error fetching user's followers: ", error); + } + } + fetchData(); + }, [id]) + + console.log("fetched Data", data); const profileData = useSelector( ({ @@ -50,6 +114,7 @@ const ProfileView = () => { } }) => data ); + const currentProfileData = useSelector( ({ firebase: { profile } }) => profile ); @@ -100,7 +165,7 @@ const ProfileView = () => { return !!(data && data.length > 0); }; - if (loading || !profileData) { + if (loading || !data) { return ( @@ -128,239 +193,262 @@ const ProfileView = () => { }; return ( - - - {profileData && ( -
- - - - Profile Details - - - - - - - - {profileData.photoURL && profileData.photoURL.length > 0 - ? BasicImage(profileData.photoURL, profileData.displayName) - : BasicImage(NoImage, "Not Available")} +
+ + + {data && ( +
+ + + + Profile Details + - -

- - {profileData.displayName} - -

- {checkAvailable(profileData.description) && ( -

{profileData.description}

- )} - {checkAvailable(profileData.link_facebook) && ( -

- -

- + + + + + + {data.photoURL && data.photoURL.length > 0 + ? BasicImage(data.photoURL, data.displayName) + : BasicImage("https://i.pravatar.cc/300", data.displayName)} + + +

+ + {data.displayName} +

- )} - {checkAvailable(profileData.link_twitter) && ( -

- -

- - {" "} - - {profileData.link_twitter} + {checkAvailable(data.description) && ( +

{data.description}

+ )} +
+
+ - -

- )} - {checkAvailable(profileData.link_github) && ( -

- -

- - {" "} - - {profileData.link_github} + - -

- )} - {checkAvailable(profileData.link_linkedin) && ( -

- -

+
+ - -

- )} - {checkAvailable(profileData.website) && ( -

- -

- -

- )} +
+ + + {" "} +

{data.website}

- - Followers :{" "} - - {profileData.followerCount - ? profileData.followerCount - : 0} - {" "} - Following :{" "} - - {profileData.followingCount - ? profileData.followingCount - : 0} - - - {!profileData.isFollowing ? ( - - ) : ( -
+ +

+ )} + {checkAvailable(data.country) && ( +

+ +

+ +

+ )} + + + - unfollow - - )} + Followers :{" "} + + {data.followerCount + ? data.followerCount + : 0} + {" "} + Following :{" "} + + {data.followingCount + ? data.followingCount + : 0} + + + {!data.isFollowing ? ( + + ) : ( + + )} + - - -
- )} - {profileData === false && "No profile with the provided handle"} - - + +
+ )} + {data === false && "No profile with the provided handle"} + + +
); }; -export default ProfileView; +export default ViewProfile; diff --git a/src/helpers/images.jsx b/src/helpers/images.jsx index c3351f4c..f3131eda 100644 --- a/src/helpers/images.jsx +++ b/src/helpers/images.jsx @@ -12,7 +12,7 @@ const BasicImage = (src, alt) => { style={{ width: "100%", height: "auto", - borderRadius: "8px" + borderRadius: "100%" }} src={src} alt={alt} diff --git a/src/routes.jsx b/src/routes.jsx index 39493a49..4c40dce5 100644 --- a/src/routes.jsx +++ b/src/routes.jsx @@ -18,7 +18,7 @@ import MyFeed from "./components/MyFeed"; import Organization from "./components/Organization"; import ViewOrganization from "./components/Organization/ViewOrganization"; import Profile from "./components/Profile"; -import ProfileView from "./components/Profile/ViewProfile"; +import ViewProfile from "./components/Profile/ViewProfile"; import ViewTutorial from "./components/Tutorials"; import MyTutorials from "./components/Tutorials/MyTutorials"; import Spinner from "./helpers/spinner"; @@ -144,8 +144,8 @@ const Routes = () => { /> async (firebase, firestore, dispatch) => { + try { + + const docs = await firestore + .collection("cl_user") + .where("uid", "==", id) + .get(); + + const doc = docs.docs[0].data(); + + console.log("getFollowProfileData",doc) + return doc; + } + catch (e) { + console.log("Error: ",e.message) + } + }; + + export const clearUserProfile = () => dispatch => { dispatch({ type: actions.CLEAR_USER_PROFILE_DATA_STATE }); };