Post liker list

src/App.jsx

@@ -24,6 +24,7 @@ const SignupScreen = React.lazy(() => import("./pages/Signup"));
 const ForgotPassword = React.lazy(() => import("./pages/ForgotPassword"));
 const NotFound = React.lazy(() => import("./pages/NotFound"));
 const Settings = React.lazy(() => import("./pages/Settings"));
+const Likes = React.lazy(() => import("./pages/Likes"))
 const Contributors = React.lazy(() =>
   import("./pages/FooterPages/ContributorPage/index"),
 );
@@ -358,6 +359,15 @@ function App() {
               }
             />
 
+            <Route
+              path="/dummygram/posts/:id/likes"
+              element={
+                <ErrorBoundary inApp={true}>
+                  <Likes />
+                </ErrorBoundary>
+              }
+            />
+
             <Route path="*" element={<NotFound />} />
             <Route
               path="/dummygram/favourites"

src/components/Post/index.jsx

@@ -21,6 +21,7 @@ import { db } from "../../lib/firebase";
 import firebase from "firebase/compat/app";
 import { useSnackbar } from "notistack";
 import { useTheme } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
 
 const PostHeader = lazy(() => import("./PostHeader"));
 const CommentBox = lazy(() => import("./CommentBox"));
@@ -44,6 +45,7 @@ function Post(prop) {
   const theme = useTheme();
   const { enqueueSnackbar } = useSnackbar();
   const fullScreen = useMediaQuery(theme.breakpoints.down("md"));
+  const navigate = useNavigate()
 
   const docRef = doc(db, "posts", postId);
   useEffect(() => {
@@ -206,7 +208,8 @@ function Post(prop) {
             marginLeft={1}
             fontSize={13}
             padding={1}
-            sx={{ color: "grey" }}
+            sx={{ color: "grey", cursor: "pointer" }}
+            onClick={() => navigate(`/dummygram/posts/${postId}/likes`)}
           >
             {likesNo} {likesNo > 1 ? "Likes" : "Like"}
           </Typography>

src/pages/Likes/index.css

@@ -0,0 +1,80 @@
+.likedby_main_container {
+    border-radius: 10px;
+    padding: 20px;
+    z-index: 99;
+    margin-left: 17vw;
+    margin-top: 70px;
+  }
+
+  .likedby_header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid #eee;
+    margin-bottom: 20px;
+  }
+
+  .likedby_list_container {
+    padding: 20px;
+  }
+
+  .likedby_close_icon {
+    transform: scale(1.3);
+    border-radius: 50%;
+    padding: 10px;
+    cursor: pointer;
+    z-index: 999;
+  }
+
+  .likedby_close_icon:hover {
+    background: rgba(0,0,0,0.1);
+  }
+
+  .likedby_list_item {
+    max-width: 650px;
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    border: 1px solid #aca7a7;
+    box-shadow: 1px 1px 5px #989595;
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 10px;
+  }
+
+  .like_user_img {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    aspect-ratio: 1;
+    border: 1px solid #eee;
+    box-shadow: 1px 1px 2px, -1px -1px 2px;
+    transition: 0.3s ease-in-out;
+    cursor: pointer;
+  }
+
+  .like_user_img:hover {
+    transform: scale(1.1);
+  }
+
+  .like_user_name {
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .like_user_name:hover {
+    text-decoration: underline;
+  }
+
+  @media screen and (max-width: 1200px) {
+    .likedby_main_container {
+      margin-left: 8vw;
+    }
+  }
+
+  @media screen and (max-width: 800px) {
+    .likedby_main_container {
+      margin-left: 0;
+    }
+  }

src/pages/Likes/index.jsx

@@ -0,0 +1,95 @@
+import "./index.css"
+import { useEffect, useState } from 'react'
+import CloseIcon from '@mui/icons-material/Close';
+import { SideBar } from "../../components";
+import { db } from "../../lib/firebase"
+import { useSnackbar } from "notistack";
+import { Loader } from '../../reusableComponents';
+import { useNavigate, useParams } from "react-router-dom";
+
+const LikedBy = () => {
+    const [userData, setUserData] = useState([])
+    const [isLoading, setIsLoading] = useState(true)
+    const { enqueueSnackbar } = useSnackbar();
+    const { id } = useParams();
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const fetchData = async () => {
+            const fetchLikeList = async (id) => {
+                const docRef = db.collection("posts").doc(id);
+                const docSnapshot = await docRef.get();
+                return docSnapshot.data().likecount;
+            };
+
+            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 likeListData = await fetchLikeList(id);
+
+            const userData = await Promise.all(likeListData.map((uid) => fetchUserDocsByUID(uid)));
+            setUserData(userData);
+            setIsLoading(false);
+        };
+
+        fetchData();
+    }, []);
+
+
+    return (
+        <>
+        <SideBar />
+            <div className="likedby_main_container">
+                <div className='likedby_header'>
+                    <CloseIcon className='likedby_close_icon' onClick={() => navigate("/dummygram/")} />
+                    <h2>Liked By</h2>
+                </div>
+                {!isLoading ? (
+                    <div className='likedby_list_container'>
+                        {userData.map((data) => (
+                            <div key={data.uid} className="likedby_list_item">
+                                <span>
+                                    <img
+                                        src={data.photoURL}
+                                        alt={data.name}
+                                        className='like_user_img'
+                                        onClick={() => navigate(`/dummygram/${data.username}`)}
+                                    />
+                                </span>
+                                <span>
+                                    <h3 
+                                        className="like_user_name"
+                                        onClick={() => navigate(`/dummygram/${data.username}`)}
+                                    >
+                                        {data.name}
+                                    </h3>
+                                    <h5>@{data.username}</h5>
+                                    <p>{data.bio ? data.bio : "..."}</p>
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <Loader />
+                )}
+            </div>
+        </>
+    )
+}
+
+export default LikedBy

src/pages/index.js

@@ -7,6 +7,7 @@ import Profile from "./Profile";
 import Settings from "./Settings";
 import SignupScreen from "./Signup";
 import ChatPage from "./Chat";
+import Likes from "./Likes";
 
 export {
   About,
@@ -18,4 +19,5 @@ export {
   Profile,
   Settings,
   SignupScreen,
+  Likes,
 };