Skip to content

Commit 2e6152a

Browse files
AuraOfDivinityAuraOfDivinity
committed
Reactions Modal
1 parent b534b91 commit 2e6152a

File tree

2 files changed

+169
-1
lines changed

2 files changed

+169
-1
lines changed

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

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { makeStyles } from "@material-ui/core/styles";
1717
import { Button, Dropdown, FormControl } from "react-bootstrap";
1818
import AddEventModal from "./popups/AddEventModal";
1919
import AddProjectModal from "./popups/AddProjectModal";
20+
import PostReactionModal from './popups/PostReactionsModal'
2021
import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
2122
import ChatBubbleIcon from "@material-ui/icons/ChatBubble";
2223
import "../../pinned-posts/posts/posts.scss";
@@ -127,16 +128,17 @@ function NewsFeed(props) {
127128
const [showProject, setShowProject] = useState(false);
128129
const [showEvent, setShowEvent] = useState(false);
129130
const [writePost, showPostModal] = useState(false);
131+
const [showReactions, setShowReactions] = useState(false)
130132
const [showComment, toggle] = useState(false);
131133
const [commentId, setCommentId] = useState('');
132134
const [events, setEvents] = useState([]);
133135
const [projects, setAllProjects] = useState([]);
134136
const [posts, setAllPosts] = useState([]);
137+
const [votes, setVotes] = useState({})
135138
const [displayReactionContainer, setDisplayReactioContainer] = useState(false)
136139

137140
useEffect(() => {
138141
console.log("useEffect from news-feed ", props);
139-
console.log('USEEEEERRRRRRR', props.userId)
140142
setEvents(props?.allEvents);
141143
setAllProjects(props?.allProjects);
142144
setAllPosts(props?.allPosts);
@@ -196,6 +198,16 @@ function NewsFeed(props) {
196198
console.log('Redirecting to project ', projectId);
197199
props.history.push(`/${projectId}/proj-info`);
198200
}
201+
202+
let openReactionsModal = (votes) => {
203+
setVotes(votes)
204+
setShowReactions(true)
205+
}
206+
207+
let closeReactionsModal = () => {
208+
setVotes({})
209+
setShowReactions(false)
210+
}
199211

200212
let postContent = posts?.map((post) => {
201213
return (
@@ -256,6 +268,7 @@ function NewsFeed(props) {
256268
></motion.img>
257269
</div>
258270
</div>
271+
<span className="up-vote" onClick={()=> openReactionsModal(post.votes)}>{post?.votes?.upVotes?.user.length}</span>
259272
<span className="com-btn">
260273
<ChatBubbleIcon className={classes.chat} />
261274
<Button
@@ -580,6 +593,7 @@ function NewsFeed(props) {
580593
{postContent}
581594
{eventsContent}
582595
{projectsContent}
596+
<PostReactionModal show={showReactions} onHide={closeReactionsModal} votes={votes}/>
583597
</>
584598
)}
585599
</div>

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

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,154 @@
1+
import React, { useState, useEffect } from "react";
2+
import { Button, Modal, Form, Col, Row, Image } from "react-bootstrap";
3+
import PropTypes from "prop-types";
4+
import Like from "../../../../images/Like.png";
5+
import Happy from "../../../../images/Happy.png";
6+
import Heart from "../../../../images/Heart.png";
7+
import DonutReaction from "../../../../images/DonutReaction.png";
8+
import userIcon2 from "../../../../images/userIcon2.jpg";
9+
10+
const PostReactionModal = (props) => {
11+
const [type, changeType] = useState("All");
12+
const [reactions, setVotes] = useState([]);
13+
14+
let handleClick = (atrb) => () => {
15+
console.log("attr ", atrb);
16+
changeType(atrb);
17+
console.log(reactions)
18+
};
19+
20+
useEffect(() => {
21+
setVotes(props?.votes?.upvotes?.user);
22+
console.log('use effect from post-reactions', props)
23+
}, [props.votes, props]);
24+
25+
26+
27+
let userInfo = reactions?.map((user, index) => {
28+
return (
29+
<Row className="modal__member" id="p1" key={index}>
30+
<div className="member__image">
31+
<Image
32+
className="modal__memberPhoto"
33+
src={userIcon2}
34+
alt="I"
35+
rounded
36+
/>
37+
</div>
38+
<div className="member__content">
39+
<span className="modal__memberName">Majorie Alexander</span>
40+
{/* <span className="modal__memberDescription">{item.desc}</span> */}
41+
</div>
42+
</Row>
43+
44+
);
45+
});
46+
47+
return (
48+
<Modal
49+
show={props.show}
50+
onHide={props.onHide}
51+
animation={true}
52+
className="modal"
53+
centered
54+
>
55+
<Modal.Header
56+
closeButton
57+
className="modal__header"
58+
style={props.borderStyle}
59+
>
60+
<Modal.Title className="modal__title" style={props.borderStyle}>
61+
<div className="modal__main-title">Reactions</div>
62+
</Modal.Title>
63+
</Modal.Header>
64+
<Modal.Body className="modal__body" style={props.borderStyle}>
65+
<div className="tabs__container">
66+
<span className="nav__tab container" style={{ width: "100%" }}>
67+
<ul className="nav__list__container">
68+
<li
69+
className={
70+
type === "All"
71+
? "nav__single__tab selected"
72+
: "nav__single__tab"
73+
}
74+
onClick={handleClick("All")}
75+
>
76+
All
77+
</li>
78+
<li
79+
className={
80+
type === "Like"
81+
? "nav__single__tab selected"
82+
: "nav__single__tab"
83+
}
84+
onClick={handleClick("Like")}
85+
>
86+
<img
87+
src={Like}
88+
alt="like-reaction"
89+
style={{ padding: "0px 5px 0px 5px" }}
90+
/>
91+
</li>
92+
<li
93+
className={
94+
type === "Happy"
95+
? "nav__single__tab selected"
96+
: "nav__single__tab"
97+
}
98+
onClick={handleClick("Happy")}
99+
>
100+
<img
101+
src={Happy}
102+
alt="happy-reaction"
103+
style={{ padding: "0px 5px 0px 5px" }}
104+
/>
105+
</li>
106+
<li
107+
className={
108+
type === "Heart"
109+
? "nav__single__tab selected"
110+
: "nav__single__tab"
111+
}
112+
onClick={handleClick("Heart")}
113+
>
114+
<img
115+
src={Heart}
116+
alt="heart-reaction"
117+
style={{ padding: "0px 5px 0px 5px" }}
118+
/>
119+
</li>
120+
<li
121+
className={
122+
type === "Donut"
123+
? "nav__single__tab selected"
124+
: "nav__single__tab"
125+
}
126+
onClick={handleClick("Donut")}
127+
>
128+
<img
129+
src={DonutReaction}
130+
alt="donut-reaction"
131+
style={{ padding: "0px 5px 0px 5px" }}
132+
/>
133+
</li>
134+
</ul>
135+
</span>
136+
</div>
137+
{type==='All' ? (userInfo): (<div>not all</div>)}
138+
</Modal.Body>
139+
<div className="modal__buttons">
140+
<Button onClick={props.onHide} className="modal__save">
141+
<span className="modal__buttontext">Exit</span>
142+
</Button>
143+
</div>
144+
</Modal>
145+
);
146+
};
147+
PostReactionModal.propTypes = {
148+
onClick: PropTypes.func,
149+
show: PropTypes.bool,
150+
style: PropTypes.object,
151+
};
152+
153+
// map state to props
154+
export default PostReactionModal;

0 commit comments

Comments
 (0)