Adding addUserRole and removeUserRole

client/coral-admin/src/actions/community.js

@@ -7,7 +7,6 @@ import {
   SORT_UPDATE,
   SET_PAGE,
   SET_SEARCH_VALUE,
-  SET_ROLE,
   SHOW_BANUSER_DIALOG,
   HIDE_BANUSER_DIALOG,
   SHOW_REJECT_USERNAME_DIALOG,
@@ -55,13 +54,6 @@ export const setSearchValue = (value) => ({
   value,
 });
 
-export const setRole = (id, role) => (dispatch, _, {rest}) => {
-  return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
-    .then(() => {
-      return dispatch({type: SET_ROLE, id, role});
-    });
-};
-
 // Ban User Dialog
 export const showBanUserDialog = (user) => ({type: SHOW_BANUSER_DIALOG, user});
 export const hideBanUserDialog = () => ({type: HIDE_BANUSER_DIALOG});

client/coral-admin/src/constants/community.js

@@ -6,7 +6,6 @@ export const FETCH_USERS_FAILURE = `${prefix}_FETCH_USERS_FAILURE`;
 
 export const SORT_UPDATE = `${prefix}_SORT_UPDATE`;
 export const SET_PAGE = `${prefix}_SET_PAGE`;
-export const SET_ROLE = `${prefix}_SET_ROLE`;
 
 export const FETCH_FLAGGED_COMMENTERS_REQUEST = `${prefix}_FETCH_FLAGGED_COMMENTERS_REQUEST`;
 export const FETCH_FLAGGED_COMMENTERS_SUCCESS = `${prefix}_FETCH_FLAGGED_COMMENTERS_SUCCESS`;

client/coral-admin/src/routes/Community/containers/People.js

@@ -4,7 +4,7 @@ import {bindActionCreators} from 'redux';
 import {compose} from 'react-apollo';
 import People from '../components/People';
 import PropTypes from 'prop-types';
-import {withUnBanUser, withBanUser} from 'coral-framework/graphql/mutations';
+import {withUnBanUser, withBanUser, withAddUserRole, withRemoveUserRole} from 'coral-framework/graphql/mutations';
 
 import {viewUserDetail} from '../../../actions/userDetail';
 
@@ -13,7 +13,6 @@ import {
   updateSorting,
   setPage,
   hideRejectUsernameDialog,
-  setRole,
   setSearchValue,
 } from '../../../actions/community';
 
@@ -66,7 +65,13 @@ class PeopleContainer extends React.Component {
   setUserBanStatus = async (id, bannedStatus) => {
     const {banUser, unBanUser} = this.props;
     await bannedStatus ? banUser({id, message: ''}) : unBanUser({id});
-    this.fetchUsers();
+    await this.fetchUsers();
+  } 
+   
+  setRole = async (id, role) => {
+    const {addUserRole, removeUserRole} = this.props;
+    await role ? addUserRole(id, role) : removeUserRole(id, role);
+    await this.fetchUsers();
   } 
 
   render() {
@@ -78,7 +83,8 @@ class PeopleContainer extends React.Component {
       onPageChange={this.onPageChange}
       totalPages={this.props.community.totalPagesPeople}
       setUserBanStatus={this.setUserBanStatus}
-      setRole={this.props.setRole}
+      setRole={this.setRole}
+      removeUserRole={this.props.removeUserRole}
       page={this.props.community.pagePeople}
       viewUserDetail={this.props.viewUserDetail}
     />;
@@ -89,7 +95,8 @@ PeopleContainer.propTypes = {
   setPage: PropTypes.func,
   fetchUsers: PropTypes.func,
   updateSorting: PropTypes.func,
-  setRole: PropTypes.func.isRequired,
+  addUserRole: PropTypes.func.isRequired,
+  removeUserRole: PropTypes.func.isRequired,
   banUser: PropTypes.func.isRequired,
   unBanUser: PropTypes.func.isRequired,
   setSearchValue: PropTypes.func.isRequired,
@@ -103,7 +110,6 @@ const mapDispatchToProps = (dispatch) =>
     fetchUsers,
     updateSorting,
     hideRejectUsernameDialog,
-    setRole,
     viewUserDetail,
     setSearchValue,
   }, dispatch);
@@ -112,4 +118,6 @@ export default compose(
   connect(null, mapDispatchToProps),
   withBanUser,
   withUnBanUser,
+  withAddUserRole,
+  withRemoveUserRole,
 )(PeopleContainer);

client/coral-framework/graphql/fragments.js

@@ -3,6 +3,7 @@ import {createDefaultResponseFragments} from '../utils';
 // fragments defined here are automatically registered.
 export default {
   ...createDefaultResponseFragments(
+    'ModifyUserRoleResponse',
     'ChangeUsernameResponse',
     'BanUsersResponse',
     'UnBanUserResponse',

client/coral-framework/graphql/mutations.js

@@ -254,6 +254,46 @@ export const withUnBanUser = withMutation(
     }),
   });
 
+export const withAddUserRole = withMutation(
+  gql`
+    mutation AddUserRole($id: ID!, $role: USER_ROLES!) {
+      addUserRole(id: $id, role: $role) {
+        ...ModifyUserRoleResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      addUserRole: (id, role) => {
+        return mutate({
+          variables: {
+            id,
+            role,
+          },
+        });
+      }
+    }),
+  });
+
+export const withRemoveUserRole = withMutation(
+  gql`
+    mutation RemoveUserRole($id: ID!, $role: USER_ROLES!) {
+      removeUserRole(id: $id, role: $role) {
+        ...ModifyUserRoleResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      removeUserRole: (id, role) => {
+        return mutate({
+          variables: {
+            id,
+            role,
+          },
+        });
+      }
+    }),
+  });
+
 export const withPostComment = withMutation(
   gql`
     mutation PostComment($input: CreateCommentInput!) {

graph/typeDefs.graphql

@@ -37,6 +37,9 @@ enum USER_ROLES {
 
   # a moderator of the site
   MODERATOR
+
+  # a staff of the site
+  STAFF
 }
 
 # Token is a personal access token associated with a given user.