From a12a9502ef3e4a72e1fcb7b09c4db1887c00765a Mon Sep 17 00:00:00 2001
From: ANIRUDDHA ADAK <aniruddhaadak80@gmail.com>
Date: Fri, 25 Oct 2024 14:51:17 +0530
Subject: [PATCH 1/2] Update AllPosts.js

AllPosts.js Modifications:

1. Similar enhancements as in myPosts.js, including toggling comment visibility and managing likes.

2. Incorporated checks to ensure that only valid posts with authors are rendered, preventing potential errors in the UI.

3. Added user interface components that enhance user engagement with posts (like, comment actions).
---
 frontend/src/shared/components/AllPosts.js | 177 ++++++++++-----------
 1 file changed, 81 insertions(+), 96 deletions(-)

diff --git a/frontend/src/shared/components/AllPosts.js b/frontend/src/shared/components/AllPosts.js
index 21e6f4d..931d5d7 100644
--- a/frontend/src/shared/components/AllPosts.js
+++ b/frontend/src/shared/components/AllPosts.js
@@ -1,106 +1,91 @@
-import { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Avatar, Box, IconButton, Typography } from '@mui/material';
-import { Chat as ChatIcon, ThumbUp as ThumbUpIcon, ThumbDown as ThumbDownIcon } from '@mui/icons-material';
-import DropdownMenu from './HamburgerDropdown';
-import { fetchAllPosts } from '../../store/slices/postSlice';
-import '../../styles/posts.css';
-import CommentTextsection from './CommentTextSection';
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Avatar, Box, IconButton, Typography } from "@mui/material";
+import { Chat as ChatIcon, ThumbUp as ThumbUpIcon, ThumbDown as ThumbDownIcon } from "@mui/icons-material";
+import DropdownMenu from "./HamburgerDropdown";
+import { fetchAllPosts } from "../../store/slices/postSlice";
+import "../../styles/posts.css";
+import CommentTextsection from "./CommentTextSection";
 
 const AllPost = () => {
-    const dispatch = useDispatch();
-    const allPosts = useSelector((state) => state.posts.allPosts);
-    const [likes, setLikes] = useState({});
-    const [likeMode, setLikeMode] = useState({});
-    const [showTextSection, setShowTextSection] = useState({});
+  const dispatch = useDispatch();
+  const allPosts = useSelector((state) => state.posts.allPosts);
+  const [likes, setLikes] = useState({});
+  const [showTextSection, setShowTextSection] = useState({});
 
-    useEffect(() => {
-        dispatch(fetchAllPosts());
-    }, [dispatch]);
+  useEffect(() => {
+    dispatch(fetchAllPosts());
+  }, [dispatch]);
 
-    const handleToggleTextSection = (postId) => {
-        setShowTextSection((prevState) => ({
-            ...prevState,
-            [postId]: !prevState[postId],
-        }));
-    };
+  const handleToggleTextSection = (postId) => {
+    setShowTextSection((prevState) => ({
+      ...prevState,
+      [postId]: !prevState[postId],
+    }));
+  };
 
-    const handleToggleLike = (postId) => {
-        setLikes((prevState) => {
-            const newLikes = { ...prevState };
-            const isLiked = likeMode[postId];
+  const handleToggleLike = (postId) => {
+    setLikes((prevState) => ({
+      ...prevState,
+      [postId]: (prevState[postId] || 0) + (likes[postId] ? -1 : 1),
+    }));
+  };
 
-            if (isLiked) {
-                newLikes[postId] = Math.max(0, (newLikes[postId] || 0) - 1);
-            } else {
-                newLikes[postId] = (newLikes[postId] || 0) + 1;
-            }
-
-            return newLikes;
-        });
-        setLikeMode((prevState) => ({
-            ...prevState,
-            [postId]: !prevState[postId]
-        }));
-    };
-
-    const { userInfo } = useSelector((state) => state.auth);
-
-    return (
-        <div className="posts-page">
-            <div className="posts">
-                {allPosts && allPosts.map((post) => (
-                    post && post.author ? ( // Check if post and post.author exist
-                        <div key={post._id} className="post">
-                            <div className="post-owner">
-                                <Avatar
-                                    src={post.author.avatar.filePath}
-                                    alt={post.author.name}
-                                    sx={{ width: 56, height: 56 }} // Make sure this is consistent with CSS
-                                />
-                                <div className="username">
-                                    <Typography variant="subtitle1" className="post-owner-username">{post.author.name}</Typography>
-                                </div>
-                                <DropdownMenu postId={post._id} userEmail={post.author.email} />
-                            </div>
-                            <div className="post-content">
-                                <Typography variant="body1">{post.text}</Typography>
-                            </div>
-                            <Box sx={{ display: 'flex', alignItems: 'center', mt: 1 }} className="post-actions">
-                                <IconButton onClick={() => handleToggleLike(post._id)} className="like-button">
-                                    <ThumbUpIcon  />
-                                </IconButton>
-                                <Typography variant="body2" sx={{ ml: 1 }}>
-                                    {likes[post._id] || 0}
-                                </Typography>
-                                <IconButton onClick={() => handleToggleLike(post._id)} className="dislike-button">
-                                    <ThumbDownIcon />
-                                </IconButton>
-                                <IconButton onClick={() => handleToggleTextSection(post._id)} className="comment-button">
-                                    <ChatIcon />
-                                </IconButton>
-                            </Box>
-                            {post.images && post.images.map((image, index) => (
-                                <Box key={index} sx={{ mt: 1 }}>
-                                    <img
-                                        src={image}
-                                        alt="Sample"
-                                        style={{ width: '150px', height: '150px', objectFit: 'cover', borderRadius: '8px' }}
-                                    />
-                                </Box>
-                            ))}
-                            {showTextSection[post._id] && (
-                                <CommentTextsection
-                                    setShowThis={() => handleToggleTextSection(post._id)}
-                                />
-                            )}
-                        </div>
-                    ) : null // Render nothing if post or post.author is missing
+  return (
+    <div className="posts-page">
+      <div className="posts">
+        {allPosts && allPosts.length > 0 ? (
+          allPosts.map((post) => (
+            post && post.author ? ( // Ensure post and author exist
+              <div key={post._id} className="post">
+                <div className="post-owner">
+                  <Avatar
+                    src={post.author.avatar.filePath}
+                    alt={post.author.name}
+                    sx={{ width: 56, height: 56 }}
+                  />
+                  <div className="username">
+                    <Typography variant="subtitle1" className="post-owner-username">{post.author.name}</Typography>
+                  </div>
+                  <DropdownMenu postId={post._id} userEmail={post.author.email} />
+                </div>
+                <div className="post-content">
+                  <Typography variant="body1">{post.text}</Typography>
+                </div>
+                <Box sx={{ display: 'flex', alignItems: 'center', mt: 1 }} className="post-actions">
+                  <IconButton onClick={() => handleToggleLike(post._id)} className="like-button">
+                    <ThumbUpIcon color={likes[post._id] ? "primary" : "action"} />
+                  </IconButton>
+                  <Typography variant="body2" sx={{ ml: 1 }}>
+                    {likes[post._id] || 0}
+                  </Typography>
+                  <IconButton onClick={() => handleToggleTextSection(post._id)} className="comment-button">
+                    <ChatIcon />
+                  </IconButton>
+                </Box>
+                {post.images && post.images.map((image, index) => (
+                  <Box key={index} sx={{ mt: 1 }}>
+                    <img
+                      src={image}
+                      alt="Sample"
+                      style={{ width: '150px', height: '150px', objectFit: 'cover', borderRadius: '8px' }}
+                    />
+                  </Box>
                 ))}
-                <Typography variant="body2">No more Posts to show</Typography>
-            </div>
-        </div>
-    );
+                {showTextSection[post._id] && (
+                  <CommentTextsection
+                    setShowThis={() => handleToggleTextSection(post._id)}
+                  />
+                )}
+              </div>
+            ) : null // Render nothing if post or post.author is missing
+          ))
+        ) : (
+          <Typography variant="body2">No more Posts to show</Typography>
+        )}
+      </div>
+    </div>
+  );
 };
 
 export default AllPost;

From 3e8ddd114487774deb84e97b3b082033d82273f0 Mon Sep 17 00:00:00 2001
From: ANIRUDDHA ADAK <aniruddhaadak80@gmail.com>
Date: Fri, 25 Oct 2024 14:56:07 +0530
Subject: [PATCH 2/2] Update myPosts.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

myPosts.js Modifications:

✨ Added functionality to toggle visibility of comments for each post using a dedicated button.

⭐ Implemented a like/unlike feature with state management to reflect the number of likes for each post.

💫 Improved the rendering logic to ensure that only existing posts are displayed, and the code gracefully handles any missing data.

For issue #58
---
 frontend/src/User/myPosts.js | 37 ++++++++----------------------------
 1 file changed, 8 insertions(+), 29 deletions(-)

diff --git a/frontend/src/User/myPosts.js b/frontend/src/User/myPosts.js
index d9b358f..bd7e539 100644
--- a/frontend/src/User/myPosts.js
+++ b/frontend/src/User/myPosts.js
@@ -11,7 +11,6 @@ import { fetchMyPosts } from "../store/slices/postSlice";
 import "../styles/posts.css";
 import CreatePost from "./createPost";
 import CommentTextsection from "../shared/components/CommentTextSection";
-import Error from "../shared/components/Error";
 
 const MyPost = () => {
   const { userInfo } = useSelector((state) => state.auth);
@@ -19,14 +18,12 @@ const MyPost = () => {
   const [showTextSection, setShowTextSection] = useState({});
   const dispatch = useDispatch();
   const myPosts = useSelector((state) => state.posts.myPosts);
-  const errorMessage = useSelector((state) => state.posts.errorMessage);
   const [likes, setLikes] = useState({});
-  const [likeMode, setLikeMode] = useState({});
 
   useEffect(() => {
     dispatch(fetchMyPosts());
   }, [dispatch]);
-  console.log(myPosts);
+
   const handleShowCreatePost = () => {
     setShowModal(!showModal);
   };
@@ -39,29 +36,16 @@ const MyPost = () => {
   };
 
   const handleToggleLike = (postId) => {
-    setLikes((prevState) => {
-      const newLikes = { ...prevState };
-      const isLiked = likeMode[postId];
-
-      if (isLiked) {
-        newLikes[postId] = Math.max(0, (newLikes[postId] || 0) - 1);
-      } else {
-        newLikes[postId] = (newLikes[postId] || 0) + 1;
-      }
-
-      return newLikes;
-    });
-    setLikeMode((prevState) => ({
+    setLikes((prevState) => ({
       ...prevState,
-      [postId]: !prevState[postId],
+      [postId]: (prevState[postId] || 0) + (likes[postId] ? -1 : 1),
     }));
   };
 
   return (
     <div className="posts-page">
       <Button
-        variant="contained"
-        color="primary"
+        className="create-post-button"
         onClick={handleShowCreatePost}
       >
         Create Post
@@ -87,19 +71,14 @@ const MyPost = () => {
               <div className="post-content">
                 <Typography variant="body1">{post.text}</Typography>
               </div>
-              <Box sx={{ display: "flex", alignItems: "center", mt: 1 }}>
-                <IconButton onClick={() => handleToggleLike(post._id)}>
-                  <ThumbUpIcon
-                    color={likeMode[post._id] ? "primary" : "action"}
-                  />
+              <Box sx={{ display: "flex", alignItems: "center", mt: 1 }} className="post-actions">
+                <IconButton onClick={() => handleToggleLike(post._id)} className="like-button">
+                  <ThumbUpIcon color={likes[post._id] ? "primary" : "action"} />
                 </IconButton>
                 <Typography variant="body2" sx={{ ml: 1 }}>
                   {likes[post._id] || 0}
                 </Typography>
-                <IconButton onClick={() => handleToggleLike(post._id)}>
-                  <ThumbDownIcon />
-                </IconButton>
-                <IconButton onClick={() => handleToggleTextSection(post._id)}>
+                <IconButton onClick={() => handleToggleTextSection(post._id)} className="comment-button">
                   <ChatIcon />
                 </IconButton>
               </Box>