Skip to content

Commit c9e6e18

Browse files
AuraOfDivinityAuraOfDivinity
committed
Integrating post edit share and delete functionalities
1 parent 22f0316 commit c9e6e18

File tree

8 files changed

+577
-35
lines changed

8 files changed

+577
-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: 123 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { Button, Dropdown, FormControl } 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";
@@ -36,6 +35,9 @@ import { rsvpYes } from "../../../actions/eventAction";
3635
import { FaEllipsisH, FaThumbtack } from "react-icons/fa";
3736
import ReactionsElement from "./ReactionsElement";
3837
import Moment from "react-moment";
38+
import EditPostModal from "./popups/EditPost";
39+
import DeletePostModal from "./popups/DeletePost";
40+
import SharePostModal from "./popups/SharePost";
3941

4042
const reactionVariant = {
4143
hover: {
@@ -45,7 +47,15 @@ const reactionVariant = {
4547
},
4648
};
4749

48-
const navStyles = { position: 'fixed', width: '83%', top: '0', zIndex:1, background: '#fff', marginTop: '0px', marginBottom:'0px'}
50+
const navStyles = {
51+
position: "fixed",
52+
width: "83%",
53+
top: "0",
54+
zIndex: 1,
55+
background: "#fff",
56+
marginTop: "0px",
57+
marginBottom: "0px",
58+
};
4959

5060
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
5161
<a
@@ -136,18 +146,31 @@ function NewsFeed(props) {
136146
const [displayReactionContainer, setDisplayReactioContainer] = useState(
137147
false
138148
);
149+
const [editPost, setShowEditPost] = useState(false);
150+
const [sharePost, setShowSharePost] = useState(false);
151+
const [deletePost, setShowDeletePost] = useState(false);
152+
const [userId, setUserId] = useState(localStorage.getItem("userId"));
153+
const [postInfo, setPostInfo] = useState({});
154+
const [deletePostId, setDeletePostId] = useState("");
155+
const [shareableContent, setSharableContent] = useState("");
139156

140157
useEffect(() => {
141158
console.log("useEffect from news-feed ", props);
142159
setEvents(props?.allEvents);
143160
setAllProjects(props?.allProjects);
144161
setAllPosts(props?.allPosts);
145-
}, [props.allEvents, props.allPosts, props.allProjects, props]);
162+
}, [
163+
props.allEvents,
164+
props.allPosts,
165+
props.allProjects,
166+
props.singlePost,
167+
props,
168+
]);
146169

147170
useEffect(() => {
148171
window.addEventListener("scroll", () => {
149172
const scrollAmount = window.scrollY;
150-
scrollAmount > 369 ? setisTop(true) : setisTop(false)
173+
scrollAmount > 369 ? setisTop(true) : setisTop(false);
151174
});
152175
}, [window]);
153176

@@ -162,11 +185,14 @@ function NewsFeed(props) {
162185
// second("s");
163186
};
164187

165-
let handleShow = (modalName) => {
188+
let handleShow = (modalName, post) => {
166189
if (modalName === "project") {
167190
setShowProject(true);
168191
} else if (modalName === "event") {
169192
setShowEvent(true);
193+
} else if (modalName === "edit") {
194+
setPostInfo(post);
195+
setShowEditPost(true);
170196
}
171197
};
172198

@@ -175,6 +201,12 @@ function NewsFeed(props) {
175201
setShowProject(false);
176202
} else if (modalName === "event") {
177203
setShowEvent(false);
204+
} else if (modalName === "edit") {
205+
setPostInfo({});
206+
setShowEditPost(false);
207+
} else if (modalName === "delete") {
208+
setPostInfo({});
209+
setShowDeletePost(false);
178210
}
179211
};
180212

@@ -221,6 +253,26 @@ function NewsFeed(props) {
221253
setShowReactions(false);
222254
};
223255

256+
let showDeletePostModal = (postId) => {
257+
setDeletePostId(postId);
258+
setShowDeletePost(true);
259+
};
260+
261+
let hideDeletePostModal = () => {
262+
setDeletePostId("");
263+
setShowDeletePost(false);
264+
};
265+
266+
let showSharePostModal = (content) => {
267+
setSharableContent(content);
268+
setShowSharePost(true);
269+
};
270+
271+
let hideSharePostModal = () => {
272+
setSharableContent("");
273+
setShowSharePost(false);
274+
};
275+
224276
useEffect(() => {
225277
if (Object.keys(votes).length !== 0) {
226278
setShowReactions(true);
@@ -261,7 +313,7 @@ function NewsFeed(props) {
261313
votes.donut?.user.length;
262314

263315
return (
264-
<div className="grid" key={post._id}>
316+
<div className="grid" key={post?._id}>
265317
<Paper elevation={1} className={classes.paper}>
266318
<Card className={classes.root}>
267319
<List className={classes.listStyle}>
@@ -287,11 +339,45 @@ function NewsFeed(props) {
287339
>
288340
<FaEllipsisH />
289341
</Dropdown.Toggle>
290-
<Dropdown.Menu>
291-
<Dropdown.Item eventKey="1">Edit</Dropdown.Item>
292-
<Dropdown.Item eventKey="2">Share</Dropdown.Item>
293-
<Dropdown.Item eventKey="3">Delete</Dropdown.Item>
294-
</Dropdown.Menu>
342+
{post?.userId?._id === userId ? (
343+
<Dropdown.Menu>
344+
<Dropdown.Item
345+
eventKey="1"
346+
onClick={() => handleShow("edit", post)}
347+
>
348+
Edit
349+
</Dropdown.Item>
350+
<Dropdown.Item
351+
eventKey="2"
352+
onClick={() =>
353+
showSharePostModal(
354+
post?.content.replace(/(<([^>]+)>)/gi, "")
355+
)
356+
}
357+
>
358+
Share
359+
</Dropdown.Item>
360+
<Dropdown.Item
361+
eventKey="3"
362+
onClick={() => showDeletePostModal(post._id)}
363+
>
364+
Delete
365+
</Dropdown.Item>
366+
</Dropdown.Menu>
367+
) : (
368+
<Dropdown.Menu>
369+
<Dropdown.Item
370+
eventKey="2"
371+
onClick={() =>
372+
showSharePostModal(
373+
post?.content.replace(/(<([^>]+)>)/gi, "")
374+
)
375+
}
376+
>
377+
Share
378+
</Dropdown.Item>
379+
</Dropdown.Menu>
380+
)}
295381
</Dropdown>
296382
</ListItem>
297383
<div className="post-details2">{parse(post?.content)}</div>
@@ -548,12 +634,36 @@ function NewsFeed(props) {
548634
handleClose("project");
549635
}}
550636
/>
637+
<EditPostModal
638+
show={editPost}
639+
handleClose={() => {
640+
handleClose("edit");
641+
}}
642+
postInfo={postInfo}
643+
/>
644+
<DeletePostModal
645+
show={deletePost}
646+
handleClose={() => {
647+
hideDeletePostModal();
648+
}}
649+
postId={deletePostId}
650+
/>
651+
<SharePostModal
652+
show={sharePost}
653+
handleClose={() => {
654+
hideSharePostModal();
655+
}}
656+
sharableContent={shareableContent}
657+
/>
551658
</div>
552659
</div>
553660
<div className="news__feed__container">
554-
<div className="tabs__container" style={isTop? navStyles: {}}>
661+
<div className="tabs__container" style={isTop ? navStyles : {}}>
555662
<span className="nav__tab container">
556-
<ul className="nav__list__container" style={isTop ? {marginBottom: '0px'}: {}}>
663+
<ul
664+
className="nav__list__container"
665+
style={isTop ? { marginBottom: "0px" } : {}}
666+
>
557667
<li
558668
className={
559669
type === "All"

0 commit comments

Comments
 (0)