Cleanup Dangling

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

@@ -6,6 +6,7 @@ import t from 'coral-framework/services/i18n';
 import { username } from 'talk-plugin-flags/helpers/flagReasons';
 import ApproveButton from 'coral-admin/src/components/ApproveButton';
 import RejectButton from 'coral-admin/src/components/RejectButton';
+import { isFlaggedUserDangling } from '../utils';
 
 const shortReasons = {
   [username.other]: t('community.other'),
@@ -28,8 +29,7 @@ class User extends React.Component {
 
   render() {
     const { user, viewUserDetail, selected, className } = this.props;
-    const dangling =
-      ['APPROVED', 'REJECTED'].indexOf(user.state.status.username.status) >= 0;
+    const dangling = isFlaggedUserDangling(user);
 
     return (
       <li

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

@@ -11,8 +11,9 @@ import { viewUserDetail } from '../../../actions/userDetail';
 import { getDefinitionName } from 'coral-framework/utils';
 import { appendNewNodes } from 'plugin-api/beta/client/utils';
 import update from 'immutability-helper';
-import { handleFlaggedUserChange } from '../graphql';
+import { handleFlaggedUserChange, cleanUpDangling } from '../graphql';
 import { notify } from 'coral-framework/actions/notification';
+import { isFlaggedUserDangling } from '../utils';
 
 import FlaggedAccounts from '../components/FlaggedAccounts';
 import FlaggedUser from '../containers/FlaggedUser';
@@ -26,8 +27,7 @@ class FlaggedAccountsContainer extends Component {
 
   getCountWithoutDangling() {
     return this.props.root.flaggedUsers.nodes.filter(
-      node =>
-        !['APPROVED', 'REJECTED'].includes(node.state.status.username.status)
+      node => !isFlaggedUserDangling(node)
     ).length;
   }
 
@@ -50,7 +50,6 @@ class FlaggedAccountsContainer extends Component {
           prev,
           { subscriptionData: { data: { usernameApproved: user } } }
         ) => {
-          console.log(user);
           return handleFlaggedUserChange(prev, user, () => {
             this.props.notify('info', `user ${user.username} approved`);
           });
@@ -62,7 +61,6 @@ class FlaggedAccountsContainer extends Component {
           prev,
           { subscriptionData: { data: { usernameRejected: user } } }
         ) => {
-          console.log(user);
           return handleFlaggedUserChange(prev, user, () => {
             this.props.notify('info', `user ${user.username} rejected`);
           });
@@ -98,6 +96,15 @@ class FlaggedAccountsContainer extends Component {
 
   componentWillUnmount() {
     this.unsubscribe();
+    this.cleanUpDangling();
+  }
+
+  cleanUpDangling() {
+    if (!this.props.data.loading) {
+      this.props.data.updateQuery(query => {
+        return cleanUpDangling(query);
+      });
+    }
   }
 
   approveUser = ({ userId: id }) => {

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

@@ -1,4 +1,5 @@
 import update from 'immutability-helper';
+import { isFlaggedUserDangling } from './utils';
 
 function shouldAddFlaggedUser(root, user) {
   const isEmpty = !root.flaggedUsers.nodes.length;
@@ -48,6 +49,16 @@ function decrementFlaggedUserCount(root) {
   });
 }
 
+export function cleanUpDangling(root) {
+  return update(root, {
+    flaggedUsers: {
+      nodes: {
+        $apply: nodes => nodes.filter(node => !isFlaggedUserDangling(node)),
+      },
+    },
+  });
+}
+
 /**
  * Assimilate flagged user changes into current store.
  * @param  {Object}   root             current state of the store

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

@@ -0,0 +1,3 @@
+export function isFlaggedUserDangling(user) {
+  return ['APPROVED', 'REJECTED'].includes(user.state.status.username.status);
+}