Skip to content

Commit ca2f33c

Browse files
AuraOfDivinityAuraOfDivinity
authored
Comment notifications (#501)
* Initial * Addition of comments section * requested changes
1 parent ace827a commit ca2f33c

File tree

7 files changed

+148
-86
lines changed

7 files changed

+148
-86
lines changed

‎src/actions/proposalActions.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export const getUserProposalNotifications = (data) => async (dispatch) => {
116116
dispatch(setRequestStatus(true));
117117
dispatch({
118118
type: GET_USER_PROPOSAL_NOTIFICATIONS,
119-
payload: res.data.proposal || res.data.msg,
119+
payload: res.data.notifications || res.data.msg,
120120
});
121121
}
122122
} catch (error) {

‎src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ class DiscussionComments extends Component {
2525
isAuthor: isAuthor,
2626
author: author,
2727
};
28+
29+
console.log(commentData);
2830
this.props.commentProposal(commentData);
2931
this.props.handleComment(this.state.commentContent);
3032
this.setState({

‎src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.js‎

Lines changed: 120 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -2,71 +2,139 @@ import React, { Component } from "react";
22
import "./Comments.scss";
33
import { ListGroup, Image } from "react-bootstrap";
44
import userIcon2 from "../../../../../images/userIcon2.jpg";
5+
import socket from "../../../../dashboard/utils/socket";
6+
import { connect } from "react-redux";
7+
import { getUserProposalNotifications } from "../../../../../actions/proposalActions";
8+
import { getProposalNotifications } from "../../../../../actions/notificationAction";
59

610
class Comments extends Component {
711
constructor(props) {
812
super(props);
9-
this.state = {};
13+
this.state = {
14+
socket: socket,
15+
notifications: [],
16+
commentNotifications: [],
17+
};
1018
}
19+
20+
componentDidMount() {
21+
const data = {
22+
userId: localStorage.getItem("userId"),
23+
};
24+
25+
this.props.getProposalNotifications();
26+
this.props.getUserProposalNotifications(data);
27+
28+
this.state.socket.on("new proposal created", (data) => {
29+
this.handleNotification(data)
30+
});
31+
32+
this.state.socket.on("proposal deleted", (data) => {
33+
this.handleNotification(data)
34+
});
35+
36+
this.state.socket.on("proposal submitted", (data) => {
37+
this.handleNotification(data)
38+
});
39+
}
40+
41+
handleNotification = (data) => {
42+
data.newNotification = true;
43+
data.createdAt = new Date().toString().substring(0, 24);
44+
this.setState({
45+
notifications: [...this.state.notifications, data],
46+
});
47+
}
48+
49+
componentWillReceiveProps(nextProps) {
50+
console.log(nextProps);
51+
nextProps.proposalNotifications.forEach((notification, index) => {
52+
let createdTime = new Date(notification.createdAt)
53+
.toString()
54+
.substring(0, 24);
55+
notification.createdAt = createdTime.toString();
56+
});
57+
58+
this.setState({
59+
notifications: [
60+
...this.state.notifications,
61+
...nextProps.proposalNotifications,
62+
],
63+
});
64+
65+
if (nextProps.userNotification !== null) {
66+
this.setState({
67+
commentNotifications: nextProps.userNotification,
68+
});
69+
}
70+
}
71+
72+
organizaNotifications = () => {
73+
let notifications = this.state.notifications;
74+
75+
notifications.sort((a, b) => {
76+
return new Date(b.createdAt) - new Date(a.createdAt);
77+
});
78+
79+
this.setState({
80+
Notifications: notifications,
81+
});
82+
};
83+
1184
render() {
85+
const notifications = this.state.commentNotifications;
1286
return (
13-
<div className="comments">
14-
<div className="comment-title">Comments</div>
15-
<div className="comments-container">
87+
<div className="ideas">
88+
<div className="ideas-title">Comments</div>
89+
<div className="ideas-container">
1690
<ListGroup variant="flush">
17-
<ListGroup.Item>
18-
<div className="comment-item">
19-
<div className="image-container">
20-
<Image
21-
src={userIcon2}
22-
alt="icon"
23-
rounded
24-
className="user-image"
25-
/>
26-
</div>
27-
<div className="comment-container">
28-
<div className="commenting-user">Devesh</div>
29-
<div className="commented-section">
30-
"Lorem ipsum dolor sit amet"
31-
</div>
32-
<div className="comment-text">
33-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
34-
do eiusmod tempor incididunt ut labore et dolore magna
35-
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
36-
</div>
37-
</div>
38-
</div>
39-
</ListGroup.Item>
40-
</ListGroup>
41-
<ListGroup>
42-
<ListGroup.Item>
43-
<div className="comment-item">
44-
<div className="image-container">
45-
<Image
46-
src={userIcon2}
47-
alt="icon"
48-
rounded
49-
className="user-image"
50-
/>
51-
</div>
52-
<div className="comment-container">
53-
<div className="commenting-user">Devesh</div>
54-
<div className="commented-section">
55-
"Lorem ipsum dolor sit amet"
56-
</div>
57-
<div className="comment-text">
58-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
59-
do eiusmod tempor incididunt ut labore et dolore magna
60-
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
91+
{notifications.map((notification, index) => {
92+
return (
93+
<ListGroup.Item
94+
style={
95+
notification.newNotification
96+
? { backgroundColor: "#E8F1FD" }
97+
: { backgroundColor: "white" }
98+
}
99+
>
100+
<div className="idea-item">
101+
<div className="image-container">
102+
<Image
103+
src={userIcon2}
104+
alt="icon"
105+
rounded
106+
className="user-image"
107+
/>
108+
</div>
109+
<div className="idea-container">
110+
<div className="idea-title" style={{ marginTop: "0px" }}>
111+
{notification.heading}
112+
</div>
113+
114+
<div className="idea-description">
115+
{notification.createdAt}
116+
</div>
117+
<div className="idea-description">
118+
{notification.content}
119+
</div>
120+
</div>
61121
</div>
62-
</div>
63-
</div>
64-
</ListGroup.Item>
122+
</ListGroup.Item>
123+
);
124+
})}
65125
</ListGroup>
66126
</div>
67127
</div>
68128
);
69129
}
70130
}
71131

72-
export default Comments;
132+
const mapStateToProps = (state) => ({
133+
proposalNotifications: state.notification.proposalNotifications,
134+
userNotification: state.proposal.userNotification,
135+
});
136+
137+
export default connect(mapStateToProps, {
138+
getUserProposalNotifications,
139+
getProposalNotifications,
140+
})(Comments);

‎src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.scss‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
.comments {
2-
.comment-title {
1+
.ideas {
2+
.ideas-title {
33
margin-top: 10px;
44
font-family: Inter;
55
font-style: normal;
@@ -9,13 +9,14 @@
99

1010
color: #000000;
1111
}
12-
.comments-container {
12+
.ideas-container {
1313
border: solid 1px #dfe9f1;
14-
overflow: auto;
14+
max-height: 45vh;
1515
border-radius: 5px;
1616
margin: 5px;
17-
max-height: 300px;
18-
.comment-item {
17+
overflow: auto;
18+
19+
.idea-item {
1920
display: flex;
2021
padding: none;
2122
.image-container {
@@ -25,44 +26,27 @@
2526
height: 30px;
2627
}
2728
}
28-
.comment-container {
29+
.idea-container {
2930
flex: 6;
30-
border: solid 1px #dfe9f1;
31-
overflow: auto;
32-
border-radius: 5px;
33-
padding: 3px;
34-
.commenting-user {
31+
.idea-title {
3532
font-family: Inter;
3633
font-style: normal;
3734
font-weight: 600;
3835
font-size: 14px;
39-
line-height: 150%;
40-
/* or 21px */
36+
line-height: 21px;
37+
/* identical to box height, or 150% */
4138

4239
color: #000000;
4340
}
44-
.commented-section {
45-
margin-top: 2px;
41+
.idea-description {
4642
font-family: Inter;
4743
font-style: normal;
4844
font-weight: normal;
49-
font-size: 14px;
50-
line-height: 150%;
51-
/* or 21px */
45+
font-size: 12px;
46+
line-height: 15px;
5247

5348
color: rgba(29, 33, 41, 0.5);
5449
}
55-
.comment-text {
56-
margin-top: 2px;
57-
font-family: Inter;
58-
font-style: normal;
59-
font-weight: normal;
60-
font-size: 14px;
61-
62-
/* or 21px */
63-
64-
color: rgba(21, 21, 21, 0.91);
65-
}
6650
}
6751
}
6852
}

‎src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ class DashboardRightPanel extends Component {
1313
<div className="panel-ideas">
1414
<Notifications />
1515
</div>
16+
<div className="panel-comments">
17+
<Comments />
18+
</div>
1619
</div>
1720
);
1821
}

‎src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.scss‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
.panel {
22
display: flex;
3+
flex-direction: column;
34

45
.panel-ideas {
5-
margin-top: 10px;
6-
height: 100%;
6+
flex-grow: 1;
7+
}
8+
9+
.panel-comments {
10+
flex-grow: 1;
711
}
812
}

‎src/user/proposals/UserProposalDashboard/DashboardRightPanel/Notifications/OtherIdeas.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@
1111
}
1212
.ideas-container {
1313
border: solid 1px #dfe9f1;
14-
min-height: 90vh;
14+
max-height: 45vh;
1515
border-radius: 5px;
1616
margin: 5px;
17+
overflow: auto;
1718

1819
.idea-item {
1920
display: flex;

0 commit comments

Comments
 (0)