Feat: Implement Dynamic Data Rendering for Sidebar ("Who to Follow")

cypress/e2e/components/profile/user-dashboard.cy.js

@@ -34,7 +34,7 @@ describe("User Dashboard Test | CodeLabz", () => {
   it("Check Profile", function () {
     cy.visit(`${this.base_url}user-dashboard/profile`);
     cy.get(
-      '[data-testid="profile"] > .makeStyles-navLink-81 > .MuiButtonBase-root'
+      '[data-testid="profile"]'
     )
       .should("exist")
       .click();
@@ -68,7 +68,7 @@ describe("User Dashboard Test | CodeLabz", () => {
     cy.visit(`${this.base_url}user-dashboard/profile`);
 
     cy.get(
-      '[data-testid="userSettings"] > .makeStyles-navLink-81 > .MuiButtonBase-root'
+      '[data-testid="userSettings"]'
     )
       .should("exist")
       .click();

src/App.jsx

@@ -1,25 +1,8 @@
-import React, { useEffect } from "react";
+import React from "react";
 import Routes from "./routes";
 import "./App.less";
-import { useFirebase, useFirestore } from "react-redux-firebase";
-import { useDispatch, useSelector } from "react-redux";
-import { getProfileData } from "./store/actions";
 
 const App = () => {
-  const firebase = useFirebase();
-  const firestore = useFirestore();
-  const dispatch = useDispatch();
-  const organizations = useSelector(
-    ({
-      firebase: {
-        profile: { organizations }
-      }
-    }) => organizations
-  );
-
-  useEffect(() => {
-    getProfileData(organizations)(firebase, firestore, dispatch);
-  }, [organizations, firebase, dispatch]);
   return <Routes />;
 };
 

src/components/CardTabs/Users/UserElement.jsx

@@ -1,11 +1,49 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } 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 { useFirestore } from "react-redux-firebase";
+import { useSelector } from "react-redux";
+import {
+  isUserFollower,
+  addUserFollower,
+  removeUserFollower
+} from "../../../store/actions";
 
 const UserElement = ({ user, index, useStyles }) => {
   const classes = useStyles();
-  const [icon, setIcon] = useState(true);
+  const firestore = useFirestore();
+
+  const profileData = user;
+  const currentProfileData = useSelector(
+    ({ firebase: { profile } }) => profile
+  );
+  const followerId = currentProfileData.uid;
+  const followingId = profileData.uid;
+  const [followed, setFollowed] = useState(false);
+
+  const handleFollowToggle = async () => {
+    if (!followed) {
+      await addUserFollower(currentProfileData, profileData, firestore);
+    } else {
+      await removeUserFollower(currentProfileData, profileData, firestore);
+    }
+    setFollowed(!followed);
+  };
+
+  useEffect(() => {
+    const checkIfFollowing = async () => {
+      const isFollowing = await isUserFollower(
+        followerId,
+        followingId,
+        firestore
+      );
+      setFollowed(isFollowing);
+    };
+
+    checkIfFollowing();
+  }, [followerId, followingId, firestore]);
+
   return (
     <Box
       sx={{
@@ -46,17 +84,16 @@ const UserElement = ({ user, index, useStyles }) => {
         </Box>
       </Box>
       <Box
-        onClick={() => {
-          setIcon(false);
-        }}
+        onClick={handleFollowToggle}
         data-testId={index == 0 ? "UserAdd" : ""}
-        sx={
-          icon && {
-            cursor: "pointer"
-          }
-        }
+        sx={{
+          cursor: followed ? "default" : "pointer"
+        }}
       >
-        <img src={icon ? AddUser : CheckUser} />
+        <img
+          src={followed ? CheckUser : AddUser}
+          alt={followed ? "Following" : "Add User"}
+        />
       </Box>
     </Box>
   );

src/components/CardTabs/Users/index.jsx

@@ -1,10 +1,13 @@
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { makeStyles } from "@mui/styles";
 import UserElement from "./UserElement";
-
+import { getUserFeedData, getUserFeedIdArray } from "../../../store/actions";
+import { useFirebase, useFirestore } from "react-redux-firebase";
+import { useDispatch, useSelector } from "react-redux";
+import OrgUser from "../../../assets/images/org-user.svg";
 const useStyles = makeStyles(theme => ({
   root: {
     display: "flex",
@@ -33,8 +36,74 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const UserCard = props => {
+const UserCard = ({ title, userId }) => {
   const classes = useStyles();
+  const firebase = useFirebase();
+  const firestore = useFirestore();
+  const dispatch = useDispatch();
+  const [usersToFollow, setUsersToFollow] = useState([]);
+
+  const users = useSelector(
+    ({
+      profile: {
+        userFeed: { userFeedArray }
+      }
+    }) => userFeedArray
+  );
+
+  const [contributors, setContributors] = useState([
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    },
+    {
+      name: "Janvi Thakkar",
+      img: [OrgUser],
+      desg: "Software Engineer",
+      onClick: {}
+    }
+  ]);
+
+  useEffect(() => {
+    const getUserFeed = async () => {
+      const userIdArray = await getUserFeedIdArray(userId)(
+        firebase,
+        firestore,
+        dispatch
+      );
+      getUserFeedData(userIdArray)(firebase, firestore, dispatch);
+    };
+
+    getUserFeed();
+  }, []);
+
+  useEffect(() => {
+    const updatedUsersToFollow = users
+      .filter(user => user.uid !== userId)
+      .map(user => ({
+        uid: user.uid,
+        name: user.displayName,
+        img: user.photoURL ? [user.photoURL] : [OrgUser],
+        desg: user.handle,
+        onClick: {}
+      }));
+    setUsersToFollow(updatedUsersToFollow);
+  }, [users]);
+
   return (
     <div className={classes.root} data-testId="UsersCard">
       <Card sx={{ minWidth: 275 }} className={(classes.card, classes.root)}>
@@ -45,18 +114,32 @@ const UserCard = props => {
             gutterBottom
             data-testId="UsersCardTitle"
           >
-            {props.title}
+            {title}
           </Typography>
-          {props.users.map(function (user, index) {
-            return (
-              <UserElement
-                key={index}
-                user={user}
-                index={index}
-                useStyles={useStyles}
-              />
-            );
-          })}
+
+          {title === "Who to Follow" &&
+            usersToFollow.map(function (user, index) {
+              return (
+                <UserElement
+                  key={index}
+                  user={user}
+                  index={index}
+                  useStyles={useStyles}
+                />
+              );
+            })}
+
+          {title === "Contributors" &&
+            contributors.map(function (user, index) {
+              return (
+                <UserElement
+                  key={index}
+                  user={user}
+                  index={index}
+                  useStyles={useStyles}
+                />
+              );
+            })}
         </CardContent>
       </Card>
     </div>

src/components/HomePage/index.jsx

@@ -110,60 +110,6 @@ function HomePage({ background = "white", textColor = "black" }) {
     "React"
   ]);
 
-  const [usersToFollow, setUsersToFollow] = useState([
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    },
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    },
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    },
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    }
-  ]);
-
-  const [contributors, setContributors] = useState([
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    },
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    },
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    },
-    {
-      name: "Janvi Thakkar",
-      img: [OrgUser],
-      desg: "Software Engineer",
-      onClick: {}
-    }
-  ]);
-
   const profileData = useSelector(({ firebase: { profile } }) => profile);
   useEffect(() => {
     const getFeed = async () => {
@@ -294,10 +240,10 @@ function HomePage({ background = "white", textColor = "black" }) {
                 <EventsCard title={"Popular Events"} events={upcomingEvents} />
               </TabPanel>
               <TabPanel value="3" style={{ padding: 0 }}>
-                <UserCard title={"Who to Follow"} users={usersToFollow} />
+                <UserCard title={"Who to Follow"} userId={profileData.uid} />
               </TabPanel>
               <TabPanel value="4" style={{ padding: 0 }}>
-                <UserCard title={"Contributors"} users={contributors} />
+                <UserCard title={"Contributors"} userId={profileData.uid} />
               </TabPanel>
             </TabContext>
           </Box>
@@ -341,7 +287,7 @@ function HomePage({ background = "white", textColor = "black" }) {
             data-testId="homepageUsersToFollow"
           >
             <Grid item style={{ minWidth: "100%" }}>
-              <UserCard title={"Who to Follow"} users={usersToFollow} />
+              <UserCard title={"Who to Follow"} userId={profileData.uid} />
             </Grid>
           </Grid>
           <Grid
@@ -359,7 +305,7 @@ function HomePage({ background = "white", textColor = "black" }) {
             data-testId="homepageContributors"
           >
             <Grid item style={{ minWidth: "100%" }}>
-              <UserCard title={"Contributors"} users={contributors} />
+              <UserCard title={"Contributors"} userId={profileData.uid} />
             </Grid>
           </Grid>
 

src/components/Organization/pages/General.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
   Grid,
   Typography,
@@ -21,7 +21,8 @@ import { NoImage } from "../../../helpers/images";
 import {
   uploadOrgProfileImage,
   clearEditGeneral,
-  editGeneralData
+  editGeneralData,
+  getProfileData
 } from "../../../store/actions";
 import { useFirebase, useFirestore } from "react-redux-firebase";
 import ChangeProfile from "../../Profile/ChangeProfile/ChangeProfile";
@@ -217,6 +218,12 @@ function General() {
     CurrentOrg
   ]);
 
+  useEffect(() => {
+    if (!profileOrganizations) {
+      getProfileData()(firebase, firestore, dispatch);
+    }
+  }, [firestore, firebase, dispatch, profileOrganizations]);
+
   console.log(OrgData);
   return (
     <React.Fragment>