Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ Feat : Clicking Open The List of "Following Users" at "/profile" ] #1182

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[ Feat : Clicking Open The List of "Following Users" at "/profile" ] #1182

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21dade6
Connected the Follow Up Button to redux actions
rohitPandey469 Feb 11, 2024
aa9b36c
Added the following list show modal option
rohitPandey469 Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 28 additions & 9 deletions src/components/CardTabs/Users/UserElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,36 @@
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";

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 (
<Box
sx={{
Expand Down Expand Up @@ -46,15 +71,9 @@ const UserElement = ({ user, index, useStyles }) => {
</Box>
</Box>
<Box
onClick={() => {
setIcon(false);
}}
onClick={handleUserClick}
data-testId={index == 0 ? "UserAdd" : ""}
sx={
icon && {
cursor: "pointer"
}
}
sx={icon && { cursor: "pointer" }}
>
<img src={icon ? AddUser : CheckUser} />
</Box>
Expand Down
120 changes: 98 additions & 22 deletions src/components/HomePage/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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)
}
}
]);

Expand All @@ -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: {
Expand Down
60 changes: 52 additions & 8 deletions src/components/ProfileBanner/profile/ProfileCardOne/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 => {
Expand All @@ -24,8 +32,43 @@ export default function ProfileCardOne({
const handleClose = () => {
setAnchorEl(null);
};
const handleFollowingClick = () => {
setOpenModal(true);
};
return (
<>
<Modal open={openModal} onClose={() => setOpenModal(false)}>
<Box
style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%)"
}}
sx={{ width: 400, bgcolor: "background.paper", p: 2 }}
>
<Typography variant="h6" gutterBottom>
Followings
</Typography>
<Grid container spacing={2} direction="column">
{followings.map((following, index) => (
<Grid
item
xs={6}
key={index}
style={{ display: "flex", alignItems: "center", gap: 10 }}
>
<Avatar
alt={following?.displayName}
src={following?.photoURL}
/>
<Typography>{following?.displayName}</Typography>
</Grid>
))}
</Grid>
<Button onClick={() => setOpenModal(false)}>Close</Button>
</Box>
</Modal>
<div
className={classes.profileRightTop}
data-testId="user_profile_card_one"
Expand Down Expand Up @@ -71,10 +114,11 @@ export default function ProfileCardOne({
<Grid item>
<span
className={classes.profileInfoData}
style={{ marginRight: "2px" }}
style={{ marginRight: "2px", cursor: "pointer" }}
data-testId="user_profile_card_one_followingCount"
>
{following} following
onClick={handleFollowingClick}
>
{following_count} following
</span>
</Grid>
</Grid>
Expand Down
21 changes: 18 additions & 3 deletions src/components/User/UserProfile/UserProfile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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",
Expand All @@ -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 (
<>
<div className={classes.parentBody}>
Expand All @@ -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}
/>
</Card>
</Grid>
Expand Down
Loading