withVoteMutation

This commit is contained in:
Sacha Greif 2016-11-11 18:29:49 +09:00
parent 7a170786c8
commit 884c6a00b9
7 changed files with 142 additions and 93 deletions

View file

@ -2,6 +2,9 @@ import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import classNames from 'classnames';
import Users from 'meteor/nova:users';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withVoteMutation } from 'meteor/nova:base-containers';
class Vote extends Component {
@ -79,5 +82,9 @@ Vote.contextTypes = {
events: React.PropTypes.object,
};
module.exports = Vote;
export default 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)(withVoteMutation(Vote));
export default connect(mapStateToProps, mapDispatchToProps)(withVoteMutation(Vote));

View file

@ -5,4 +5,6 @@ import withPostsSingle from './containers/withPostsSingle.js';
import withCommentsList from './containers/withCommentsList.js';
import withUsersSingle from './containers/withUsersSingle.js';
export {withPostsList, withPostsSingle, withCommentsList, withUsersSingle}
import withVoteMutation from './mutations/withVoteMutation.js';
export { withPostsList, withPostsSingle, withCommentsList, withUsersSingle, withVoteMutation }

View file

@ -1,49 +1,49 @@
import Telescope from 'meteor/nova:lib';
import React from 'react';
import Posts from "meteor/nova:posts";
import Users from "meteor/nova:users";
// import Telescope from 'meteor/nova:lib';
// import React from 'react';
// import Posts from "meteor/nova:posts";
// import Users from "meteor/nova:users";
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
// import { graphql } from 'react-apollo';
// import gql from 'graphql-tag';
const UsersSingleContainer = (props, context) => {
// const UsersSingleContainer = (props, context) => {
const {loading, user} = props.data;
const Component = props.component
// const {loading, user} = props.data;
// const Component = props.component
return loading ? <Telescope.components.Loading/> : <Component
document={user}
{...props.componentProps}
/>;
};
// return loading ? <Telescope.components.Loading/> : <Component
// document={user}
// {...props.componentProps}
// />;
// };
UsersSingleContainer.propTypes = {
data: React.PropTypes.shape({
loading: React.PropTypes.bool,
user: React.PropTypes.object,
}).isRequired,
params: React.PropTypes.object
};
// UsersSingleContainer.propTypes = {
// data: React.PropTypes.shape({
// loading: React.PropTypes.bool,
// user: React.PropTypes.object,
// }).isRequired,
// params: React.PropTypes.object
// };
UsersSingleContainer.contextTypes = {
currentUser: React.PropTypes.object
};
// UsersSingleContainer.contextTypes = {
// currentUser: React.PropTypes.object
// };
UsersSingleContainer.displayName = "UsersSingleContainer";
// UsersSingleContainer.displayName = "UsersSingleContainer";
const UsersSingleContainerWithData = graphql(gql`
query getUser($userId: String, $slug: String) {
user(_id: $userId, slug: $slug) {
${Users.graphQLQueries.single}
}
}
`, {
options(ownProps) {
return {
variables: { userId: ownProps.userId, slug: ownProps.slug },
// pollInterval: 20000,
};
},
})(UsersSingleContainer);
// const UsersSingleContainerWithData = graphql(gql`
// query getUser($userId: String, $slug: String) {
// user(_id: $userId, slug: $slug) {
// ${Users.graphQLQueries.single}
// }
// }
// `, {
// options(ownProps) {
// return {
// variables: { userId: ownProps.userId, slug: ownProps.slug },
// // pollInterval: 20000,
// };
// },
// })(UsersSingleContainer);
module.exports = UsersSingleContainerWithData;
// module.exports = UsersSingleContainerWithData;

View file

@ -1,53 +1,53 @@
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 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';
class VoteContainer extends Component {
render() {
const Component = this.props.component;
return <Component {...this.props} />
}
}
// class VoteContainer extends Component {
// render() {
// const Component = this.props.component;
// return <Component {...this.props} />
// }
// }
const VoteContainerWithMutation = graphql(gql`
mutation postsVote($documentId: String, $voteType: String) {
postsVote(documentId: $documentId, 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: {documentId: post._id, voteType},
optimisticResponse: {
__typename: 'Mutation',
postsVote: {
...votedItem,
},
}
})
}
}),
})(VoteContainer);
// const VoteContainerWithMutation = graphql(gql`
// mutation postsVote($documentId: String, $voteType: String) {
// postsVote(documentId: $documentId, 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: {documentId: post._id, voteType},
// optimisticResponse: {
// __typename: 'Mutation',
// postsVote: {
// ...votedItem,
// },
// }
// })
// }
// }),
// })(VoteContainer);
// redux state + actions for messages
const mapStateToProps = state => ({ messages: state.messages });
const mapDispatchToProps = dispatch => bindActionCreators(Telescope.actions.messages, dispatch);
// // redux state + actions for messages
// const mapStateToProps = state => ({ messages: state.messages });
// const mapDispatchToProps = dispatch => bindActionCreators(Telescope.actions.messages, dispatch);
module.exports = connect(mapStateToProps, mapDispatchToProps)(VoteContainerWithMutation);
export default connect(mapStateToProps, mapDispatchToProps)(VoteContainerWithMutation);
// module.exports = connect(mapStateToProps, mapDispatchToProps)(VoteContainerWithMutation);
// export default connect(mapStateToProps, mapDispatchToProps)(VoteContainerWithMutation);

View file

@ -0,0 +1,38 @@
import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
export default function withVoteMutation (component, options) {
return graphql(gql`
mutation postsVote($documentId: String, $voteType: String) {
postsVote(documentId: $documentId, 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: {documentId: post._id, voteType},
optimisticResponse: {
__typename: 'Mutation',
postsVote: {
...votedItem,
},
}
})
}
}),
})(component);
}

View file

@ -5,4 +5,6 @@ import withPostsSingle from './containers/withPostsSingle.js';
import withCommentsList from './containers/withCommentsList.js';
import withUsersSingle from './containers/withUsersSingle.js';
export {withPostsList, withPostsSingle, withCommentsList, withUsersSingle}
import withVoteMutation from './mutations/withVoteMutation.js';
export { withPostsList, withPostsSingle, withCommentsList, withUsersSingle, withVoteMutation }