send user instances to DOM of seen users list and liker users list

src/client/js/app.jsx

@@ -89,8 +89,8 @@ if (pageContainer.state.pageId != null) {
     'page-comment-write': <CommentEditorLazyRenderer />,
     'revision-toc': <TableOfContents />,
     'like-button': <LikeButton pageId={pageContainer.state.pageId} isLiked={pageContainer.state.isLiked} />,
-    'seen-user-list': <UserPictureList userIds={pageContainer.state.seenUserIds} />,
-    'liker-list': <UserPictureList userIds={pageContainer.state.likerUserIds} />,
+    'seen-user-list': <UserPictureList users={pageContainer.state.seenUsers} />,
+    'liker-list': <UserPictureList users={pageContainer.state.likerUsers} />,
     'bookmark-button': <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} />,
     'bookmark-button-lg': <BookmarkButton pageId={pageContainer.state.pageId} crowi={appContainer} size="lg" />,
     'rename-page-name-input': <PagePathAutoComplete crowi={appContainer} initializedPath={pageContainer.state.path} />,

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

@@ -4,22 +4,14 @@ import PropTypes from 'prop-types';
 import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
 import Tooltip from 'react-bootstrap/es/Tooltip';
 
-import { createSubscribedElement } from '../UnstatedUtils';
-import AppContainer from '../../services/AppContainer';
-
 import UserPicture from './UserPicture';
 
-class UserPictureList extends React.Component {
+export default class UserPictureList extends React.Component {
 
   constructor(props) {
     super(props);
 
-    const userIds = this.props.userIds;
-
-    const users = this.props.users.concat(
-      // FIXME: user data cache
-      this.props.appContainer.findUserByIds(userIds),
-    );
+    const users = this.props.users;
 
     this.state = {
       users,
@@ -50,23 +42,10 @@ class UserPictureList extends React.Component {
 
 }
 
-/**
- * Wrapper component for using unstated
- */
-const UserPictureListWrapper = (props) => {
-  return createSubscribedElement(UserPictureList, props, [AppContainer]);
-};
-
 UserPictureList.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  userIds: PropTypes.arrayOf(PropTypes.string),
   users: PropTypes.arrayOf(PropTypes.object),
 };
 
 UserPictureList.defaultProps = {
-  userIds: [],
   users: [],
 };
-
-export default UserPictureListWrapper;

src/client/js/services/PageContainer.js

@@ -38,8 +38,8 @@ export default class PageContainer extends Container {
       path: mainContent.getAttribute('data-path'),
       tocHtml: '',
       isLiked: false,
-      seenUserIds: [],
-      likerUserIds: [],
+      seenUsers: [],
+      likerUsers: [],
 
       tags: [],
       templateTagData: mainContent.getAttribute('data-template-tags') || null,
@@ -94,14 +94,13 @@ export default class PageContainer extends Container {
     // [TODO][GW - 1942] add method for updating imageUrlCached and populate
     if (seenUserListElem != null) {
       const userIdsStr = seenUserListElem.dataset.userIds;
-      this.state.seenUserIds = userIdsStr.split(',');
-      const res = await this.appContainer.apiGet('/users.list', { user_ids: userIdsStr });
-      const users = res.users;
+      const { users } = await this.appContainer.apiGet('/users.list', { user_ids: userIdsStr });
+      this.setState({ seenUsers: users });
       const noImageCacheUsers = users.filter((user) => { return !user.imageUrlCached });
       if (noImageCacheUsers.length > 0) {
         const noImageCacheUserIds = noImageCacheUsers.map((user) => { return user.id });
-        const usersUpdatedImageUrlCached = await this.appContainer.apiv3Put('/users/update.imageUrlCache', { userIds: noImageCacheUserIds });
-        this.state.seenUserIds = usersUpdatedImageUrlCached;
+        const res = await this.appContainer.apiv3Put('/users/update.imageUrlCache', { userIds: noImageCacheUserIds });
+        this.setState({ seenUsers: res.data.updetedUsers });
       }
     }
 
@@ -109,7 +108,8 @@ export default class PageContainer extends Container {
     const likerListElem = document.getElementById('liker-list');
     if (likerListElem != null) {
       const userIdsStr = likerListElem.dataset.userIds;
-      this.state.likerUserIds = userIdsStr.split(',');
+      const { users } = await this.appContainer.apiGet('/users.list', { user_ids: userIdsStr });
+      this.setState({ likerUsers: users });
     }
   }
 

src/server/routes/apiv3/users.js

@@ -585,12 +585,14 @@ module.exports = (crowi) => {
         };
       }));
 
+      let updetedUsers = [];
       if (requests.length > 0) {
         await User.bulkWrite(requests);
+        updetedUsers = await User.find({ _id: { $in: userIds } }, User.USER_PUBLIC_FIELDS);
       }
 
       // GW-1942 TODO return updated users
-      return res.apiv3({ users });
+      return res.apiv3({ updetedUsers });
     }
     catch (err) {
       logger.error('Error', err);