fix a few issues with forms

This commit is contained in:
Sacha Greif 2016-11-08 14:56:48 +09:00
parent bee5eaf373
commit ce13bf11c0
6 changed files with 46 additions and 39 deletions

View file

@ -15,26 +15,6 @@ const CommentsEditForm = (props, context) => {
resultQuery={Comments.graphQLQueries.single}
successCallback={props.successCallback}
cancelCallback={props.cancelCallback}
updateQueries={{
getPost: (prev, { mutationResult }) => {
const editedComment = mutationResult.data.commentsEdit;
const commentIndex = Telescope.utils.findIndex(prev.post.comments, comment => comment._id = editedComment._id);
const newCommentList = _.clone(prev.post.comments);
newCommentList[commentIndex] = Object.assign(newCommentList[commentIndex], editedComment);
const newPost = update(prev, {
post: {
comments: {
$set: newCommentList
}
}
});
return newPost;
},
}}
/>
</div>
)

View file

@ -38,15 +38,12 @@ class CommentsItem extends Component{
}
editCancelCallback(event) {
console.log("editCancelCallback")
event.preventDefault();
this.setState({showEdit: false});
}
editSuccessCallback(event) {
editSuccessCallback() {
console.log("editSuccessCallback")
event.preventDefault();
this.setState({showEdit: false});
}
deleteComment() {

View file

@ -65,6 +65,7 @@ class PostsEditForm extends Component {
mutationName: "postsEdit",
resultQuery: Posts.graphQLQueries.single,
successCallback: (post) => {
this.context.closeCallback();
this.props.flash(this.context.intl.formatMessage({id: "posts.edit_success"}, {title: post.title}), 'success');
}
}}

View file

@ -35,6 +35,7 @@ const PostsNewForm = (props, context) => {
}}
successCallback={post => {
props.router.push({pathname: Posts.getPageUrl(post)});
context.closeCallback();
props.flash(context.intl.formatMessage({id: "posts.created_message"}), "success");
}}
/>
@ -51,6 +52,7 @@ PostsNewForm.propTypes = {
PostsNewForm.contextTypes = {
currentUser: React.PropTypes.object,
triggerMainRefetch: React.PropTypes.func,
closeCallback: React.PropTypes.func,
intl: intlShape
};

View file

@ -1,3 +1,11 @@
/*
This component wraps FormWrapper with a mutation that submits the form.
The mutation can either be one that inserts a new document, or one
that updates an existing document.
*/
import Telescope from 'meteor/nova:lib';
import React, { PropTypes, Component } from 'react';
import { bindActionCreators } from 'redux';
@ -10,6 +18,7 @@ import FormWrapper from './FormWrapper.jsx';
// const mapStateToProps = state => ({ messages: state.messages });
// const mapDispatchToProps = dispatch => bindActionCreators(Telescope.actions.messages, dispatch);
const FormWithMutation = props => {
let ComponentWithMutation;
@ -49,7 +58,7 @@ const FormWithMutation = props => {
mutation: ({document}) => {
return mutate({
variables: {document: document},
updateQueries: props.updateQueries
updateQueries: props.updateQueries // needed for new document form only
})
}
}),
@ -62,19 +71,29 @@ const FormWithMutation = props => {
};
FormWithMutation.propTypes = {
// main options
collection: React.PropTypes.object,
schema: React.PropTypes.object,
document: React.PropTypes.object, // if a document is passed, this will be an edit form
submitCallback: React.PropTypes.func,
successCallback: React.PropTypes.func,
errorCallback: React.PropTypes.func,
mutationName: React.PropTypes.string,
schema: React.PropTypes.object, // usually not needed
// graphQL
mutationName: React.PropTypes.string, // the mutation name
resultQuery: React.PropTypes.string, // the results to get back
updateQueries: React.PropTypes.object, // how to update queries
// form
labelFunction: React.PropTypes.func,
prefilledProps: React.PropTypes.object,
layout: React.PropTypes.string,
fields: React.PropTypes.arrayOf(React.PropTypes.string),
// callbacks
submitCallback: React.PropTypes.func,
successCallback: React.PropTypes.func,
errorCallback: React.PropTypes.func,
cancelCallback: React.PropTypes.func,
resultQuery: React.PropTypes.string,
fields: React.PropTypes.arrayOf(React.PropTypes.string)
}
module.exports = FormWithMutation;

View file

@ -479,19 +479,27 @@ class FormWrapper extends Component{
}
FormWrapper.propTypes = {
// main options
collection: React.PropTypes.object,
schema: React.PropTypes.object,
document: React.PropTypes.object, // if a document is passed, this will be an edit form
submitCallback: React.PropTypes.func,
successCallback: React.PropTypes.func,
errorCallback: React.PropTypes.func,
mutation: React.PropTypes.func,
schema: React.PropTypes.object, // usually not needed
// graphQL
mutation: React.PropTypes.func, // the mutation
// form
labelFunction: React.PropTypes.func,
prefilledProps: React.PropTypes.object,
layout: React.PropTypes.string,
fields: React.PropTypes.arrayOf(React.PropTypes.string),
// callbacks
submitCallback: React.PropTypes.func,
successCallback: React.PropTypes.func,
errorCallback: React.PropTypes.func,
cancelCallback: React.PropTypes.func,
refetchQuery: React.PropTypes.func,
fields: React.PropTypes.arrayOf(React.PropTypes.string)
}
FormWrapper.defaultProps = {