Add option to like, comment and share on profile feed hover

src/pages/Profile/feed/index.css

@@ -22,9 +22,19 @@
   aspect-ratio: 1;
   padding: 8px;
   cursor: pointer;
+  display: flex;
+  align-items: center;
   transition: 0.4s ease-in-out;
 }
 
+.profile_post_sub_container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .post_sub_container {
   width: 100%;
   height: 100%;
@@ -36,6 +46,38 @@
   object-fit: cover;
 }
 
+.profile_post_hover_container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(0,0,0,0.5);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.profile_post_hover_icon{
+  transform: scale(1.8);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.2s ease-in-out;
+  background-color: transparent;
+  border: none;
+  color: white !important;
+  cursor: pointer;
+}
+
+.profile_post_hover_icon:hover {
+  background: rgba(255, 255, 255, 0.25);
+  padding: 10px;
+}
+
+
 @media screen and (min-width: 800px) and (max-width: 1200px) {
   .profile-feed-main-container {
     margin-left: 5px;

src/pages/Profile/feed/index.jsx

@@ -1,59 +1,29 @@
 import "./index.css";
 
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { Box, useMediaQuery } from "@mui/material";
+import { doc, updateDoc } from "firebase/firestore";
+import {
+  ChatBubbleOutlineRounded,
+  FavoriteOutlined,
+  FavoriteBorderOutlined,
+  ShareOutlined,
+} from "@mui/icons-material";
+import { auth, db } from "../../../lib/firebase";
 
 import ErrorBoundary from "../../../reusableComponents/ErrorBoundary";
-import postBg from "../../../assets/postbg.webp";
-import { useNavigate } from "react-router-dom";
+import { ShareModal } from "../../../reusableComponents";
 
-const ProfieFeed = ({ feed }) => {
-  const navigate = useNavigate();
-  const isMobileScreen = useMediaQuery("(max-width: 600px)");
-  const isTabScreen = useMediaQuery("(max-width: 950px)");
+const userUid = auth?.currentUser?.uid;
 
+const ProfieFeed = ({ feed }) => {
   return (
     <Box className="profile-feed-main-container">
       <div className="app__posts__feed" id="feed-sub-container">
         <ErrorBoundary>
           {feed.map(({ post, id }) => (
-            <div
-              className="post_container"
-              key={id}
-              onClick={() => navigate(`/dummygram/posts/${id}`)}
-            >
-              {post.imageUrl == "" ? (
-                <div className="post_sub_container">
-                  <img
-                    src={postBg}
-                    alt={post.displayName}
-                    className="post_image"
-                  />
-                  {isMobileScreen ? (
-                    <p className="caption_without_image">
-                      {post.caption.length > 50
-                        ? post.caption.slice(0, 50) + "..."
-                        : post.caption}
-                    </p>
-                  ) : isTabScreen ? (
-                    <p className="caption_without_image">
-                      {post.caption.length > 110
-                        ? post.caption.slice(0, 110) + "..."
-                        : post.caption}
-                    </p>
-                  ) : (
-                    <p className="caption_without_image">{post.caption}</p>
-                  )}
-                </div>
-              ) : (
-                <div className="post_sub_container" key={id}>
-                  <img
-                    src={JSON.parse(post.imageUrl)[0].imageUrl}
-                    alt={post.username}
-                    className="post_image"
-                  />
-                </div>
-              )}
-            </div>
+            <FeedPostDisplay post={post} id={id} />
           ))}
         </ErrorBoundary>
       </div>
@@ -62,3 +32,121 @@ const ProfieFeed = ({ feed }) => {
 };
 
 export default ProfieFeed;
+
+
+function FeedPostDisplay({ post, id }) {
+  const navigate = useNavigate();
+  const [hover, setHover] = useState(false)
+  const [openShareModal, setOpenShareModal] = useState(false);
+
+  const isMobileScreen = useMediaQuery("(max-width: 600px)");
+  const isTabScreen = useMediaQuery("(max-width: 950px)");
+  const defaultBg = `linear-gradient(130deg, #dee2ed, #dee2ed, #9aa9d1, #b6c8e3, #b6afd0, #d3c0d8)`;
+
+  async function likesHandler() {
+    if (userUid && post.likecount !== undefined) {
+      let ind = post.likecount.indexOf(userUid);
+      const tempLikeCount = post.likecount
+
+      if (ind !== -1) {
+        tempLikeCount.splice(ind, 1);
+      } else {
+        tempLikeCount.push(userUid);
+      }
+
+      const data = {
+        likecount: tempLikeCount,
+      };
+      const docRef = doc(db, "posts", id);
+      await updateDoc(docRef, data)
+        .catch((error) => {
+          console.error("Error", error)
+        });
+    }
+  }
+
+  return (
+    <div
+      className="post_container"
+      key={id}
+      onClick={() => navigate(`/dummygram/posts/${id}`)}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+    >
+      {post.imageUrl == "" ? (
+        <div
+          className="profile_post_sub_container"
+          style={{ background: post.background ? post.background : defaultBg }}
+        >
+          {isMobileScreen ? (
+            <p className="caption_without_image">
+              {post.caption.length > 50
+                ? post.caption.slice(0, 50) + "..."
+                : post.caption}
+            </p>
+          ) : isTabScreen ? (
+            <p className="caption_without_image">
+              {post.caption.length > 110
+                ? post.caption.slice(0, 110) + "..."
+                : post.caption}
+            </p>
+          ) : (
+            <p className="caption_without_image">{post.caption}</p>
+          )}
+        </div>
+      ) : (
+        <div className="post_sub_container" key={id}>
+          <img
+            src={JSON.parse(post.imageUrl)[0].imageUrl}
+            alt={post.username}
+            className="post_image"
+          />
+        </div>
+      )}
+
+      {hover && (
+        <div className="profile_post_hover_container">
+          <button
+            className="profile_post_hover_icon"
+            onClick={(e) => {
+              e.stopPropagation();
+              likesHandler();
+            }}
+          >
+            {post.likecount.indexOf(userUid) != -1 ? (
+              <FavoriteOutlined
+                sx={{
+                  color: "red",
+                }}
+              />
+            ) : (
+              <FavoriteBorderOutlined
+                style={{ color: "var(--post-nav-icons)" }}
+              />
+            )}
+          </button>
+          <Link to={`/dummygram/posts/${id}`} style={{ color: "white" }} className="profile_post_hover_icon">
+            <ChatBubbleOutlineRounded />
+          </Link>
+          <button
+            className="profile_post_hover_icon"
+            onClick={(e) => {
+              e.stopPropagation();
+              setOpenShareModal(prev => !prev);
+            }}
+          >
+            <ShareOutlined />
+          </button>
+        </div>
+      )}
+
+      {openShareModal && (
+        <ShareModal
+          openShareModal={openShareModal}
+          setOpenShareModal={setOpenShareModal}
+          currentPostLink={`https://narayan954.github.io/dummygram/posts/${id}`}
+          postText={post.caption}
+        />)}
+    </div>
+  )
+}