commonize UserPictureList component

src/client/js/app.js

@@ -31,7 +31,7 @@ import BookmarkButton   from './components/BookmarkButton';
 import LikeButton       from './components/LikeButton';
 import PagePathAutoComplete from './components/PagePathAutoComplete';
 import RecentCreated from './components/RecentCreated/RecentCreated';
-import UserCountAndList from './components/UserCountAndList';
+import UserPictureList  from './components/Common/UserPictureList';
 
 import CustomCssEditor  from './components/Admin/CustomCssEditor';
 import CustomScriptEditor from './components/Admin/CustomScriptEditor';
@@ -319,23 +319,23 @@ if (likeButtonElem) {
   );
 }
 
-// render UserCountAndList for seen-user-list
+// render UserPictureList for seen-user-list
 const seenUserListElem = document.getElementById('seen-user-list');
 if (seenUserListElem) {
   const userIdsStr = seenUserListElem.dataset.userIds;
   const userIds = userIdsStr.split(',');
   ReactDOM.render(
-    <UserCountAndList crowi={crowi} userIds={userIds} />,
+    <UserPictureList crowi={crowi} userIds={userIds} />,
     seenUserListElem
   );
 }
-// render UserCountAndList for liker-list
+// render UserPictureList for liker-list
 const likerListElem = document.getElementById('liker-list');
 if (likerListElem) {
   const userIdsStr = likerListElem.dataset.userIds;
   const userIds = userIdsStr.split(',');
   ReactDOM.render(
-    <UserCountAndList crowi={crowi} userIds={userIds} />,
+    <UserPictureList crowi={crowi} userIds={userIds} />,
     likerListElem
   );
 }

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

@@ -5,8 +5,24 @@ import UserPicture from '../User/UserPicture';
 
 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.crowi.findUserByIds(userIds)
+    );
+
+    this.state = {
+      users: users,
+    };
+
+  }
+
   render() {
-    const users = this.props.users.map((user) => {
+    const users = this.state.users.map(user => {
       return (
         <a key={user._id} data-user-id={user._id} href={'/user/' + user.username} title={user.name}>
           <UserPicture user={user} size="xs" />
@@ -15,7 +31,7 @@ export default class UserPictureList extends React.Component {
     });
 
     return (
-      <p className="seen-user-list">
+      <p>
         {users}
       </p>
     );
@@ -23,9 +39,12 @@ export default class UserPictureList extends React.Component {
 }
 
 UserPictureList.propTypes = {
-  users: PropTypes.array,
+  crowi: PropTypes.object.isRequired,
+  userIds: PropTypes.arrayOf(PropTypes.string),
+  users: PropTypes.arrayOf(PropTypes.object),
 };
 
 UserPictureList.defaultProps = {
+  userIds: [],
   users: [],
 };

src/client/js/components/UserCountAndList.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import UserPictureList from './Common/UserPictureList';
-
-export default class UserCountAndList extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      users: [],
-    };
-  }
-
-  componentDidMount() {
-    const userIds = this.props.userIds;
-
-    if (userIds.length > 0) {
-      // FIXME: user data cache
-      this.setState({users: this.props.crowi.findUserByIds(userIds)});
-    }
-  }
-
-  render() {
-    return (
-      <div className="user-list">
-        <p className="user-count">
-          {this.state.users.length}
-        </p>
-        <UserPictureList users={this.state.users} />
-      </div>
-    );
-  }
-}
-
-UserCountAndList.propTypes = {
-  crowi: PropTypes.object.isRequired,
-  userIds: PropTypes.arrayOf(PropTypes.string),
-};
-UserCountAndList.defaultProps = {
-  userIds: [],
-};

src/client/styles/scss/_layout_crowi_sidebar.scss

@@ -56,12 +56,10 @@
       }
     }
 
-    #liker-list, #seen-user-list {
-      .user-count {
-        font-size: 1.2em;
-        font-weight: bold;
-        margin-bottom: 5px;
-      }
+    .liker-user-count, .seen-user-count {
+      font-size: 1.2em;
+      font-weight: bold;
+      margin-bottom: 5px;
     }
   }
 

src/server/views/layout-crowi/widget/page_side_header.html

@@ -24,11 +24,13 @@
         <i class="icon-like"></i> {{ t('Like!') }}
       </dt>
       <dd>
+        <p class="liker-user-count">{{ page.liker.length|default(0) }}</p>
         <div id="liker-list" data-user-ids="{{ page.liker|default([])|join(',') }}"></div>
       </dd>
 
       <dt><i class="fa fa-paw"></i> {{ t('Seen by') }}</dt>
       <dd>
+          <p class="seen-user-count">{{ page.seenUsers.length|default(0) }}</p>
         <div id="seen-user-list" data-user-ids="{{ page.seenUsers|default([])|join(',') }}"></div>
       </dd>
     </dl>