split off VoteContainer and Vote

This commit is contained in:
Sacha Greif 2016-11-03 16:19:44 +09:00
parent 588d37524c
commit 222aa4b544
5 changed files with 60 additions and 53 deletions

View file

@ -1,10 +1,6 @@
import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import Users from 'meteor/nova:users';
class Vote extends Component {
@ -83,43 +79,5 @@ Vote.contextTypes = {
events: React.PropTypes.object,
};
// graphql
const VoteWithMutation = graphql(gql`
mutation postVote($postId: String, $voteType: String) {
postVote(postId: $postId, voteType: $voteType) {
_id
baseScore
downvotes
downvoters {
_id
}
upvotes
upvoters {
_id
}
}
}
`, {
props: ({ownProps, mutate}) => ({
vote: ({post, voteType, currentUser}) => {
const votedItem = Telescope.operateOnItem(Posts, post, currentUser, voteType, true);
return mutate({
variables: {postId: post._id, voteType},
optimisticResponse: {
__typename: 'Mutation',
postVote: {
...votedItem,
},
}
})
}
}),
})(Vote);
// redux state + actions for messages
const mapStateToProps = state => ({ messages: state.messages });
const mapDispatchToProps = dispatch => bindActionCreators(Telescope.actions.messages, dispatch);
module.exports = connect(mapStateToProps, mapDispatchToProps)(VoteWithMutation);
export default connect(mapStateToProps, mapDispatchToProps)(VoteWithMutation);
module.exports = Vote;
export default Vote;

View file

@ -1,12 +1,5 @@
import Telescope from 'meteor/nova:lib';
// containers
Telescope.registerComponent("AppContainer", require('./containers/AppContainer.jsx'));
Telescope.registerComponent("PostsListContainer", require('./containers/PostsListContainer.jsx'));
Telescope.registerComponent("PostsSingleContainer", require('./containers/PostsSingleContainer.jsx'));
Telescope.registerComponent("UsersSingleContainer", require('./containers/UsersSingleContainer.jsx'));
// common
Telescope.registerComponent("App", require('./common/App.jsx'));
@ -82,4 +75,12 @@ Telescope.registerComponent("UsersAvatar", require('./users/UsersAvatar
Telescope.registerComponent("UsersName", require('./users/UsersName.jsx'));
Telescope.registerComponent("UsersMenu", require('./users/UsersMenu.jsx'));
Telescope.registerComponent("UsersAccountMenu", require('./users/UsersAccountMenu.jsx'));
Telescope.registerComponent("UsersAccountForm", require('./users/UsersAccountForm.jsx'));
Telescope.registerComponent("UsersAccountForm", require('./users/UsersAccountForm.jsx'));
// containers
Telescope.registerComponent("AppContainer", require('./containers/AppContainer.jsx'));
Telescope.registerComponent("PostsListContainer", require('./containers/PostsListContainer.jsx'));
Telescope.registerComponent("PostsSingleContainer", require('./containers/PostsSingleContainer.jsx'));
Telescope.registerComponent("UsersSingleContainer", require('./containers/UsersSingleContainer.jsx'));
Telescope.registerComponent("VoteContainer", require('./containers/VoteContainer.jsx'));

View file

@ -57,6 +57,7 @@ const PostsSingleContainerWithData = graphql(gql`
baseScore
postedAt
sticky
status
categories {
_id
name

View file

@ -0,0 +1,47 @@
import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import classNames from 'classnames';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
// graphql
const VoteWithMutation = graphql(gql`
mutation postVote($postId: String, $voteType: String) {
postVote(postId: $postId, voteType: $voteType) {
_id
baseScore
downvotes
downvoters {
_id
}
upvotes
upvoters {
_id
}
}
}
`, {
props: ({ownProps, mutate}) => ({
vote: ({post, voteType, currentUser}) => {
const votedItem = Telescope.operateOnItem(Posts, post, currentUser, voteType, true);
return mutate({
variables: {postId: post._id, voteType},
optimisticResponse: {
__typename: 'Mutation',
postVote: {
...votedItem,
},
}
})
}
}),
})(Telescope.components.Vote);
// redux state + actions for messages
const mapStateToProps = state => ({ messages: state.messages });
const mapDispatchToProps = dispatch => bindActionCreators(Telescope.actions.messages, dispatch);
module.exports = connect(mapStateToProps, mapDispatchToProps)(VoteWithMutation);
export default connect(mapStateToProps, mapDispatchToProps)(VoteWithMutation);

View file

@ -47,7 +47,7 @@ class PostsItem extends Component {
<div className={postClass}>
<div className="posts-item-vote">
<Telescope.components.Vote post={post} refetchQuery={refetchQuery} />
<Telescope.components.VoteContainer post={post} refetchQuery={refetchQuery} />
</div>
{post.thumbnailUrl ? <Telescope.components.PostsThumbnail post={post}/> : null}