From f282aa47c98293b0e8367adce7fd38f2172cc8a1 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 17 Jan 2018 17:31:48 +0100
Subject: [PATCH] Implement dangling

---
 client/coral-admin/src/components/ApproveButton.css    |  6 +++++-
 client/coral-admin/src/components/ApproveButton.js     |  4 +++-
 client/coral-admin/src/components/RejectButton.css     |  6 +++++-
 client/coral-admin/src/components/RejectButton.js      |  4 +++-
 .../src/routes/Community/components/FlaggedUser.css    |  6 +++++-
 .../src/routes/Community/components/FlaggedUser.js     |  5 +++++
 .../src/routes/Community/containers/FlaggedAccounts.js | 10 ++++++++--
 client/coral-admin/src/routes/Community/graphql.js     |  8 +++++++-
 8 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/components/ApproveButton.css b/client/coral-admin/src/components/ApproveButton.css
index 4c42cc233..071be2fcb 100644
--- a/client/coral-admin/src/components/ApproveButton.css
+++ b/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 {
diff --git a/client/coral-admin/src/components/ApproveButton.js b/client/coral-admin/src/components/ApproveButton.js
index 97a674221..884ac3da5 100644
--- a/client/coral-admin/src/components/ApproveButton.js
+++ b/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,
 };
 
diff --git a/client/coral-admin/src/components/RejectButton.css b/client/coral-admin/src/components/RejectButton.css
index a06cf5f43..3885ebf9d 100644
--- a/client/coral-admin/src/components/RejectButton.css
+++ b/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 {
diff --git a/client/coral-admin/src/components/RejectButton.js b/client/coral-admin/src/components/RejectButton.js
index 4916358a2..69e1047e6 100644
--- a/client/coral-admin/src/components/RejectButton.js
+++ b/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;
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.css b/client/coral-admin/src/routes/Community/components/FlaggedUser.css
index aaaaee3a3..75a91ce29 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.css
+++ b/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;
 }
diff --git a/client/coral-admin/src/routes/Community/components/FlaggedUser.js b/client/coral-admin/src/routes/Community/components/FlaggedUser.js
index 4a892ea1f..826c17e37 100644
--- a/client/coral-admin/src/routes/Community/components/FlaggedUser.js
+++ b/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>
diff --git a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js b/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
index a7541f6a4..0df044a96 100644
--- a/client/coral-admin/src/routes/Community/containers/FlaggedAccounts.js
+++ b/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}
       />
diff --git a/client/coral-admin/src/routes/Community/graphql.js b/client/coral-admin/src/routes/Community/graphql.js
index c87a88263..a1dfcee03 100644
--- a/client/coral-admin/src/routes/Community/graphql.js
+++ b/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:
     }
   }