Post liker list

src/components/Post/LikesDialogBox.jsx

@@ -0,0 +1,94 @@
+import "./index.css";
+import { Box } from "@mui/material";
+import { useEffect, useState } from "react";
+import { db } from "../../lib/firebase";
+import { useSnackbar } from "notistack";
+import { Loader } from "../../reusableComponents";
+import { useNavigate } from "react-router-dom";
+import blankProfileImg from "../../assets/blank-profile.webp";
+
+const LikesDialogBox = ({ likecountArr }) => {
+  const [userData, setUserData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { enqueueSnackbar } = useSnackbar();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const fetchUserDocsByUID = async (uid) => {
+        try {
+          const docRef = db.collection("users").doc(uid);
+          const docSnapshot = await docRef.get();
+          if (docSnapshot.exists) {
+            return docSnapshot.data();
+          } else {
+            enqueueSnackbar("User not found", {
+              variant: "error",
+            });
+          }
+        } catch (error) {
+          enqueueSnackbar(error, {
+            variant: "error",
+          });
+        }
+      };
+
+      const userData = await Promise.all(
+        likecountArr?.map((uid) => fetchUserDocsByUID(uid)),
+      );
+      setUserData(userData);
+      setIsLoading(false);
+    };
+
+    fetchData();
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        overflowY: "scroll",
+        "&::-webkit-scrollbar": {
+          width: 0,
+        },
+      }}
+      borderRadius="10px"
+      maxHeight="40vh"
+      marginTop="10px"
+    >
+      {!isLoading ? (
+        <div className="likedby_list_container">
+          {userData.map((data) => (
+            <div key={data.uid} className="likedby_list_item">
+              <span>
+                <img
+                  src={data?.photoURL ? data.photoURL : blankProfileImg}
+                  alt={data?.name}
+                  className="like_user_img"
+                  onClick={() => navigate(`/dummygram/user/${data?.username}`)}
+                />
+              </span>
+              <span>
+                <section className="like_user_data">
+                  <h3
+                    className="like_user_name"
+                    onClick={() =>
+                      navigate(`/dummygram/user/${data?.username}`)
+                    }
+                  >
+                    {data?.name}
+                  </h3>
+                  <h5 className="like_user_username">@{data?.username}</h5>
+                </section>
+                <p className="like_user_bio">{data?.bio ? data.bio : "..."}</p>
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <Loader />
+      )}
+    </Box>
+  );
+};
+
+export default LikesDialogBox;

src/components/Post/index.css

@@ -64,15 +64,13 @@
 
 .post__background {
   min-height: 200px;
-  background: linear-gradient(
-    130deg,
-    #dee2ed,
-    #dee2ed,
-    #9aa9d1,
-    #b6c8e3,
-    #b6afd0,
-    #d3c0d8
-  );
+  background: linear-gradient(130deg,
+      #dee2ed,
+      #dee2ed,
+      #9aa9d1,
+      #b6c8e3,
+      #b6afd0,
+      #d3c0d8);
 
   background-size: cover;
   color: black;
@@ -151,6 +149,7 @@
   background: lightgray;
   border-radius: 10px;
 }
+
 .commentCard .comment span {
   color: var(--text-black-only) !important;
 }
@@ -175,9 +174,11 @@
   text-decoration: none;
   color: black;
 }
+
 .comment-doer-name {
   color: rgb(42, 42, 135);
 }
+
 .comment-doer-name:hover {
   text-decoration: underline;
 }
@@ -281,6 +282,56 @@
   border-radius: 100%;
 }
 
+.likedby_list_container {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 3px;
+  gap: 8px;
+}
+
+.likedby_list_item {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+  border-radius: 8px;
+  color: black;
+  background: lightgray;
+}
+
+.like_user_img {
+  width: 50px !important;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 1px solid;
+  transition: 0.3s ease-in-out;
+}
+
+.like_user_img:hover {
+  transform: scale(1.1);
+}
+
+.like_user_data {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.like_user_name {
+  cursor: pointer;
+  font-weight: 600;
+  color: rgb(42, 42, 135);
+}
+
+.like_user_name:hover {
+  text-decoration: underline;
+}
+
+.like_user_username {
+  font-weight: 500;
+  color: var(--text-black-only);
+}
+
 @media only screen and (max-width: 800px) {
   .post__commentBox input {
     width: 200px;
@@ -307,4 +358,22 @@
     padding: 5px;
     margin-top: 25px;
   }
-}
+
+  .like_user_data {
+    flex-direction: column;
+    gap: 0;
+    align-items: flex-start;
+  }
+
+  .like_user_name {
+    font-size: 16px;
+  }
+
+  .like_user_username {
+    margin-top: -5px;
+  }
+
+  .like_user_bio {
+    font-size: 14px;
+  }
+}

src/components/Post/index.jsx

@@ -25,6 +25,7 @@ import { useTheme } from "@mui/material/styles";
 const PostHeader = lazy(() => import("./PostHeader"));
 const CommentBox = lazy(() => import("./CommentBox"));
 const CommentDialogBox = lazy(() => import("./CommentDialogBox"));
+const LikesDialogBox = lazy(() => import("./LikesDialogBox"));
 const ImgBox = lazy(() => import("./ImgBox"));
 const PostNav = lazy(() => import("./PostNav"));
 
@@ -39,6 +40,7 @@ function Post(prop) {
   const [showEmojis, setShowEmojis] = useState(false);
   const [showCommentEmojis, setShowCommentEmojis] = useState(false);
   const [isCommentOpen, setisCommentOpen] = useState(false);
+  const [isLikesOpen, setIsLikesOpen] = useState(false);
   const [deleteCommentID, setDeleteCommentID] = useState("");
   const [openToDeleteComment, setOpenToDeleteComment] = useState(false);
   const [username, setUsername] = useState("");
@@ -214,7 +216,8 @@ function Post(prop) {
             marginLeft={1}
             fontSize={13}
             padding={1}
-            sx={{ color: "grey" }}
+            sx={{ color: "grey", cursor: "pointer" }}
+            onClick={() => setIsLikesOpen((prev) => !prev)}
           >
             {likesNo} {likesNo > 1 ? "Likes" : "Like"}
           </Typography>
@@ -255,6 +258,8 @@ function Post(prop) {
                 user={user}
               />
             </ErrorBoundary>
+
+            {/* Comments dialog box */}
             <DialogBox
               open={isCommentOpen}
               onClose={handleCommentClose}
@@ -305,6 +310,15 @@ function Post(prop) {
                 />
               </ErrorBoundary>
             </DialogBox>
+
+            {/* Likes Dialog Box */}
+            <DialogBox
+              open={isLikesOpen}
+              onClose={() => setIsLikesOpen(false)}
+              title="Likes ❤"
+            >
+              <LikesDialogBox likecountArr={likecount} />
+            </DialogBox>
           </div>
         )}
       </div>

src/reusableComponents/DialogBox/index.css

@@ -0,0 +1,6 @@
+@media only screen and (max-width: 460px) {
+    .dialog_box_container {
+        padding: 10px 12px;
+    }
+
+}

src/reusableComponents/DialogBox/index.jsx

@@ -1,3 +1,4 @@
+import "./index.css";
 // To use this dialog box create a useState and pass them as open and onClose
 // open is a boolean value to show the dialog box
 
@@ -45,6 +46,7 @@ const DialogBox = ({
           color: "var(--color)",
           backgroundColor: "var(--dark-post-bg)",
         }}
+        className="dialog_box_container"
       >
         <div>{children}</div>
       </DialogContent>