chore: Refactor UserCard component and update user feed functionality

lokeshwar777 · Aug 22, 2024 · 82736f5 · 82736f5
1 parent 1c0c433
commit 82736f5
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 72 deletions.
diff --git a/src/components/CardTabs/Users/index.jsx b/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>

diff --git a/src/components/HomePage/index.jsx b/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>