Integrating post edit share and delete functionalities

package.json

@@ -43,6 +43,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.0",
     "react-shapes": "^0.1.0",
+    "react-share": "^4.2.1",
     "react-spinners": "^0.8.3",
     "react-switch": "^5.0.1",
     "react-toastify": "^6.0.5",

src/actions/postAction.js

@@ -81,7 +81,7 @@ export const updatePost = (postId, updatedInfo) => async (dispatch) => {
     console.log("updatedPostInfo ", updatedInfo);
     const res = await axios.patch(`${BASE_URL}/post/${postId}`, updatedInfo);
     if (res.status === 200) {
-      dispatch(getPostById(postId));
+      dispatch(getAllPosts());
     }
   } catch (error) {
     dispatch(errorHandler(error));
@@ -103,7 +103,10 @@ export const deletePost = (postId) => async (dispatch) => {
 // REMOVE REACTION
 export const removeReaction = (postId, type) => async (dispatch) => {
   try {
-    const res = await axios.patch(`${BASE_URL}/post/removereaction/${postId}`, type);
+    const res = await axios.patch(
+      `${BASE_URL}/post/removereaction/${postId}`,
+      type
+    );
     if (res.status === 200) {
       dispatch(getAllPosts());
     }

src/css/components/_modals.scss

@@ -124,6 +124,9 @@
         }
       }
     }
+    .modal__body-sharebutton {
+      margin-right: 8px;
+    }
     .modal__mini-title {
       font-family: $font-family-Inter;
       font-style: normal;
@@ -479,26 +482,26 @@
 }
 
 .modal__body {
-   .modal__setting__btn__container {
-     .modal__save {
-       background: $color-modal-button-active;
-       box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
-       // border-radius: 34px;
-       width: 80px;
-       height: 38.5px;
-       margin-right: 20px;
-       margin-bottom: 10px;
+  .modal__setting__btn__container {
+    .modal__save {
+      background: $color-modal-button-active;
+      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+      // border-radius: 34px;
+      width: 80px;
+      height: 38.5px;
+      margin-right: 20px;
+      margin-bottom: 10px;
 
-       .modal__buttontext {
-         font-family: $font-family-Inter;
-         font-style: normal;
-         font-weight: bold;
-         font-size: 14px;
-         line-height: 22px;
-         /* identical to box height */
+      .modal__buttontext {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 22px;
+        /* identical to box height */
 
-         color: #ffffff;
-       }
-     }
-   }
+        color: #ffffff;
+      }
+    }
+  }
 }

src/user/dashboard/news-feed/news-feed.js

@@ -18,7 +18,6 @@ import { Button, Dropdown } from "react-bootstrap";
 import AddEventModal from "./popups/AddEventModal";
 import AddProjectModal from "./popups/AddProjectModal";
 import PostReactionModal from "./popups/PostReactionsModal";
-// import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
 import ChatBubbleIcon from "@material-ui/icons/ChatBubble";
 import "../../pinned-posts/posts/posts.scss";
 import "./news-feed.scss";
@@ -37,6 +36,9 @@ import { FaEllipsisH, FaThumbtack } from "react-icons/fa";
 import ReactionsElement from "./ReactionsElement";
 import { pinPost } from "../../../actions/postAction";
 import Moment from "react-moment";
+import EditPostModal from "./popups/EditPost";
+import DeletePostModal from "./popups/DeletePost";
+import SharePostModal from "./popups/SharePost";
 
 // const reactionVariant = {
 //   hover: {
@@ -143,13 +145,29 @@ function NewsFeed(props) {
   const [displayReactionContainer, setDisplayReactioContainer] = useState(
     false
   );
+  const [editPost, setShowEditPost] = useState(false);
+  const [sharePost, setShowSharePost] = useState(false);
+  const [deletePost, setShowDeletePost] = useState(false);
+  const [userId, setUserId] = useState(localStorage.getItem("userId"));
+  const [postInfo, setPostInfo] = useState({});
+  const [deletePostId, setDeletePostId] = useState("");
+  const [shareableContent, setSharableContent] = useState("");
+
+  const FILTER_TAGS_REGEX = new RegExp(/(<([^>]+)>)/gi);
 
   useEffect(() => {
-    console.log("useEffect from news-feed ", props);
-    setEvents(props?.allEvents);
-    setAllProjects(props?.allProjects);
-    setAllPosts(props?.allPosts);
-  }, [props.allEvents, props.allPosts, props.allProjects, props]);
+    const { allEvents, allProjects, allPosts } = props;
+
+    setEvents(allEvents);
+    setAllProjects(allProjects);
+    setAllPosts(allPosts);
+  }, [
+    props.allEvents,
+    props.allPosts,
+    props.allProjects,
+    props.singlePost,
+    props,
+  ]);
 
   useEffect(() => {
     window.addEventListener("scroll", () => {
@@ -169,11 +187,14 @@ function NewsFeed(props) {
     // second("s");
   };
 
-  let handleShow = (modalName) => {
+  let handleShow = (modalName, post) => {
     if (modalName === "project") {
       setShowProject(true);
     } else if (modalName === "event") {
       setShowEvent(true);
+    } else if (modalName === "edit") {
+      setPostInfo(post);
+      setShowEditPost(true);
     }
   };
 
@@ -182,6 +203,12 @@ function NewsFeed(props) {
       setShowProject(false);
     } else if (modalName === "event") {
       setShowEvent(false);
+    } else if (modalName === "edit") {
+      setPostInfo({});
+      setShowEditPost(false);
+    } else if (modalName === "delete") {
+      setPostInfo({});
+      setShowDeletePost(false);
     }
   };
 
@@ -228,6 +255,26 @@ function NewsFeed(props) {
     setShowReactions(false);
   };
 
+  let showDeletePostModal = (postId) => {
+    setDeletePostId(postId);
+    setShowDeletePost(true);
+  };
+
+  let hideDeletePostModal = () => {
+    setDeletePostId("");
+    setShowDeletePost(false);
+  };
+
+  let showSharePostModal = (content) => {
+    setSharableContent(content);
+    setShowSharePost(true);
+  };
+
+  let hideSharePostModal = () => {
+    setSharableContent("");
+    setShowSharePost(false);
+  };
+
   let onPinPost = (postId) => {
     console.log("Pinning post ", postId);
     props.pinPost(postId);
@@ -273,7 +320,7 @@ function NewsFeed(props) {
       votes.donut?.user.length;
 
     return (
-      <div className="grid" key={post._id}>
+      <div className="grid" key={post?._id}>
         <Paper elevation={1} className={classes.paper}>
           <Card className={classes.root} variant="outlined">
             <List className={classes.listStyle}>
@@ -302,11 +349,45 @@ function NewsFeed(props) {
                   >
                     <FaEllipsisH />
                   </Dropdown.Toggle>
-                  <Dropdown.Menu>
-                    <Dropdown.Item eventKey="1">Edit</Dropdown.Item>
-                    <Dropdown.Item eventKey="2">Share</Dropdown.Item>
-                    <Dropdown.Item eventKey="3">Delete</Dropdown.Item>
-                  </Dropdown.Menu>
+                  {post?.userId?._id === userId ? (
+                    <Dropdown.Menu>
+                      <Dropdown.Item
+                        eventKey="1"
+                        onClick={() => handleShow("edit", post)}
+                      >
+                        Edit
+                      </Dropdown.Item>
+                      <Dropdown.Item
+                        eventKey="2"
+                        onClick={() =>
+                          showSharePostModal(
+                            post?.content.replace(FILTER_TAGS_REGEX, "")
+                          )
+                        }
+                      >
+                        Share
+                      </Dropdown.Item>
+                      <Dropdown.Item
+                        eventKey="3"
+                        onClick={() => showDeletePostModal(post._id)}
+                      >
+                        Delete
+                      </Dropdown.Item>
+                    </Dropdown.Menu>
+                  ) : (
+                    <Dropdown.Menu>
+                      <Dropdown.Item
+                        eventKey="2"
+                        onClick={() =>
+                          showSharePostModal(
+                            post?.content.replace(/(<([^>]+)>)/gi, "")
+                          )
+                        }
+                      >
+                        Share
+                      </Dropdown.Item>
+                    </Dropdown.Menu>
+                  )}
                 </Dropdown>
               </ListItem>
               <div className="post-details2">{parse(post?.content)}</div>
@@ -563,6 +644,27 @@ function NewsFeed(props) {
               handleClose("project");
             }}
           />
+          <EditPostModal
+            show={editPost}
+            handleClose={() => {
+              handleClose("edit");
+            }}
+            postInfo={postInfo}
+          />
+          <DeletePostModal
+            show={deletePost}
+            handleClose={() => {
+              hideDeletePostModal();
+            }}
+            postId={deletePostId}
+          />
+          <SharePostModal
+            show={sharePost}
+            handleClose={() => {
+              hideSharePostModal();
+            }}
+            sharableContent={shareableContent}
+          />
         </div>
       </div>
       <div className="news__feed__container">

src/user/dashboard/news-feed/popups/DeletePost.js

@@ -0,0 +1,58 @@
+import React from "react";
+import { Button, Modal, Form } from "react-bootstrap";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { deletePost } from "../../../../actions/postAction";
+
+const DeletePostModal = (props) => {
+  const handleDeletePostClick = () => {
+    props.deletePost(props.postId);
+    props.handleClose();
+  };
+
+  return (
+    <Modal
+      show={props.show}
+      onHide={() => props.handleClose()}
+      animation={true}
+      className="modal"
+      centered
+      size="lg"
+    >
+      <Modal.Header closeButton className="modal__header">
+        <Modal.Title className="modal__title" style={props.borderStyle}>
+          <div className="modal__main-title">Delete Post?</div>
+          <div className="modal__mini-title">
+            Are you sure you want to delete this post?
+          </div>
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="modal__body">
+        <Form className="modal__form">
+          <div className="modal__buttons">
+            <Button
+              onClick={() => handleDeletePostClick()}
+              className="modal__save"
+            >
+              <span className="modal__buttontext">Yes</span>
+            </Button>
+            <Button
+              className="modal__cancel"
+              onClick={() => props.handleClose()}
+            >
+              <span className="modal__buttontext">No</span>
+            </Button>
+          </div>
+        </Form>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+DeletePostModal.propTypes = {
+  handleClose: PropTypes.func,
+  show: PropTypes.bool,
+  style: PropTypes.object,
+};
+
+export default connect(null, { deletePost })(DeletePostModal);