Add SeenUserList and UserList components

lib/views/widget/page_side_header.html

@@ -50,6 +50,11 @@
         <p id="seen-user-list" class="seen-user-list" data-seen-users="{{ page.seenUsers|default([])|join(',') }}">
         </p>
       </dd>
+
+      <dt><i class="fa fa-paw"></i> 見た人</dt>
+      <dd>
+        <div id="seen-user-list-react" data-seen-users="{{ page.seenUsers|default([])|join(',') }}"></div>
+      </dd>
     </dl>
   </div>
 </div>

resource/js/app.js

@@ -8,6 +8,7 @@ import HeaderSearchBox  from './components/HeaderSearchBox';
 import SearchPage  from './components/SearchPage';
 import PageListSearch  from './components/PageListSearch';
 //import PageComment  from './components/PageComment';
+import SeenUserList from './components/SeenUserList';
 
 if (!window) {
   window = {};
@@ -25,6 +26,7 @@ const componentMappings = {
   'search-page': <SearchPage />,
   'page-list-search': <PageListSearch />,
   //'page-comment': <PageComment />,
+  'seen-user-list-react': <SeenUserList />,
 };
 
 Object.keys(componentMappings).forEach((key) => {

resource/js/components/SeenUserList.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import UserList from './UserList';
+import $ from 'jquery';
+
+export default class SeenUserList extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      seenUsers: [],
+    };
+  }
+
+  componentDidMount() {
+    const seenUserIds = this.getSeenUserIds();
+    if (seenUserIds.length > 0) {
+      // FIXME: user data cache
+      $.get('/_api/users.list', {user_ids: seenUserIds.join(',')}, function(res) {
+        // ignore unless response has error
+        if (res.ok) {
+          this.setState({seenUsers: res.users});
+        }
+      }.bind(this));
+    }
+  }
+
+  getSeenUserIds() {
+    const $seenUserList = $("#seen-user-list");
+    if ($seenUserList.length > 0) {
+      const seenUsers = $seenUserList.data('seen-users');
+      if (seenUsers) {
+        return seenUsers.split(',');
+      }
+    }
+
+    return [];
+  }
+
+  render() {
+    return (
+      <p className="seen-user-list">
+        <p className="seen-user-count">
+          {this.state.seenUsers.length}
+        </p>
+        <UserList users={this.state.seenUsers} />
+      </p>
+    );
+  }
+}

resource/js/components/UserList.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import UserPicture from './User/UserPicture';
+
+export default class UserList extends React.Component {
+
+  render() {
+    const users = this.props.users.map((user) => {
+      return (
+        <a data-user-id={user._id} href={'/user/' + user.username} title={user.name}>
+          <UserPicture user={user} />
+        </a>
+      );
+    });
+
+    return (
+      <p className="seen-user-list">
+        {users}
+      </p>
+    );
+  }
+}
+
+UserList.propTypes = {
+  users: React.PropTypes.array,
+};
+
+UserList.defaultProps = {
+  users: [],
+};