feat: followers and following popup

src/components/index.js

@@ -12,3 +12,4 @@ export { Comment } from "./comment-card/Comment";
 export { ReplyComment } from "./comment-card/ReplyComment";
 export { Loader } from "./loader/Loader";
 export { Filter } from "./filter/Filter";
+export { ProfileUserModal } from "./profile-user-modal/ProfileUserModal";

src/components/profile-user-modal/ProfileUserModal.jsx

@@ -0,0 +1,77 @@
+import { Close } from "@mui/icons-material";
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+
+import { handleFollow, handleUnfollow } from "../../service";
+
+export const ProfileUserModal = ({ profileUsers, closeModal, type }) => {
+  const [profileUser, setProfileUser] = useState([]);
+  const { users, currentUser } = useSelector((state) => state.allUsers);
+
+  useEffect(() => {
+    setProfileUser(
+      users.filter((curUser) => profileUsers.includes(curUser.uid))
+    );
+  }, [profileUsers, users]);
+  return (
+    <>
+      <div className="modal modal--alert modal--profile modal--profile--users ">
+        <button
+          className="btn icon--btn profile--user--close"
+          onClick={closeModal}
+        >
+          <Close />
+        </button>
+        {profileUser.length > 0 ? (
+          <div className="suggestion--card">
+            <h2 className="text--center profile--heading">{type}</h2>
+            {profileUser.map((user) => (
+              <div className="suggestion--item" key={user.uid}>
+                <img
+                  src={user.profilePictureUrl}
+                  alt="Randomuser"
+                  className="avatar avatar--circle avatar--xss"
+                />
+                <Link to={`/user/${user.uid}`}>
+                  <p className="post--user--name">
+                    {`${user.firstName} ${user.lastName}`}
+                  </p>
+                </Link>
+
+                <button
+                  className={`btn btn--link suggestion--follow ${
+                    currentUser.uid === user.uid ? "btn--disabled" : ""
+                  }`}
+                  disabled={currentUser.uid === user.uid}
+                  onClick={() =>
+                    currentUser.following.includes(user.uid)
+                      ? handleUnfollow(
+                          currentUser.uid,
+                          currentUser.following,
+                          user.uid,
+                          user.followers
+                        )
+                      : handleFollow(
+                          currentUser.uid,
+                          currentUser.following,
+                          user.uid,
+                          user.followers
+                        )
+                  }
+                >
+                  {currentUser.following.includes(user.uid)
+                    ? "Unfollow"
+                    : "Follow"}
+                </button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text--center">No {type} user found</p>
+        )}
+      </div>
+      <div className="overlay" onClick={closeModal}></div>
+    </>
+  );
+};

src/pages/profile/Profile.jsx

@@ -1,12 +1,23 @@
 import "./profile.css";
-import { EditProfileModal, Loader, PostCard } from "../../components/";
+import {
+  EditProfileModal,
+  Loader,
+  PostCard,
+  ProfileUserModal,
+} from "../../components/";
 import { Logout } from "@mui/icons-material";
 import { useEffect, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { handleFollow, handleSignOut, handleUnfollow } from "../../service";
 import { useSelector } from "react-redux";
 import { getSortedPosts } from "../../utils";
 
+const profileUserInitialState = {
+  isShown: false,
+  type: "",
+  users: [],
+};
+
 export const Profile = () => {
   const { user } = useSelector((state) => state.auth);
   const { posts, postLoadingStatus } = useSelector((state) => state.post);
@@ -21,6 +32,14 @@ export const Profile = () => {
     isProfileUserLoggedInUser: false,
     isLoggedInUserFollowingThisProfile: false,
   });
+  const [profileUserModal, setProfileUserModal] = useState(
+    profileUserInitialState
+  );
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    setProfileUserModal(profileUserInitialState);
+  }, [pathname]);
 
   useEffect(() => {
     setCurrentProfile((prev) => ({
@@ -109,13 +128,35 @@ export const Profile = () => {
                 </p>
                 <p className="profile--details--name">Posts</p>
               </div>
-              <div className="profile--details--item">
+              <div
+                className="profile--details--item cursor--pointer"
+                tabIndex={0}
+                onClick={() =>
+                  setProfileUserModal((prev) => ({
+                    ...prev,
+                    isShown: true,
+                    users: currentProfileData.currentUser?.followers,
+                    type: "followers",
+                  }))
+                }
+              >
                 <p className="profile--details--count">
                   {currentProfileData.currentUser?.followers?.length}
                 </p>
-                <p className="profile--details--name">Followers</p>
+                <p className="profile--details--name ">Followers</p>
               </div>
-              <div className="profile--details--item">
+              <div
+                className="profile--details--item cursor--pointer"
+                tabIndex={0}
+                onClick={() =>
+                  setProfileUserModal((prev) => ({
+                    ...prev,
+                    isShown: true,
+                    users: currentProfileData.currentUser?.following,
+                    type: "following",
+                  }))
+                }
+              >
                 <p className="profile--details--count">
                   {currentProfileData.currentUser?.following?.length}
                 </p>
@@ -148,6 +189,13 @@ export const Profile = () => {
       {showEditModal && (
         <EditProfileModal closeModal={() => setEditModal(false)} />
       )}
+      {profileUserModal.isShown && (
+        <ProfileUserModal
+          profileUsers={profileUserModal.users}
+          closeModal={() => setProfileUserModal(profileUserInitialState)}
+          type={profileUserModal.type}
+        />
+      )}
       {postLoadingStatus && <Loader />}
     </>
   );

src/pages/profile/profile.css

@@ -51,6 +51,29 @@
   gap: 1rem;
 }
 
+.cursor--pointer {
+  cursor: pointer;
+}
+
+.profile--heading {
+  text-transform: capitalize;
+}
+
+.modal--profile--users {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.profile--user--close {
+  position: absolute;
+  right: 0.5rem;
+  top: 0.5rem;
+}
+
+.profile--user--close svg {
+  font-size: 1.3rem;
+}
+
 @media only screen and (max-width: 570px) {
   .profile--container {
     padding: 1rem;