add UpdateImageUrlCached in appcontainer

src/client/js/components/Admin/Users/UserTable.jsx

@@ -23,6 +23,10 @@ class UserTable extends React.Component {
     this.getUserStatusLabel = this.getUserStatusLabel.bind(this);
   }
 
+  async componentDidUpdate() {
+    this.props.appContainer.updateImageUrlCached();
+  }
+
   /**
    * return status label element by `userStatus`
    * @param {string} userStatus
@@ -86,7 +90,6 @@ class UserTable extends React.Component {
     const { t, adminUsersContainer } = this.props;
 
     const isCurrentSortOrderAsc = adminUsersContainer.state.sortOrder === 'asc';
-
     return (
       <Fragment>
         <table className="table table-default table-bordered table-user-list">

src/client/js/components/User/UserPicture.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 
 const DEFAULT_IMAGE = '/images/icons/user.svg';
 
 // TODO UserComponent?
-export default class UserPicture extends React.Component {
+class UserPicture extends React.Component {
 
   getClassName() {
     const className = ['img-circle', 'picture'];
@@ -36,7 +37,7 @@ export default class UserPicture extends React.Component {
     }
 
     if (!user.imageUrlCached) {
-      appContainer.addUserIdWillUpdateImageUrlCached(user.id);
+      appContainer.willUpdateImageUrlCacheUserIds.push(user._id);
       return this.renderForNull();
     }
 
@@ -67,3 +68,9 @@ UserPicture.propTypes = {
 UserPicture.defaultProps = {
   size: null,
 };
+
+const UserPictureWrapper = (props) => {
+  return createSubscribedElement(UserPicture, props, [AppContainer]);
+};
+
+export default UserPictureWrapper;

src/client/js/services/AppContainer.js

@@ -31,7 +31,6 @@ export default class AppContainer extends Container {
 
     this.state = {
       editorMode: null,
-      willUpdateImageUrlCacheUserIds: []
     };
 
     const body = document.querySelector('body');
@@ -40,7 +39,7 @@ export default class AppContainer extends Container {
     this.csrfToken = body.dataset.csrftoken;
     this.isPluginEnabled = body.dataset.pluginEnabled === 'true';
     this.isLoggedin = document.querySelector('.main-container.nologin') == null;
-
+    this.willUpdateImageUrlCacheUserIds = [];
     this.config = JSON.parse(document.getElementById('growi-context-hydrate').textContent || '{}');
 
     const currentUserElem = document.getElementById('growi-current-user');
@@ -160,14 +159,13 @@ export default class AppContainer extends Container {
     this.containerInstances[className] = instance;
   }
 
-  /**
-   * add user id that will be update imageUrlCached
-   * @param {id} userId added user id
-   */
-  addUserIdWillUpdateImageUrlCached(userId) {
-    const willUpdateImageUrlCacheUserIds = this.state.willUpdateImageUrlCacheUserIds;
-    willUpdateImageUrlCacheUserIds.push(userId);
-    this.setState({ willUpdateImageUrlCacheUserIds });
+  async updateImageUrlCached() {
+    if (this.willUpdateImageUrlCacheUserIds.length === 0) {
+      return;
+    }
+    const res = await this.apiv3Post('/user/update.imageUrlCache', { userIds: this.willUpdateImageUrlCacheUserIds });
+    console.log(res);
+    this.willUpdateImageUrlCacheUserIds = [];
   }
 
   /**