-
Notifications
You must be signed in to change notification settings - Fork 1
/
Reactions.jsx
70 lines (63 loc) · 1.98 KB
/
Reactions.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ReactionsList from './ReactionsList';
import ReactionUsers from './ReactionUsers';
import style from '../styles/reactions';
class Reactions extends Component {
constructor(props, context) {
super(props, context);
this.state = {
users: [],
displayUsers: false,
...this.buildEmojisAndAllUsers(props)
};
this.toggleDisplayUsers = this.toggleDisplayUsers.bind(this);
this.displayUsers = this.displayUsers.bind(this);
}
buildEmojisAndAllUsers({ reactions, username }) {
const emojis = {};
const users = {};
for (({ emoji_name, emoji_code, user }) of reactions) {
if (!emojis[emoji_code]) {
emojis[emoji_code] = {
emojiName: emoji_name,
emojiCode: emoji_code,
userHasReacted: false,
users: [],
};
}
if (user.email === username) {
emojis[emoji_code].userHasReacted = true;
}
users[user.email] = user;
emojis[emoji_code].users.push(user);
}
return { emojis, allUsers: Object.values(users) };
}
componentWillReceiveProps(props) {
this.setState(this.buildEmojisAndAllUsers(props));
}
toggleDisplayUsers() {
this.setState(({ allUsers, displayUsers }) => {
if (!displayUsers) {
return { users: allUsers, displayUsers: true };
}
return { displayUsers: false };
});
}
displayUsers(emojiCode) {
this.setState(({ emojis }) => ({users: emojis[emojiCode].users}));
}
render() {
return <div style={style} onMouseEnter={this.toggleDisplayUsers} onMouseLeave={this.toggleDisplayUsers} >
<ReactionsList emojis={Object.values(this.state.emojis)}
onHover={this.displayUsers}
messageID={this.props.messageID}
/>
<ReactionUsers users={this.state.users} shouldDisplay={this.state.displayUsers} />
</div>;
}
}
export default connect(
({config}) => ({username: config.username}),
)(Reactions);