Use framework for mutations

This commit is contained in:
Chi Vinh Le
2017-05-25 01:18:33 +07:00
parent d9ee215d66
commit 48a8e394ef
10 changed files with 207 additions and 192 deletions
+94
View File
@@ -1,6 +1,100 @@
import {add} from 'coral-framework/services/graphqlRegistry';
import {gql} from 'react-apollo';
const queues = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
const extension = {
fragments: {
SetUserStatusResponse: gql`
fragment Admin_SetUserStatusResponse on SetUserStatusResponse {
errors {
translation_key
}
}
`,
SuspendUserResponse: gql`
fragment Admin_SuspendUserResponse on SuspendUserResponse {
errors {
translation_key
}
}
`,
RejectUsernameResponse: gql`
fragment Admin_RejectUsernameResponse on RejectUsernameResponse {
errors {
translation_key
}
}
`,
SetCommentStatusResponse: gql`
fragment Admin_SetCommentStatusResponse on SetCommentStatusResponse {
errors {
translation_key
}
}
`,
},
mutations: {
SetUserStatus: () => ({
refetchQueries: ['Admin_Community'],
}),
RejectUsername: () => ({
refetchQueries: ['Admin_Community'],
}),
SetCommentStatus: ({variables: {commentId, status}}) => ({
updateQueries: {
Admin_Moderation: (oldData) => {
const comment = queues.reduce((comment, queue) => {
return comment ? comment : oldData[queue].find((c) => c.id === commentId);
}, null);
let accepted = oldData.accepted;
let acceptedCount = oldData.acceptedCount;
let rejected = oldData.rejected;
let rejectedCount = oldData.rejectedCount;
if (status !== comment.status) {
if (status === 'ACCEPTED') {
comment.status = 'ACCEPTED';
acceptedCount++;
accepted = [comment, ...accepted];
}
else if (status === 'REJECTED') {
comment.status = 'REJECTED';
rejectedCount++;
rejected = [comment, ...rejected];
}
}
const premod = oldData.premod.filter((c) => c.id !== commentId);
const flagged = oldData.flagged.filter((c) => c.id !== commentId);
const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
if (status === 'REJECTED') {
accepted = oldData.accepted.filter((c) => c.id !== commentId);
acceptedCount = accepted.length < oldData.accepted.length ? oldData.acceptedCount - 1 : oldData.acceptedCount;
}
else if (status === 'ACCEPTED') {
rejected = oldData.rejected.filter((c) => c.id !== commentId);
rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
}
return {
...oldData,
premodCount: Math.max(0, premodCount),
flaggedCount: Math.max(0, flaggedCount),
acceptedCount: Math.max(0, acceptedCount),
rejectedCount: Math.max(0, rejectedCount),
premod,
flagged,
accepted,
rejected,
};
}
}
}),
},
};
add(extension);
@@ -1,153 +0,0 @@
import {graphql} from 'react-apollo';
import SET_USER_STATUS from './setUserStatus.graphql';
import SET_COMMENT_STATUS from './setCommentStatus.graphql';
import SUSPEND_USER from './suspendUser.graphql';
import REJECT_USERNAME from './rejectUsername.graphql';
export const banUser = graphql(SET_USER_STATUS, {
props: ({mutate}) => ({
banUser: ({userId}) => {
return mutate({
variables: {
userId,
status: 'BANNED'
},
refetchQueries: ['Admin_Community']
});
}}),
});
export const setUserStatus = graphql(SET_USER_STATUS, {
props: ({mutate}) => ({
approveUser: ({userId}) => {
return mutate({
variables: {
userId,
status: 'APPROVED'
},
refetchQueries: ['Admin_Community']
});
}
})
});
export const suspendUser = graphql(SUSPEND_USER, {
props: ({mutate}) => ({
suspendUser: (input) => {
return mutate({
variables: {
input,
},
});
}
})
});
export const rejectUsername = graphql(REJECT_USERNAME, {
props: ({mutate}) => ({
rejectUsername: (input) => {
return mutate({
variables: {
input,
},
refetchQueries: ['Admin_Community']
});
}
})
});
const views = ['all', 'premod', 'flagged', 'accepted', 'rejected'];
export const setCommentStatus = graphql(SET_COMMENT_STATUS, {
props: ({mutate}) => ({
acceptComment: ({commentId}) => {
return mutate({
variables: {
commentId,
status: 'ACCEPTED'
},
updateQueries: {
Admin_Moderation: (oldData) => {
const comment = views.reduce((comment, view) => {
return comment ? comment : oldData[view].find((c) => c.id === commentId);
}, null);
let accepted;
let acceptedCount = oldData.acceptedCount;
// if the comment was already in the Approved queue, don't re-add it
if (comment.status === 'ACCEPTED') {
accepted = [...oldData.accepted];
} else {
comment.status = 'ACCEPTED';
acceptedCount++;
accepted = [comment, ...oldData.accepted];
}
const premod = oldData.premod.filter((c) => c.id !== commentId);
const flagged = oldData.flagged.filter((c) => c.id !== commentId);
const rejected = oldData.rejected.filter((c) => c.id !== commentId);
const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
const rejectedCount = rejected.length < oldData.rejected.length ? oldData.rejectedCount - 1 : oldData.rejectedCount;
return {
...oldData,
premodCount: Math.max(0, premodCount),
flaggedCount: Math.max(0, flaggedCount),
acceptedCount: Math.max(0, acceptedCount),
rejectedCount: Math.max(0, rejectedCount),
premod,
flagged,
accepted,
rejected,
};
}
}
});
},
rejectComment: ({commentId}) => {
return mutate({
variables: {
commentId,
status: 'REJECTED'
},
updateQueries: {
Admin_Moderation: (oldData) => {
const comment = views.reduce((comment, view) => {
return comment ? comment : oldData[view].find((c) => c.id === commentId);
}, null);
let rejected;
let rejectedCount = oldData.rejectedCount;
// if the item was already in the Rejected queue, don't put it in again
if (comment.status === 'REJECTED') {
rejected = oldData.rejected;
} else {
comment.status = 'REJECTED';
rejectedCount++;
rejected = [comment, ...oldData.rejected];
}
const premod = oldData.premod.filter((c) => c.id !== commentId);
const flagged = oldData.flagged.filter((c) => c.id !== commentId);
const accepted = oldData.accepted.filter((c) => c.id !== commentId);
const premodCount = premod.length < oldData.premod.length ? oldData.premodCount - 1 : oldData.premodCount;
const flaggedCount = flagged.length < oldData.flagged.length ? oldData.flaggedCount - 1 : oldData.flaggedCount;
const acceptedCount = accepted.length < oldData.accepted.length ? oldData.acceptedCount - 1 : oldData.acceptedCount;
return {
...oldData,
premodCount: Math.max(0, premodCount),
flaggedCount: Math.max(0, flaggedCount),
acceptedCount: Math.max(0, acceptedCount),
rejectedCount: Math.max(0, rejectedCount),
premod,
flagged,
accepted,
rejected
};
}
}
});
}
})
});
@@ -1,7 +0,0 @@
mutation rejectUsername($input: RejectUsernameInput!) {
rejectUsername(input: $input) {
errors {
translation_key
}
}
}
@@ -1,7 +0,0 @@
mutation setCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){
setCommentStatus(id: $commentId, status: $status) {
errors {
translation_key
}
}
}
@@ -1,7 +0,0 @@
mutation setUserStatus($userId: ID!, $status: USER_STATUS!) {
setUserStatus(id: $userId, status: $status) {
errors {
translation_key
}
}
}
@@ -1,7 +0,0 @@
mutation suspendUser($input: SuspendUserInput!) {
suspendUser(input: $input) {
errors {
translation_key
}
}
}
@@ -57,7 +57,6 @@ export default class Community extends Component {
getTabContent(searchValue, props) {
const {community, root: {users}} = props;
const activeTab = props.route.path === ':id' ? 'flagged' : props.route.path;
console.log(props);
if (activeTab === 'people') {
return (
@@ -5,7 +5,7 @@ import {compose, gql} from 'react-apollo';
import withQuery from 'coral-framework/hocs/withQuery';
import {Spinner} from 'coral-ui';
import {banUser, setUserStatus, rejectUsername} from 'coral-admin/src/graphql/mutations';
import {withSetUserStatus, withRejectUsername} from 'coral-framework/graphql/mutations';
import {
fetchAccounts,
@@ -25,6 +25,14 @@ class CommunityContainer extends Component {
this.props.fetchAccounts({});
}
approveUser = ({userId}) => {
return this.props.setUserStatus({userId, status: 'APPROVED'});
}
banUser = ({userId}) => {
return this.props.setUserStatus({userId, status: 'BANNED'});
}
render() {
if (this.props.data.error) {
return <div>{this.props.data.error.message}</div>;
@@ -34,7 +42,7 @@ class CommunityContainer extends Component {
return <div><Spinner/></div>;
}
return (
<Community {...this.props} />
<Community {...this.props} approveUser={this.approveUser} banUser={this.banUser}/>
);
}
}
@@ -94,7 +102,6 @@ const mapDispatchToProps = (dispatch) =>
export default compose(
connect(mapStateToProps, mapDispatchToProps),
withCommunityQuery,
banUser,
setUserStatus,
rejectUsername
withSetUserStatus,
withRejectUsername,
)(CommunityContainer);
@@ -6,7 +6,7 @@ import isEqual from 'lodash/isEqual';
import withQuery from 'coral-framework/hocs/withQuery';
import {getDefinitionName} from 'coral-framework/utils';
import {banUser, setCommentStatus, suspendUser} from '../../../graphql/mutations';
import {withSetUserStatus, withSuspendUser, withSetCommentStatus} from 'coral-framework/graphql/mutations';
import {fetchSettings} from 'actions/settings';
import {updateAssets} from 'actions/assets';
@@ -39,6 +39,18 @@ class ModerationContainer extends Component {
}
}
banUser = ({userId}) => {
return this.props.setUserStatus({userId, status: 'BANNED'});
}
acceptComment = ({commentId}) => {
return this.props.setCommentStatus({commentId, status: 'ACCEPTED'});
}
rejectComment = ({commentId}) => {
return this.props.setCommentStatus({commentId, status: 'REJECTED'});
}
loadMore = ({limit = 10, cursor, sort, tab, asset_id}) => {
let variables = {
limit,
@@ -90,7 +102,13 @@ class ModerationContainer extends Component {
return <div><Spinner/></div>;
}
return <Moderation {...this.props} loadMore={this.loadMore} />;
return <Moderation
{...this.props}
loadMore={this.loadMore}
banUser={this.banUser}
acceptComment={this.acceptComment}
rejectComment={this.rejectComment}
/>;
}
}
@@ -248,9 +266,9 @@ const mapDispatchToProps = (dispatch) => ({
export default compose(
connect(mapStateToProps, mapDispatchToProps),
setCommentStatus,
banUser,
suspendUser,
withSetCommentStatus,
withSetUserStatus,
withSuspendUser,
withQueueCountPolling,
withModQueueQuery,
)(ModerationContainer);
@@ -1,6 +1,84 @@
import {gql} from 'react-apollo';
import withMutation from '../hocs/withMutation';
export const withSetCommentStatus = withMutation(
gql`
mutation SetCommentStatus($commentId: ID!, $status: COMMENT_STATUS!){
setCommentStatus(id: $commentId, status: $status) {
...SetCommentStatusResponse
}
}
`, {
props: ({mutate}) => ({
setCommentStatus: ({commentId, status}) => {
return mutate({
variables: {
commentId,
status,
},
});
}
})
});
export const withSuspendUser = withMutation(
gql`
mutation SuspendUser($input: SuspendUserInput!) {
suspendUser(input: $input) {
...SuspendUserResponse
}
}
`, {
props: ({mutate}) => ({
suspendUser: (input) => {
return mutate({
variables: {
input,
},
});
}
})
});
export const withRejectUsername = withMutation(
gql`
mutation RejectUsername($input: RejectUsernameInput!) {
rejectUsername(input: $input) {
...RejectUsernameResponse
}
}
`, {
props: ({mutate}) => ({
rejectUsername: (input) => {
return mutate({
variables: {
input,
},
});
}
})
});
export const withSetUserStatus = withMutation(
gql`
mutation SetUserStatus($userId: ID!, $status: USER_STATUS!) {
setUserStatus(id: $userId, status: $status) {
...SetUserStatusResponse
}
}
`, {
props: ({mutate}) => ({
setUserStatus: ({userId, status}) => {
return mutate({
variables: {
userId,
status
},
});
}
}),
});
export const withPostComment = withMutation(
gql`
mutation PostComment($comment: CreateCommentInput!) {