Skip to content

Commit 48d0d88

Browse files
vaibhavdarenvaibhavdaren
authored
Merge pull request #568 from AuraOfDivinity/post-integrations
Integrating post edit share and delete functionalities
2 parents 9147237 + a436f98 commit 48d0d88

File tree

8 files changed

+569
-35
lines changed

8 files changed

+569
-35
lines changed

‎package-lock.json‎

Lines changed: 27 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"react-router-dom": "^5.1.2",
4444
"react-scripts": "^3.4.0",
4545
"react-shapes": "^0.1.0",
46+
"react-share": "^4.2.1",
4647
"react-spinners": "^0.8.3",
4748
"react-switch": "^5.0.1",
4849
"react-toastify": "^6.0.5",

‎src/actions/postAction.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const updatePost = (postId, updatedInfo) => async (dispatch) => {
8181
console.log("updatedPostInfo ", updatedInfo);
8282
const res = await axios.patch(`${BASE_URL}/post/${postId}`, updatedInfo);
8383
if (res.status === 200) {
84-
dispatch(getPostById(postId));
84+
dispatch(getAllPosts());
8585
}
8686
} catch (error) {
8787
dispatch(errorHandler(error));
@@ -103,7 +103,10 @@ export const deletePost = (postId) => async (dispatch) => {
103103
// REMOVE REACTION
104104
export const removeReaction = (postId, type) => async (dispatch) => {
105105
try {
106-
const res = await axios.patch(`${BASE_URL}/post/removereaction/${postId}`, type);
106+
const res = await axios.patch(
107+
`${BASE_URL}/post/removereaction/${postId}`,
108+
type
109+
);
107110
if (res.status === 200) {
108111
dispatch(getAllPosts());
109112
}

‎src/css/components/_modals.scss‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,9 @@
124124
}
125125
}
126126
}
127+
.modal__body-sharebutton {
128+
margin-right: 8px;
129+
}
127130
.modal__mini-title {
128131
font-family: $font-family-Inter;
129132
font-style: normal;
@@ -479,26 +482,26 @@
479482
}
480483

481484
.modal__body {
482-
.modal__setting__btn__container {
483-
.modal__save {
484-
background: $color-modal-button-active;
485-
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
486-
// border-radius: 34px;
487-
width: 80px;
488-
height: 38.5px;
489-
margin-right: 20px;
490-
margin-bottom: 10px;
485+
.modal__setting__btn__container {
486+
.modal__save {
487+
background: $color-modal-button-active;
488+
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
489+
// border-radius: 34px;
490+
width: 80px;
491+
height: 38.5px;
492+
margin-right: 20px;
493+
margin-bottom: 10px;
491494

492-
.modal__buttontext {
493-
font-family: $font-family-Inter;
494-
font-style: normal;
495-
font-weight: bold;
496-
font-size: 14px;
497-
line-height: 22px;
498-
/* identical to box height */
495+
.modal__buttontext {
496+
font-family: $font-family-Inter;
497+
font-style: normal;
498+
font-weight: bold;
499+
font-size: 14px;
500+
line-height: 22px;
501+
/* identical to box height */
499502

500-
color: #ffffff;
501-
}
502-
}
503-
}
503+
color: #ffffff;
504+
}
505+
}
506+
}
504507
}

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

Lines changed: 115 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { Button, Dropdown } from "react-bootstrap";
1818
import AddEventModal from "./popups/AddEventModal";
1919
import AddProjectModal from "./popups/AddProjectModal";
2020
import PostReactionModal from "./popups/PostReactionsModal";
21-
// import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
2221
import ChatBubbleIcon from "@material-ui/icons/ChatBubble";
2322
import "../../pinned-posts/posts/posts.scss";
2423
import "./news-feed.scss";
@@ -37,6 +36,9 @@ import { FaEllipsisH, FaThumbtack } from "react-icons/fa";
3736
import ReactionsElement from "./ReactionsElement";
3837
import { pinPost } from "../../../actions/postAction";
3938
import Moment from "react-moment";
39+
import EditPostModal from "./popups/EditPost";
40+
import DeletePostModal from "./popups/DeletePost";
41+
import SharePostModal from "./popups/SharePost";
4042

4143
// const reactionVariant = {
4244
// hover: {
@@ -143,13 +145,29 @@ function NewsFeed(props) {
143145
const [displayReactionContainer, setDisplayReactioContainer] = useState(
144146
false
145147
);
148+
const [editPost, setShowEditPost] = useState(false);
149+
const [sharePost, setShowSharePost] = useState(false);
150+
const [deletePost, setShowDeletePost] = useState(false);
151+
const [userId, setUserId] = useState(localStorage.getItem("userId"));
152+
const [postInfo, setPostInfo] = useState({});
153+
const [deletePostId, setDeletePostId] = useState("");
154+
const [shareableContent, setSharableContent] = useState("");
155+
156+
const FILTER_TAGS_REGEX = new RegExp(/(<([^>]+)>)/gi);
146157

147158
useEffect(() => {
148-
console.log("useEffect from news-feed ", props);
149-
setEvents(props?.allEvents);
150-
setAllProjects(props?.allProjects);
151-
setAllPosts(props?.allPosts);
152-
}, [props.allEvents, props.allPosts, props.allProjects, props]);
159+
const { allEvents, allProjects, allPosts } = props;
160+
161+
setEvents(allEvents);
162+
setAllProjects(allProjects);
163+
setAllPosts(allPosts);
164+
}, [
165+
props.allEvents,
166+
props.allPosts,
167+
props.allProjects,
168+
props.singlePost,
169+
props,
170+
]);
153171

154172
useEffect(() => {
155173
window.addEventListener("scroll", () => {
@@ -169,11 +187,14 @@ function NewsFeed(props) {
169187
// second("s");
170188
};
171189

172-
let handleShow = (modalName) => {
190+
let handleShow = (modalName, post) => {
173191
if (modalName === "project") {
174192
setShowProject(true);
175193
} else if (modalName === "event") {
176194
setShowEvent(true);
195+
} else if (modalName === "edit") {
196+
setPostInfo(post);
197+
setShowEditPost(true);
177198
}
178199
};
179200

@@ -182,6 +203,12 @@ function NewsFeed(props) {
182203
setShowProject(false);
183204
} else if (modalName === "event") {
184205
setShowEvent(false);
206+
} else if (modalName === "edit") {
207+
setPostInfo({});
208+
setShowEditPost(false);
209+
} else if (modalName === "delete") {
210+
setPostInfo({});
211+
setShowDeletePost(false);
185212
}
186213
};
187214

@@ -228,6 +255,26 @@ function NewsFeed(props) {
228255
setShowReactions(false);
229256
};
230257

258+
let showDeletePostModal = (postId) => {
259+
setDeletePostId(postId);
260+
setShowDeletePost(true);
261+
};
262+
263+
let hideDeletePostModal = () => {
264+
setDeletePostId("");
265+
setShowDeletePost(false);
266+
};
267+
268+
let showSharePostModal = (content) => {
269+
setSharableContent(content);
270+
setShowSharePost(true);
271+
};
272+
273+
let hideSharePostModal = () => {
274+
setSharableContent("");
275+
setShowSharePost(false);
276+
};
277+
231278
let onPinPost = (postId) => {
232279
console.log("Pinning post ", postId);
233280
props.pinPost(postId);
@@ -273,7 +320,7 @@ function NewsFeed(props) {
273320
votes.donut?.user.length;
274321

275322
return (
276-
<div className="grid" key={post._id}>
323+
<div className="grid" key={post?._id}>
277324
<Paper elevation={1} className={classes.paper}>
278325
<Card className={classes.root} variant="outlined">
279326
<List className={classes.listStyle}>
@@ -302,11 +349,45 @@ function NewsFeed(props) {
302349
>
303350
<FaEllipsisH />
304351
</Dropdown.Toggle>
305-
<Dropdown.Menu>
306-
<Dropdown.Item eventKey="1">Edit</Dropdown.Item>
307-
<Dropdown.Item eventKey="2">Share</Dropdown.Item>
308-
<Dropdown.Item eventKey="3">Delete</Dropdown.Item>
309-
</Dropdown.Menu>
352+
{post?.userId?._id === userId ? (
353+
<Dropdown.Menu>
354+
<Dropdown.Item
355+
eventKey="1"
356+
onClick={() => handleShow("edit", post)}
357+
>
358+
Edit
359+
</Dropdown.Item>
360+
<Dropdown.Item
361+
eventKey="2"
362+
onClick={() =>
363+
showSharePostModal(
364+
post?.content.replace(FILTER_TAGS_REGEX, "")
365+
)
366+
}
367+
>
368+
Share
369+
</Dropdown.Item>
370+
<Dropdown.Item
371+
eventKey="3"
372+
onClick={() => showDeletePostModal(post._id)}
373+
>
374+
Delete
375+
</Dropdown.Item>
376+
</Dropdown.Menu>
377+
) : (
378+
<Dropdown.Menu>
379+
<Dropdown.Item
380+
eventKey="2"
381+
onClick={() =>
382+
showSharePostModal(
383+
post?.content.replace(/(<([^>]+)>)/gi, "")
384+
)
385+
}
386+
>
387+
Share
388+
</Dropdown.Item>
389+
</Dropdown.Menu>
390+
)}
310391
</Dropdown>
311392
</ListItem>
312393
<div className="post-details2">{parse(post?.content)}</div>
@@ -563,6 +644,27 @@ function NewsFeed(props) {
563644
handleClose("project");
564645
}}
565646
/>
647+
<EditPostModal
648+
show={editPost}
649+
handleClose={() => {
650+
handleClose("edit");
651+
}}
652+
postInfo={postInfo}
653+
/>
654+
<DeletePostModal
655+
show={deletePost}
656+
handleClose={() => {
657+
hideDeletePostModal();
658+
}}
659+
postId={deletePostId}
660+
/>
661+
<SharePostModal
662+
show={sharePost}
663+
handleClose={() => {
664+
hideSharePostModal();
665+
}}
666+
sharableContent={shareableContent}
667+
/>
566668
</div>
567669
</div>
568670
<div className="news__feed__container">

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from "react";
2+
import { Button, Modal, Form } from "react-bootstrap";
3+
import PropTypes from "prop-types";
4+
import { connect } from "react-redux";
5+
import { deletePost } from "../../../../actions/postAction";
6+
7+
const DeletePostModal = (props) => {
8+
const handleDeletePostClick = () => {
9+
props.deletePost(props.postId);
10+
props.handleClose();
11+
};
12+
13+
return (
14+
<Modal
15+
show={props.show}
16+
onHide={() => props.handleClose()}
17+
animation={true}
18+
className="modal"
19+
centered
20+
size="lg"
21+
>
22+
<Modal.Header closeButton className="modal__header">
23+
<Modal.Title className="modal__title" style={props.borderStyle}>
24+
<div className="modal__main-title">Delete Post?</div>
25+
<div className="modal__mini-title">
26+
Are you sure you want to delete this post?
27+
</div>
28+
</Modal.Title>
29+
</Modal.Header>
30+
<Modal.Body className="modal__body">
31+
<Form className="modal__form">
32+
<div className="modal__buttons">
33+
<Button
34+
onClick={() => handleDeletePostClick()}
35+
className="modal__save"
36+
>
37+
<span className="modal__buttontext">Yes</span>
38+
</Button>
39+
<Button
40+
className="modal__cancel"
41+
onClick={() => props.handleClose()}
42+
>
43+
<span className="modal__buttontext">No</span>
44+
</Button>
45+
</div>
46+
</Form>
47+
</Modal.Body>
48+
</Modal>
49+
);
50+
};
51+
52+
DeletePostModal.propTypes = {
53+
handleClose: PropTypes.func,
54+
show: PropTypes.bool,
55+
style: PropTypes.object,
56+
};
57+
58+
export default connect(null, { deletePost })(DeletePostModal);

0 commit comments

Comments
 (0)