Vulcan/packages/example-forum/lib/components/common/Vote.jsx

72 lines
2 KiB
React
Raw Normal View History

2017-09-04 18:37:21 +09:00
import { Components, registerComponent, withMessages } from 'meteor/vulcan:core';
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
2017-09-29 07:40:41 +09:00
import { withVote, hasVotedClient } from 'meteor/vulcan:voting';
import { FormattedMessage, intlShape } from 'meteor/vulcan:i18n';
2017-09-04 18:37:21 +09:00
class Vote extends PureComponent {
constructor() {
super();
2017-09-29 07:40:41 +09:00
this.vote = this.vote.bind(this);
2017-09-04 18:37:21 +09:00
this.getActionClass = this.getActionClass.bind(this);
this.hasVoted = this.hasVoted.bind(this);
2017-09-04 18:37:21 +09:00
}
2017-09-29 07:40:41 +09:00
vote(e) {
2017-09-04 18:37:21 +09:00
e.preventDefault();
const document = this.props.document;
const collection = this.props.collection;
const user = this.props.currentUser;
if(!user){
this.props.flash(this.context.intl.formatMessage({id: 'users.please_log_in'}));
} else {
2017-09-29 07:40:41 +09:00
this.props.vote({document, voteType: 'upvote', collection, currentUser: this.props.currentUser});
2017-09-04 18:37:21 +09:00
}
}
hasVoted() {
return hasVotedClient({document: this.props.document, voteType: 'upvote'})
}
2017-09-04 18:37:21 +09:00
getActionClass() {
const actionsClass = classNames(
2017-09-29 07:40:41 +09:00
'vote-button',
{upvoted: this.hasVoted()},
2017-09-04 18:37:21 +09:00
);
return actionsClass;
}
render() {
return (
<div className={this.getActionClass()}>
2017-09-29 07:40:41 +09:00
<a className="upvote-button" onClick={this.vote}>
<Components.Icon name="upvote" />
<div className="sr-only"><FormattedMessage id="voting.upvote"/></div>
2017-09-04 18:37:21 +09:00
<div className="vote-count">{this.props.document.baseScore || 0}</div>
</a>
</div>
)
}
}
Vote.propTypes = {
document: PropTypes.object.isRequired, // the document to upvote
collection: PropTypes.object.isRequired, // the collection containing the document
vote: PropTypes.func.isRequired, // mutate function with callback inside
currentUser: PropTypes.object, // user might not be logged in, so don't make it required
};
2017-09-29 07:40:41 +09:00
Vote.contextTypes = {
intl: intlShape
};
registerComponent('Vote', Vote, withMessages, withVote);