Implement dangling

client/coral-admin/src/components/ApproveButton.css

@@ -16,12 +16,16 @@
   transform: scale(.8);
   margin: 0;
 
-  &:hover {
+  &:not(:disabled):hover {
    box-shadow: none;
    color: white;
    background-color: #519954;
    cursor: pointer;
   }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .active {

client/coral-admin/src/components/ApproveButton.js

@@ -7,7 +7,7 @@ import { Icon } from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const ApproveButton = ({ active, minimal, onClick, className }) => {
+const ApproveButton = ({ active, minimal, onClick, className, disabled }) => {
   const text = active ? t('modqueue.approved') : t('modqueue.approve');
   return (
     <button
@@ -17,6 +17,7 @@ const ApproveButton = ({ active, minimal, onClick, className }) => {
         className
       )}
       onClick={onClick}
+      disabled={disabled || active}
     >
       <Icon name={'done'} className={styles.icon} />
       {!minimal && text}
@@ -28,6 +29,7 @@ ApproveButton.propTypes = {
   className: PropTypes.string,
   active: PropTypes.bool,
   minimal: PropTypes.bool,
+  disabled: PropTypes.bool,
   onClick: PropTypes.func,
 };
 

client/coral-admin/src/components/RejectButton.css

@@ -16,12 +16,16 @@
   transform: scale(.8);
   margin: 0;
 
-  &:hover {
+  &:not(:disabled):hover {
    color: white;
    background-color: #D03235;
    box-shadow: none;
    cursor: pointer;
  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .active {

client/coral-admin/src/components/RejectButton.js

@@ -7,7 +7,7 @@ import { Icon } from 'coral-ui';
 
 import t from 'coral-framework/services/i18n';
 
-const RejectButton = ({ active, minimal, onClick, className }) => {
+const RejectButton = ({ active, minimal, onClick, className, disabled }) => {
   const text = active ? t('modqueue.rejected') : t('modqueue.reject');
   return (
     <button
@@ -17,6 +17,7 @@ const RejectButton = ({ active, minimal, onClick, className }) => {
         className
       )}
       onClick={onClick}
+      disabled={disabled || active}
     >
       <Icon name={'close'} className={styles.icon} />
       {!minimal && text}
@@ -29,6 +30,7 @@ RejectButton.propTypes = {
   active: PropTypes.bool,
   minimal: PropTypes.bool,
   onClick: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default RejectButton;

client/coral-admin/src/routes/Community/components/FlaggedUser.css

@@ -9,7 +9,7 @@
   min-width: 400px;
   margin: 0 auto;
   position: relative;
-  transition: box-shadow 200ms, margin-bottom 200ms;
+  transition: background 200ms, box-shadow 200ms, margin-bottom 200ms;
   padding: 10px 0 0;
   min-height: 220px;
 
@@ -18,6 +18,10 @@
   }
 }
 
+.dangling {
+  background-color: #efefef;
+}
+
 .rootSelected {
   composes: mdl-shadow--16dp from global;
 }

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

@@ -28,12 +28,15 @@ class User extends React.Component {
 
   render() {
     const { user, viewUserDetail, selected, className } = this.props;
+    const dangling =
+      ['APPROVED', 'REJECTED'].indexOf(user.state.status.username.status) >= 0;
 
     return (
       <li
         tabIndex={0}
         className={cn(className, styles.root, {
           [styles.rootSelected]: selected,
+          [styles.dangling]: dangling,
         })}
       >
         <div
@@ -112,11 +115,13 @@ class User extends React.Component {
                   className="talk-admin-flagged-user-approve-button"
                   active={user.state.status.username.status === 'APPROVED'}
                   onClick={this.approveUser}
+                  disabled={dangling}
                 />
                 <RejectButton
                   className="talk-admin-flagged-user-reject-button"
                   active={user.state.status.username.status === 'REJECTED'}
                   onClick={this.showRejectUsernameDialog}
+                  disabled={dangling}
                 />
               </div>
             </div>

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

@@ -24,6 +24,13 @@ class FlaggedAccountsContainer extends Component {
     super(props);
   }
 
+  getCountWithoutDangling() {
+    return this.props.root.flaggedUsers.nodes.filter(
+      node =>
+        !['APPROVED', 'REJECTED'].includes(node.state.status.username.status)
+    ).length;
+  }
+
   subscribeToUpdates() {
     const parameters = [
       {
@@ -142,8 +149,7 @@ class FlaggedAccountsContainer extends Component {
         root={this.props.root}
         users={this.props.root.flaggedUsers}
         hasMore={
-          this.props.root.flaggedUsers.nodes.length <
-          this.props.root.flaggedUsernamesCount
+          this.getCountWithoutDangling() < this.props.root.flaggedUsernamesCount
         }
         me={this.props.root.me}
       />

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

@@ -42,6 +42,12 @@ function incrementFlaggedUserCount(root) {
   });
 }
 
+function decrementFlaggedUserCount(root) {
+  return update(root, {
+    flaggedUsernamesCount: { $apply: count => count - 1 },
+  });
+}
+
 /**
  * Assimilate flagged user changes into current store.
  * @param  {Object}   root             current state of the store
@@ -84,7 +90,7 @@ export function handleFlaggedUserChange(root, user, notify) {
       case 'APPROVED':
       case 'REJECTED':
         notify();
-        return applyUserChanges(root, user);
+        return applyUserChanges(decrementFlaggedUserCount(root), user);
       default:
     }
   }