banUser and unBanUser wip - removing setStatus

2026-07-15 11:26:58 +08:00 · 2017-11-22 21:45:55 -03:00
parent a537d9ac17
commit b69195253b
5 changed files with 109 additions and 79 deletions
@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import BanUserDialog from '../components/BanUserDialog';
 import {hideBanUserDialog} from '../actions/banUserDialog';
-import {withSetUserBanStatus, withSetCommentStatus} from 'coral-framework/graphql/mutations';
+import {withBanUser, withSetCommentStatus} from 'coral-framework/graphql/mutations';
 import {compose} from 'react-apollo';
 import t from 'coral-framework/services/i18n';
 import {getErrorMessages} from 'coral-framework/utils';
@@ -13,9 +13,9 @@ import {notify} from 'coral-framework/actions/notification';
 class BanUserDialogContainer extends Component {

  banUser = async () => {
-    const {userId, commentId, commentStatus, setUserBanStatus, setCommentStatus, hideBanUserDialog, notify} = this.props;
+    const {userId, commentId, commentStatus, banUser, setCommentStatus, hideBanUserDialog, notify} = this.props;
    try {
-      await setUserBanStatus({id: userId, status: true});
+      await banUser({id: userId, status: true});
      hideBanUserDialog();
      if (commentId && commentStatus && commentStatus !== 'REJECTED') {
        await setCommentStatus({commentId, status: 'REJECTED'});
@@ -48,7 +48,7 @@ class BanUserDialogContainer extends Component {
 }

 BanUserDialogContainer.propTypes = {
-  setUserBanStatus: PropTypes.func.isRequired,
+  banUser: PropTypes.func.isRequired,
  hideBanUserDialog: PropTypes.func,
  open: PropTypes.bool,
  username: PropTypes.string,
@@ -71,7 +71,7 @@ const mapDispatchToProps = (dispatch) => ({
 });

 export default compose(
-  withSetUserBanStatus,
+  withBanUser,
  withSetCommentStatus,
  connect(
    mapStateToProps,
@@ -18,7 +18,8 @@ const People = (props) => {
    totalPages,
    page,
    setRole,
-    setUserBanStatus,
+    banUser,
+    unBanUser,
    viewUserDetail,
  } = props;

@@ -46,7 +47,8 @@ const People = (props) => {
              users={users}
              setRole={setRole}
              viewUserDetail={viewUserDetail}
-              setUserBanStatus={setUserBanStatus}
+              banUser={banUser}
+              unBanUser={unBanUser}
              onHeaderClickHandler={onHeaderClickHandler}
              pageCount={totalPages}
              onPageChange={onPageChange}
@@ -67,7 +69,8 @@ People.propTypes = {
  onSearchChange: PropTypes.func,
  totalPages: PropTypes.number,
  onPageChange: PropTypes.func,
-  setUserBanStatus: PropTypes.func.isRequired,
+  banUser: PropTypes.func.isRequired,
+  unBanUser: PropTypes.func.isRequired,
  setRole: PropTypes.func.isRequired,
  viewUserDetail: PropTypes.func.isRequired,
 };
@@ -24,75 +24,83 @@ const headers = [
  }
 ];

-const getStatus = (status) => {
-  return status.banned.status ? 'BANNED' : 'ACTIVE';
-};
+const Table = ({users, setRole, onHeaderClickHandler, banUser, unBanUser, viewUserDetail, pageCount, page, onPageChange}) => {

-const Table = ({users, setRole, onHeaderClickHandler, setUserBanStatus, viewUserDetail, pageCount, page, onPageChange}) => (
-  <div>
-    <table className={`mdl-data-table ${styles.dataTable}`}>
-      <thead>
-        <tr>
-          {headers.map((header, i) =>(
-            <th
-              key={i}
-              className={cn('mdl-data-table__cell--non-numeric', styles.header)}
-              scope="col"
-              onClick={() => onHeaderClickHandler({field: header.field})}>
-              {header.title}
-            </th>
-          ))}
-        </tr>
-      </thead>
-      <tbody>
-        {users.map((row, i)=> (
-          <tr key={i} className="talk-admin-community-people-row">
-            <td className="mdl-data-table__cell--non-numeric">
-              <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
-              <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
-            </td>
-            <td className="mdl-data-table__cell--non-numeric">
-              {row.created_at}
-            </td>
-            <td className="mdl-data-table__cell--non-numeric">
-              <Dropdown
-                containerClassName="talk-admin-community-people-dd-status"
-                value={getStatus(row.status)}
-                placeholder={t('community.status')}
-                onChange={(status) => setUserBanStatus({id: row.id, status: status === 'BANNED'})}>
-                <Option value={'ACTIVE'} label={t('community.active')} />
-                <Option value={'BANNED'} label={t('community.banned')} />
-              </Dropdown>
-            </td>
-            <td className="mdl-data-table__cell--non-numeric">
-              <Dropdown
-                containerClassName="talk-admin-community-people-dd-role"
-                value={row.roles[0] || ''}
-                placeholder={t('community.role')}
-                onChange={(role) => setRole(row.id, role)}>
-                <Option value={''} label={t('community.none')} />
-                <Option value={'STAFF'} label={t('community.staff')} />
-                <Option value={'MODERATOR'} label={t('community.moderator')} />
-                <Option value={'ADMIN'} label={t('community.admin')} />
-              </Dropdown>
-            </td>
+  const getStatus = (status) => {
+    return status.banned.status ? 'BANNED' : 'ACTIVE';
+  };
+
+  const setUserBanStatus = (id, bannedStatus) => {
+    return bannedStatus ? unBanUser(id) : banUser(id);
+  };
+
+  return (
+    <div>
+      <table className={`mdl-data-table ${styles.dataTable}`}>
+        <thead>
+          <tr>
+            {headers.map((header, i) =>(
+              <th
+                key={i}
+                className={cn('mdl-data-table__cell--non-numeric', styles.header)}
+                scope="col"
+                onClick={() => onHeaderClickHandler({field: header.field})}>
+                {header.title}
+              </th>
+            ))}
          </tr>
-        ))}
-      </tbody>
-    </table>
-    <Paginate
-      pageCount={pageCount}
-      page={page - 1}
-      onPageChange={onPageChange}
-    />
-  </div>
-);
+        </thead>
+        <tbody>
+          {users.map((row, i)=> (
+            <tr key={i} className="talk-admin-community-people-row">
+              <td className="mdl-data-table__cell--non-numeric">
+                <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
+                <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
+              </td>
+              <td className="mdl-data-table__cell--non-numeric">
+                {row.created_at}
+              </td>
+              <td className="mdl-data-table__cell--non-numeric">
+                <Dropdown
+                  containerClassName="talk-admin-community-people-dd-status"
+                  value={getStatus(row.status)}
+                  placeholder={t('community.status')}
+                  onChange={(status) => setUserBanStatus(row.id, status === 'BANNED')}>
+                  <Option value={'ACTIVE'} label={t('community.active')} />
+                  <Option value={'BANNED'} label={t('community.banned')} />
+                </Dropdown>
+              </td>
+              <td className="mdl-data-table__cell--non-numeric">
+                <Dropdown
+                  containerClassName="talk-admin-community-people-dd-role"
+                  value={row.roles[0] || ''}
+                  placeholder={t('community.role')}
+                  onChange={(role) => setRole(row.id, role)}>
+                  <Option value={''} label={t('community.none')} />
+                  <Option value={'STAFF'} label={t('community.staff')} />
+                  <Option value={'MODERATOR'} label={t('community.moderator')} />
+                  <Option value={'ADMIN'} label={t('community.admin')} />
+                </Dropdown>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <Paginate
+        pageCount={pageCount}
+        page={page - 1}
+        onPageChange={onPageChange}
+      />
+    </div>
+  );
+};

 Table.propTypes = {
  users: PropTypes.array,
  onHeaderClickHandler: PropTypes.func.isRequired,
  setRole: PropTypes.func.isRequired,
-  setUserBanStatus: PropTypes.func.isRequired,
+  banUser: PropTypes.func.isRequired,
+  unBanUser: PropTypes.func.isRequired,
  viewUserDetail: PropTypes.func.isRequired,
  pageCount: PropTypes.number.isRequired,
  page: PropTypes.number.isRequired,
@@ -6,7 +6,7 @@ import {withFragments} from 'plugin-api/beta/client/hocs';
 import {Spinner} from 'coral-ui';
 import PropTypes from 'prop-types';

-import {withSetUserBanStatus} from 'coral-framework/graphql/mutations';
+import {withUnBanUser} from 'coral-framework/graphql/mutations';
 import {showBanUserDialog} from 'actions/banUserDialog';
 import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {showRejectUsernameDialog} from '../../../actions/community';
@@ -25,7 +25,7 @@ class FlaggedAccountsContainer extends Component {
  }

  approveUser = ({userId}) => {
-    return this.props.setUserBanStatus({
+    return this.props.unBanUser({
      id: userId,
      status: false
    });
@@ -83,7 +83,7 @@ FlaggedAccountsContainer.propTypes = {
  showSuspendUserDialog: PropTypes.func,
  showRejectUsernameDialog: PropTypes.func,
  viewUserDetail: PropTypes.func,
-  setUserBanStatus: PropTypes.func,
+  unBanUser: PropTypes.func,
  data: PropTypes.object,
  root: PropTypes.object
 };
@@ -121,7 +121,7 @@ const mapDispatchToProps = (dispatch) =>

 export default compose(
  connect(null, mapDispatchToProps),
-  withSetUserBanStatus,
+  withUnBanUser,
  withFragments({
    root: gql`
      fragment TalkAdminCommunity_FlaggedAccounts_root on RootQuery {
@@ -216,16 +216,35 @@ export const withChangeUsername = withMutation(
    })
  });

-export const withSetUserBanStatus = withMutation(
+export const withBanUser = withMutation(
  gql`
-    mutation SetUserBanStatus($input: SetUserBanStatusInput!) {
-      setUserBanStatus(input: $input) {
-        ...SetUserBanStatusResponse
+    mutation BanUser($input: BanUserInput!) {
+      banUser(input: $input) {
+        ...BanUsersResponse
      }
    }
  `, {
    props: ({mutate}) => ({
-      setUserBanStatus: (input) => {
+      banUser: (input) => {
+        return mutate({
+          variables: {
+            input,
+          },
+        });
+      }
+    }),
+  });
+
+export const withUnBanUser = withMutation(
+  gql`
+    mutation UnBanUser($input: UnBanUserInput!) {
+      unBanUser(input: $input) {
+        ...UnBanUserResponse
+      }
+    }
+  `, {
+    props: ({mutate}) => ({
+      unBanUser: (input) => {
        return mutate({
          variables: {
            input,