Skip to content

Commit d6a2b8b

Browse files
AuraOfDivinityAuraOfDivinity
committed
Minor fixes
1 parent ec5f5c5 commit d6a2b8b

File tree

4 files changed

+146
-74
lines changed

4 files changed

+146
-74
lines changed

‎src/actions/postAction.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,3 +99,15 @@ export const deletePost = (postId) => async (dispatch) => {
9999
dispatch(errorHandler(error));
100100
}
101101
};
102+
103+
// REMOVE REACTION
104+
export const removeReaction = (postId, type) => async (dispatch) => {
105+
try {
106+
const res = await axios.patch(`${BASE_URL}/post/removereaction/${postId}`, type);
107+
if (res.status === 200) {
108+
dispatch(getAllPosts());
109+
}
110+
} catch (error) {
111+
dispatch(errorHandler(error));
112+
}
113+
};

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

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@ import Heart from "../../../images/Heart.png";
66
import Happy from "../../../images/Happy.png";
77
import DonutReaction from "../../../images/DonutReaction.png";
88
import { connect } from "react-redux";
9-
import { upVotePost } from "../../../actions/postAction";
9+
import { upVotePost, removeReaction } from "../../../actions/postAction";
1010

1111
const reactionVariant = {
1212
hover: {
1313
scale: 1.3,
14-
opacity: 0.9,
1514
rotate: [0, 10, 0, -10, 0],
1615
},
1716
};
@@ -21,26 +20,41 @@ class ReactionsElement extends Component {
2120
super(props);
2221
this.state = {
2322
reacted: this.props.reacted,
24-
count: this.props.count,
23+
count: this.props.count || 0,
2524
reaction: "like",
25+
reactionType: this.props.reactionType,
2626
};
2727
}
2828

29+
componentDidMount() {}
30+
2931
handleReaction = (reaction) => {
32+
const { count } = this.state;
3033
const type = {
3134
reactionType: reaction,
3235
};
3336
this.setState({
3437
reacted: true,
35-
reaction: reaction,
38+
reactionType: reaction,
39+
count: count + 1,
3640
});
3741
this.onUpVote(this.props.postId, type);
3842
};
3943

40-
handleNoReaction = () => {
44+
handleNoReaction = (reaction) => {
45+
let { count } = this.state;
46+
47+
const type = {
48+
reactionType: reaction,
49+
reacted: false,
50+
};
51+
4152
this.setState({
4253
reacted: false,
54+
count: count - 1,
4355
});
56+
57+
this.props.removeReaction(this.props.postId, type);
4458
};
4559

4660
onUpVote = (postId, type) => {
@@ -54,46 +68,50 @@ class ReactionsElement extends Component {
5468
<div className="reactions-container">
5569
{reacted ? (
5670
<div className="reaction-element">
57-
{reaction === "like" && (
71+
{reactionType === "like" && (
5872
<motion.img
5973
src={Like}
6074
alt="like-reaction"
6175
variants={reactionVariant}
6276
whileHover="hover"
63-
onClick={() => this.handleNoReaction()}
77+
onClick={() => this.handleNoReaction("like")}
6478
></motion.img>
6579
)}
66-
{reaction === "happy" && (
80+
{reactionType === "happy" && (
6781
<motion.img
6882
src={Happy}
6983
alt="like-reaction"
7084
variants={reactionVariant}
7185
whileHover="hover"
72-
onClick={() => this.handleNoReaction()}
86+
onClick={() => this.handleNoReaction("happy")}
7387
></motion.img>
7488
)}
75-
{reaction === "heart" && (
89+
{reactionType === "heart" && (
7690
<motion.img
7791
src={Heart}
7892
alt="like-reaction"
7993
variants={reactionVariant}
8094
whileHover="hover"
81-
onClick={() => this.handleNoReaction()}
95+
onClick={() => this.handleNoReaction("heart")}
8296
></motion.img>
8397
)}
84-
{reaction === "donut" && (
98+
{reactionType === "donut" && (
8599
<motion.img
86100
src={DonutReaction}
87101
alt="like-reaction"
88102
variants={reactionVariant}
89103
whileHover="hover"
90-
onClick={() => this.handleNoReaction()}
104+
onClick={() => this.handleNoReaction("donut")}
91105
></motion.img>
92106
)}
93-
{count > 1 ? (
107+
{count === 1 && (
94108
<span className="reaction-text">{`You reacted`}</span>
95-
) : (
96-
<span className="reaction-text">{`You and ${count} others reacted.`}</span>
109+
)}
110+
{count > 1 && (
111+
<span
112+
className="reaction-text"
113+
onClick={() => openModal(votes)}
114+
>{`You and ${count - 1} others reacted.`}</span>
97115
)}
98116
</div>
99117
) : (
@@ -142,15 +160,21 @@ class ReactionsElement extends Component {
142160
whileHover="hover"
143161
></motion.img>
144162
</div>
145-
<span
146-
className="reaction-text"
147-
onClick={() => openModal(votes)}
148-
>{`${count} reactions`}</span>
163+
164+
{count == 0 && (
165+
<span className="reaction-text">{`${count} reactions`}</span>
166+
)}
167+
{count > 0 && (
168+
<span
169+
className="reaction-text"
170+
onClick={() => openModal(votes)}
171+
>{`${count} reactions`}</span>
172+
)}
149173
</motion.div>
150174
)}
151175
</div>
152176
);
153177
}
154178
}
155179

156-
export default connect(null, { upVotePost })(ReactionsElement);
180+
export default connect(null, { upVotePost, removeReaction })(ReactionsElement);

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

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,7 @@ import eventImg2 from "../../../svgs/event-img-2.svg";
3333
import parse from "html-react-parser";
3434
import { withRouter } from "react-router-dom";
3535
import { rsvpYes } from "../../../actions/eventAction";
36-
import Like from "../../../images/Like.png";
37-
import Heart from "../../../images/Heart.png";
38-
import Happy from "../../../images/Happy.png";
39-
import DonutReaction from "../../../images/DonutReaction.png";
40-
import { motion } from "framer-motion";
41-
import { FaEllipsisH } from "react-icons/fa";
36+
import { FaEllipsisH, FaThumbtack } from "react-icons/fa";
4237
import ReactionsElement from "./ReactionsElement";
4338

4439
const reactionVariant = {
@@ -219,10 +214,7 @@ function NewsFeed(props) {
219214
}, [votes]);
220215

221216
let postContent = posts?.map((post, index) => {
222-
// const reacted = post?.votes?.upVotes?.user.includes(
223-
// localStorage.getItem("userId")
224-
// );
225-
217+
const votes = post?.votes;
226218
let reacted = "";
227219
let reactionType = "";
228220

@@ -246,7 +238,11 @@ function NewsFeed(props) {
246238
reactionType = "donut";
247239
}
248240

249-
const count = post?.votes?.upVotes?.user.length;
241+
const count =
242+
votes.upVotes?.user.length +
243+
votes.happy?.user.length +
244+
votes.heart?.user.length +
245+
votes.donut?.user.length;
250246

251247
return (
252248
<div className="grid" key={post._id}>
@@ -267,6 +263,7 @@ function NewsFeed(props) {
267263
</h2>
268264
<small>{post?.createdAt}</small>
269265
</ListItemText>
266+
<FaThumbtack style={{ margin: "10px", width: "10px" }} />
270267
<Dropdown>
271268
<Dropdown.Toggle
272269
as={CustomToggle}

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

Lines changed: 81 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from "react";
2-
import { Button, Modal, Form, Col, Row, Image } from "react-bootstrap";
2+
import { Button, Modal, Row, Image } from "react-bootstrap";
33
import Like from "../../../../images/Like.png";
44
import Happy from "../../../../images/Happy.png";
55
import Heart from "../../../../images/Heart.png";
@@ -28,27 +28,83 @@ class PostReactionModal extends Component {
2828
});
2929
};
3030

31-
userInfo = this.props.votes?.upvotes?.user((user, index) => {
32-
return (
33-
<Row className="modal__member" id="p1" key={index}>
34-
<div className="member__image">
35-
<Image
36-
className="modal__memberPhoto"
37-
src={userIcon2}
38-
alt="I"
39-
rounded
40-
/>
41-
</div>
42-
<div className="member__content">
43-
<span className="modal__memberName">Majorie Alexander</span>
44-
{/* <span className="modal__memberDescription">{item.desc}</span> */}
45-
</div>
46-
</Row>
47-
);
48-
});
49-
5031
render() {
5132
const { type } = this.state;
33+
34+
const upvotes = this.state.reactions?.upVotes?.user.map((user, index) => {
35+
return (
36+
<Row className="modal__member" id="p1" key={index}>
37+
<div className="member__image">
38+
<Image
39+
className="modal__memberPhoto"
40+
src={userIcon2}
41+
alt="I"
42+
rounded
43+
/>
44+
</div>
45+
<div className="member__content">
46+
<span className="modal__memberName">Majorie Alexander</span>
47+
<span className="modal__memberDescription">{user}</span>
48+
</div>
49+
</Row>
50+
);
51+
});
52+
53+
const hearts = this.state.reactions?.heart?.user.map((user, index) => {
54+
return (
55+
<Row className="modal__member" id="p1" key={index}>
56+
<div className="member__image">
57+
<Image
58+
className="modal__memberPhoto"
59+
src={userIcon2}
60+
alt="I"
61+
rounded
62+
/>
63+
</div>
64+
<div className="member__content">
65+
<span className="modal__memberName">Majorie Alexander</span>
66+
<span className="modal__memberDescription">{user}</span>
67+
</div>
68+
</Row>
69+
);
70+
});
71+
72+
const happy = this.state.reactions?.happy?.user.map((user, index) => {
73+
return (
74+
<Row className="modal__member" id="p1" key={index}>
75+
<div className="member__image">
76+
<Image
77+
className="modal__memberPhoto"
78+
src={userIcon2}
79+
alt="I"
80+
rounded
81+
/>
82+
</div>
83+
<div className="member__content">
84+
<span className="modal__memberName">Majorie Alexander</span>
85+
<span className="modal__memberDescription">{user}</span>
86+
</div>
87+
</Row>
88+
);
89+
});
90+
91+
const donut = this.state.reactions?.donut?.user.map((user, index) => {
92+
return (
93+
<Row className="modal__member" id="p1" key={index}>
94+
<span className="modal__memberDescription">{user}</span>
95+
<div className="member__image">
96+
<Image className="modal__memberPhoto" src={userIcon2} alt="I" />
97+
</div>
98+
<div className="member__content">
99+
<span className="modal__memberName">Majorie Alexander</span>
100+
<span className="modal__memberDescription">{user}</span>
101+
</div>
102+
</Row>
103+
);
104+
});
105+
106+
const all = [upvotes, donut, hearts, happy];
107+
52108
return (
53109
<Modal
54110
show={this.props.show}
@@ -135,28 +191,11 @@ class PostReactionModal extends Component {
135191
</ul>
136192
</span>
137193
</div>
138-
{type === "All" ? (
139-
this.state.reactions?.upVotes?.user.map((user, index) => {
140-
return (
141-
<Row className="modal__member" id="p1" key={index}>
142-
<div className="member__image">
143-
<Image
144-
className="modal__memberPhoto"
145-
src={userIcon2}
146-
alt="I"
147-
rounded
148-
/>
149-
</div>
150-
<div className="member__content">
151-
<span className="modal__memberName">Majorie Alexander</span>
152-
{/* <span className="modal__memberDescription">{item.desc}</span> */}
153-
</div>
154-
</Row>
155-
);
156-
})
157-
) : (
158-
<div>not all</div>
159-
)}
194+
{type === "All" && all}
195+
{type === "Like" && upvotes}
196+
{type === "Heart" && hearts}
197+
{type === "Happy" && happy}
198+
{type === "Donut" && donut}
160199
</Modal.Body>
161200
<div className="modal__buttons">
162201
<Button onClick={this.props.onHide} className="modal__save">

0 commit comments

Comments
 (0)