Adding utils, and replacing REST old endpoints

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

@@ -18,7 +18,6 @@ const People = (props) => {
     totalPages,
     page,
     setUserRole,
-    setUserBanStatus,
     viewUserDetail,
   } = props;
 
@@ -46,11 +45,14 @@ const People = (props) => {
               users={users}
               setUserRole={setUserRole}
               viewUserDetail={viewUserDetail}
-              setUserBanStatus={setUserBanStatus}
               onHeaderClickHandler={onHeaderClickHandler}
               pageCount={totalPages}
               onPageChange={onPageChange}
               page={page}
+              unBanUser={props.unBanUser}
+              unSuspendUser={props.unSuspendUser}
+              showSuspendUserDialog={props.showSuspendUserDialog}
+              showBanUserDialog={props.showBanUserDialog}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
@@ -67,9 +69,12 @@ People.propTypes = {
   onSearchChange: PropTypes.func,
   totalPages: PropTypes.number,
   onPageChange: PropTypes.func,
-  setUserBanStatus: PropTypes.func.isRequired,
   setUserRole: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
+  unBanUser: PropTypes.func.isRequired,
+  unSuspendUser: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
 };
 
 export default People;

client/coral-admin/src/routes/Community/components/Table.js

@@ -4,6 +4,9 @@ import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
 import {Paginate, Dropdown, Option} from 'coral-ui';
 import cn from 'classnames';
+import ActionsMenu from 'coral-admin/src/components/ActionsMenu';
+import ActionsMenuItem from 'coral-admin/src/components/ActionsMenuItem';
+import {isSuspended, isBanned} from 'coral-framework/utils/user';
 
 const headers = [
   {
@@ -23,79 +26,120 @@ const headers = [
     field: 'role'
   }
 ];
-const getStatus = (status) => {
-  return status.banned.status ? 'BANNED' : 'ACTIVE';
-};
 
-const Table = ({users, setUserRole, 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(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.role}
-                placeholder={t('community.role')}
-                onChange={(role) => setUserRole(row.id, role)}>
-                <Option value={'COMMENTER'} label={t('community.commenter')} />
-                <Option value={'STAFF'} label={t('community.staff')} />
-                <Option value={'MODERATOR'} label={t('community.moderator')} />
-                <Option value={'ADMIN'} label={t('community.admin')} />
-              </Dropdown>
-            </td>
+const Table = (props) => {
+
+  const {
+    users,
+    setUserRole,
+    onHeaderClickHandler,
+    viewUserDetail,
+    pageCount,
+    page,
+    onPageChange,
+    unSuspendUser,
+    unBanUser,
+    showSuspendUserDialog,
+    showBanUserDialog,
+  } = props;
+
+  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((user, i)=> (
+            <tr key={i} className="talk-admin-community-people-row">
+              <td className="mdl-data-table__cell--non-numeric">
+                <button onClick={() => {viewUserDetail(user.id);}} className={cn(styles.username, styles.button)}>{user.username}</button>
+                <span className={styles.email}>{user.profiles.map(({id}) => id)}</span>
+              </td>
+              <td className="mdl-data-table__cell--non-numeric">
+                {user.created_at}
+              </td>
+              <td className="mdl-data-table__cell--non-numeric">
+              
+                <ActionsMenu
+                  icon="person"
+                  className={cn(styles.actionsMenu, 'talk-admin-community-people-dd-status')}
+                  buttonClassNames={cn({
+                    [styles.actionsMenuSuspended]: isSuspended(user),
+                    [styles.actionsMenuBanned]: isBanned(user),
+                  }, 'talk-admin-user-detail-actions-button')} >
+
+                  {isSuspended(user) ? <ActionsMenuItem
+                    onClick={() => unSuspendUser({id: user.id})}>
+                    Remove Suspension
+                  </ActionsMenuItem> : <ActionsMenuItem
+                    onClick={() => showSuspendUserDialog({
+                      userId: user.id,
+                      username: user.username,
+                    })}>
+                    Suspend User
+                  </ActionsMenuItem>}
+
+                  {isBanned(user) ? <ActionsMenuItem
+                    onClick={() => unBanUser({id: user.id})}>
+                    Remove Ban
+                  </ActionsMenuItem> : <ActionsMenuItem
+                    onClick={() => showBanUserDialog({
+                      userId: user.id,
+                      username: user.username,
+                    })}>
+                    Ban User
+                  </ActionsMenuItem>}
+
+                </ActionsMenu>
+              </td>
+              <td className="mdl-data-table__cell--non-numeric">
+                <Dropdown
+                  containerClassName="talk-admin-community-people-dd-role"
+                  value={user.role}
+                  placeholder={t('community.role')}
+                  onChange={(role) => setUserRole(user.id, role)}>
+                  <Option value={'COMMENTER'} label={t('community.commenter')} />
+                  <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,
   setUserRole: PropTypes.func.isRequired,
-  setUserBanStatus: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   pageCount: PropTypes.number.isRequired,
   page: PropTypes.number.isRequired,
   onPageChange: PropTypes.func.isRequired,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
+  unBanUser: PropTypes.func.isRequired,
+  unSuspendUser: PropTypes.func.isRequired,
 };
 
 export default Table;

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

@@ -6,6 +6,7 @@ import {getDefinitionName} from 'coral-framework/utils';
 import {withRejectUsername} from 'coral-framework/graphql/mutations';
 import FlaggedAccounts from '../containers/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
+import People from '../containers/People';
 import {hideRejectUsernameDialog} from '../../../actions/community';
 import Community from '../components/Community';
 
@@ -32,6 +33,7 @@ const withData = withQuery(gql`
     )
     ...${getDefinitionName(FlaggedAccounts.fragments.root)}
     ...${getDefinitionName(FlaggedUser.fragments.root)}
+    ...${getDefinitionName(People.fragments.root)}
     me {
       ...${getDefinitionName(FlaggedUser.fragments.me)}
       __typename
@@ -39,6 +41,7 @@ const withData = withQuery(gql`
   }
   ${FlaggedAccounts.fragments.root}
   ${FlaggedUser.fragments.root}
+  ${People.fragments.root}
   ${FlaggedUser.fragments.me}
 `, {
   options: {

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

@@ -34,7 +34,7 @@ class FlaggedAccountsContainer extends Component {
       },
       updateQuery: (previous, {fetchMoreResult:{users}}) => {
         const updated = update(previous, {
-          users: {
+          flaggedUsers: {
             nodes: {
               $apply: (nodes) => appendNewNodes(nodes, users.nodes),
             },
@@ -63,7 +63,7 @@ class FlaggedAccountsContainer extends Component {
         loadMore={this.loadMore}
         data={this.props.data}
         root={this.props.root}
-        users={this.props.root.users}
+        users={this.props.root.flaggedUsers}
         me={this.props.root.me}
       />
     );
@@ -80,7 +80,7 @@ FlaggedAccountsContainer.propTypes = {
 
 const LOAD_MORE_QUERY = gql`
   query TalkAdmin_LoadMoreFlaggedAccounts($limit: Int, $cursor: Cursor) {
-    users(query:{
+    flaggedUsers: users(query:{
         action_type: FLAG,
         state: {
           status: {
@@ -113,7 +113,7 @@ export default compose(
   withFragments({
     root: gql`
       fragment TalkAdminCommunity_FlaggedAccounts_root on RootQuery {
-        users(query:{
+        flaggedUsers: users(query:{
             action_type: FLAG,
             state: {
               status: {

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
+import {compose, gql} from 'react-apollo';
 import People from '../components/People';
 import PropTypes from 'prop-types';
-import {withUnBanUser, withBanUser, withSetUserRole} from 'coral-framework/graphql/mutations';
-
+import {withFragments} from 'plugin-api/beta/client/hocs';
+import {withUnBanUser, withUnSuspendUser, withSetUserRole} from 'coral-framework/graphql/mutations';
+import {showBanUserDialog} from 'actions/banUserDialog';
+import {showSuspendUserDialog} from 'actions/suspendUserDialog';
 import {viewUserDetail} from '../../../actions/userDetail';
 
 import {
@@ -62,18 +64,6 @@ class PeopleContainer extends React.Component {
     this.fetchUsers({page});
   }
 
-  setUserBanStatus = async (id, bannedStatus) => {
-    const {banUser, unBanUser} = this.props;
-
-    if (bannedStatus) {
-      await banUser({id, message: ''});
-    } else {
-      await unBanUser({id});
-    }
-
-    await this.fetchUsers();
-  } 
-
   setUserRole = async (id, role) => {
     await this.props.setUserRole(id, role);
     await this.fetchUsers();
@@ -87,10 +77,13 @@ class PeopleContainer extends React.Component {
       onHeaderClickHandler={this.onHeaderClickHandler}
       onPageChange={this.onPageChange}
       totalPages={this.props.community.totalPagesPeople}
-      setUserBanStatus={this.setUserBanStatus}
       setUserRole={this.setUserRole}
       page={this.props.community.pagePeople}
       viewUserDetail={this.props.viewUserDetail}
+      showSuspendUserDialog={this.props.showSuspendUserDialog}
+      showBanUserDialog={this.props.showBanUserDialog}
+      unBanUser={this.props.unBanUser}
+      unSuspendUser={this.props.unBanUser}
     />;
   }
 }
@@ -100,11 +93,13 @@ PeopleContainer.propTypes = {
   fetchUsers: PropTypes.func,
   updateSorting: PropTypes.func,
   setUserRole: PropTypes.func.isRequired,
-  banUser: PropTypes.func.isRequired,
   unBanUser: PropTypes.func.isRequired,
+  unSuspendUser: PropTypes.func.isRequired,
   setSearchValue: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   community: PropTypes.object,
+  showSuspendUserDialog: PropTypes.func,
+  showBanUserDialog: PropTypes.func,
 };
 
 const mapDispatchToProps = (dispatch) =>
@@ -115,11 +110,28 @@ const mapDispatchToProps = (dispatch) =>
     hideRejectUsernameDialog,
     viewUserDetail,
     setSearchValue,
+    showSuspendUserDialog,
+    showBanUserDialog,
   }, dispatch);
 
 export default compose(
   connect(null, mapDispatchToProps),
-  withBanUser,
-  withUnBanUser,
   withSetUserRole,
+  withUnBanUser,
+  withUnSuspendUser,
+  withFragments({
+    root: gql`
+      fragment TalkAdminCommunity_People_root on RootQuery {
+        users(query: {}){
+          hasNextPage
+          endCursor
+          nodes {
+            __typename
+            id
+          }
+        }
+      }
+
+    `,
+  }),
 )(PeopleContainer);

client/coral-admin/src/utils/index.js

@@ -11,4 +11,3 @@ export const isPremod = (mod) => mod === 'PRE';
 
 export const getModPath = (type = 'all', assetId) =>
   assetId ? `/admin/moderate/${type}/${assetId}` : `/admin/moderate/${type}`;
-

client/coral-framework/utils/user.js

@@ -1,3 +1,5 @@
+import get from 'lodash/get';
+
 /**
  * getReliability
  * retrieves reliability value as string
@@ -12,3 +14,22 @@ export const getReliability = (reliabilityValue) => {
     return 'unreliable';
   }
 };
+
+/**
+ * isSuspended
+ * retrieves boolean based on the user suspension status
+ */
+
+export const isSuspended = (user) => {
+  const suspensionUntil = get(user, 'state.status.suspension.until');
+  return user && suspensionUntil && new Date(suspensionUntil) > new Date();
+};
+   
+/**
+ * isBanned
+ * retrieves boolean based on the user ban status
+ */
+
+export const isBanned = (user) => {
+  return get(user, 'state.status.banned.status');
+};