Merge pull request #157 from okonomi/react-seen-user-list

Change seen user list to React component

lib/views/widget/page_side_header.html

@@ -44,11 +44,7 @@
 
       <dt><i class="fa fa-paw"></i> 見た人</dt>
       <dd>
-        <p class="seen-user-count">
-          {{ page.seenUsers.length }}
-        </p>
-        <p id="seen-user-list" class="seen-user-list" data-seen-users="{{ page.seenUsers|default([])|join(',') }}">
-        </p>
+        <div id="seen-user-list" data-seen-users="{{ page.seenUsers|default([])|join(',') }}"></div>
       </dd>
     </dl>
   </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': <SeenUserList />,
 };
 
 Object.keys(componentMappings).forEach((key) => {

resource/js/components/SeenUserList.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import UserList from './SeenUserList/UserList';
+
+export default class SeenUserList extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.crowi = window.crowi; // FIXME
+
+    this.state = {
+      seenUsers: [],
+    };
+  }
+
+  componentDidMount() {
+    const seenUserIds = this.getSeenUserIds();
+    if (seenUserIds.length > 0) {
+      // FIXME: user data cache
+      this.crowi.apiGet('/users.list', {user_ids: seenUserIds.join(',')})
+      .then(res => {
+        this.setState({seenUsers: res.users});
+      }).catch(err => {
+        // do nothing
+      });
+    }
+  }
+
+  getSeenUserIds() {
+    // FIXME: Consider another way to bind values.
+    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/SeenUserList/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 key={user._id} data-user-id={user._id} href={'/user/' + user.username} title={user.name}>
+          <UserPicture user={user} size="xs" />
+        </a>
+      );
+    });
+
+    return (
+      <p className="seen-user-list">
+        {users}
+      </p>
+    );
+  }
+}
+
+UserList.propTypes = {
+  users: React.PropTypes.array,
+};
+
+UserList.defaultProps = {
+  users: [],
+};

resource/js/components/User/UserPicture.js

@@ -13,6 +13,15 @@ export default class UserPicture extends React.Component {
     }
   }
 
+  getClassName() {
+    let className = ['picture', 'picture-rounded'];
+    if (this.props.size) {
+      className.push('picture-' + this.props.size);
+    }
+
+    return className.join(' ');
+  }
+
   render() {
     const user = this.props.user;
 
@@ -20,7 +29,7 @@ export default class UserPicture extends React.Component {
       <img
         src={this.getUserPicture(user)}
         alt={user.username}
-        className="picture picture-rounded"
+        className={this.getClassName()}
         />
     );
   }
@@ -28,8 +37,10 @@ export default class UserPicture extends React.Component {
 
 UserPicture.propTypes = {
   user: React.PropTypes.object.isRequired,
+  size: React.PropTypes.string,
 };
 
 UserPicture.defaultProps = {
   user: {},
+  size: null,
 };

resource/js/crowi.js

@@ -685,21 +685,6 @@ $(function() {
       });
     }
 
-    var $seenUserList = $("#seen-user-list");
-    if ($seenUserList && $seenUserList.length > 0) {
-      var seenUsers = $seenUserList.data('seen-users');
-      var seenUsersArray = seenUsers.split(',');
-      if (seenUsers && seenUsersArray.length > 0 && seenUsersArray.length <= 10) {
-        // FIXME: user data cache
-        $.get('/_api/users.list', {user_ids: seenUsers}, function(res) {
-          // ignore unless response has error
-          if (res.ok) {
-            AddToSeenUser(res.users);
-          }
-        });
-      }
-    }
-
     function CreateUserLinkWithPicture (user) {
       var $userHtml = $('<a>');
       $userHtml.data('user-id', user._id);
@@ -714,12 +699,6 @@ $(function() {
       return $userHtml;
     }
 
-    function AddToSeenUser (users) {
-      $.each(users, function(i, user) {
-        $seenUserList.append(CreateUserLinkWithPicture(user));
-      });
-    }
-
     // History Diff
     var allRevisionIds = [];
     $.each($('.diff-view'), function() {