Remove the need for querying all assets

client/coral-admin/src/routes/Moderation/components/Moderation.js

@@ -11,6 +11,7 @@ import NotFoundAsset from './NotFoundAsset';
 import ModerationKeysModal from '../../../components/ModerationKeysModal';
 import UserDetail from '../containers/UserDetail';
 import StorySearch from '../containers/StorySearch';
+import {Spinner} from 'coral-ui';
 
 export default class Moderation extends Component {
   state = {
@@ -102,18 +103,20 @@ export default class Moderation extends Component {
   }
 
   render () {
-    const {root, moderation, settings, assets, viewUserDetail, hideUserDetail, ...props} = this.props;
+    const {root, moderation, settings, viewUserDetail, hideUserDetail, ...props} = this.props;
     const providedAssetId = this.props.params.id;
     const activeTab = this.props.route.path === ':id' ? 'premod' : this.props.route.path;
+    const {asset} = root;
 
-    let asset;
+    if (providedAssetId && !asset) {
+      if (asset === undefined) {
 
-    if (providedAssetId) {
-      asset = assets.find((asset) => asset.id === this.props.params.id);
-
-      if (!asset) {
-        return <NotFoundAsset assetId={providedAssetId} />;
+        // Still loading.
+        return <Spinner />;
       }
+
+      // Not found.
+      return <NotFoundAsset assetId={providedAssetId} />;
     }
 
     const comments = root[activeTab];

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

@@ -2,7 +2,6 @@ import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {compose, gql} from 'react-apollo';
-import isEqual from 'lodash/isEqual';
 import withQuery from 'coral-framework/hocs/withQuery';
 import {getDefinitionName} from 'coral-framework/utils';
 import * as notification from 'coral-admin/src/services/notification';
@@ -12,7 +11,6 @@ import update from 'immutability-helper';
 import {withSetUserStatus, withSuspendUser, withSetCommentStatus} from 'coral-framework/graphql/mutations';
 
 import {fetchSettings} from 'actions/settings';
-import {updateAssets} from 'actions/assets';
 import {
   toggleModal,
   singleView,
@@ -39,13 +37,6 @@ class ModerationContainer extends Component {
     this.props.fetchSettings();
   }
 
-  componentWillReceiveProps(nextProps) {
-    const {updateAssets} = this.props;
-    if(!isEqual(nextProps.root.assets, this.props.root.assets)) {
-      updateAssets(nextProps.root.assets);
-    }
-  }
-
   suspendUser = async (args) => {
     this.props.hideSuspendUserDialog();
     try {
@@ -175,7 +166,7 @@ const commentConnectionFragment = gql`
 `;
 
 const withModQueueQuery = withQuery(gql`
-  query CoralAdmin_Moderation($asset_id: ID, $sort: SORT_ORDER) {
+  query CoralAdmin_Moderation($asset_id: ID, $sort: SORT_ORDER, $allAssets: Boolean!) {
     all: comments(query: {
       statuses: [NONE, PREMOD, ACCEPTED, REJECTED],
       asset_id: $asset_id,
@@ -212,7 +203,7 @@ const withModQueueQuery = withQuery(gql`
     }) {
       ...CoralAdmin_Moderation_CommentConnection
     }
-    assets {
+    asset(id: $asset_id) @skip(if: $allAssets) {
       id
       title
       url
@@ -248,6 +239,7 @@ const withModQueueQuery = withQuery(gql`
       variables: {
         asset_id: id,
         sort: sortOrder,
+        allAssets: id === null
       }
     };
   },
@@ -291,14 +283,12 @@ const mapStateToProps = (state) => ({
   moderation: state.moderation.toJS(),
   settings: state.settings.toJS(),
   auth: state.auth.toJS(),
-  assets: state.assets.get('assets')
 });
 
 const mapDispatchToProps = (dispatch) => ({
   ...bindActionCreators({
     toggleModal,
     singleView,
-    updateAssets,
     fetchSettings,
     showBanUserDialog,
     hideBanUserDialog,