WIP: commonize SeenUserList component

src/client/js/app.js

@@ -278,7 +278,6 @@ const componentMappings = {
   'search-page': <I18nextProvider i18n={i18n}><SearchPage crowi={crowi} crowiRenderer={crowiRenderer} /></I18nextProvider>,
 
   //'revision-history': <PageHistory pageId={pageId} />,
-  'seen-user-list': <SeenUserList pageId={pageId} crowi={crowi} />,
   'bookmark-button': <BookmarkButton pageId={pageId} crowi={crowi} />,
   'bookmark-button-lg': <BookmarkButton pageId={pageId} crowi={crowi} size="lg" />,
 
@@ -318,7 +317,17 @@ if (likeButtonElem) {
     <LikeButton crowi={crowi} pageId={pageId} isLiked={isLiked} />,
     likeButtonElem
   );
-  componentInstances.likeButtonElem = likeButtonElem;
+}
+
+// render SeenUserList
+const seenUserListElem = document.getElementById('seen-user-list');
+if (seenUserListElem) {
+  const seenUserIdsStr = seenUserListElem.dataset.seenUsers;
+  const seenUserIds = seenUserIdsStr.split(',');
+  ReactDOM.render(
+    <SeenUserList crowi={crowi} seenUserIds={seenUserIds} />,
+    seenUserListElem
+  );
 }
 
 // render SavePageControls

src/client/js/components/SeenUserList.js

@@ -14,7 +14,7 @@ export default class SeenUserList extends React.Component {
   }
 
   componentDidMount() {
-    const seenUserIds = this.getSeenUserIds();
+    const seenUserIds = this.props.seenUserIds;
 
     if (seenUserIds.length > 0) {
       // FIXME: user data cache
@@ -22,19 +22,6 @@ export default class SeenUserList extends React.Component {
     }
   }
 
-  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 (
       <div className="seen-user-list">
@@ -49,4 +36,8 @@ export default class SeenUserList extends React.Component {
 
 SeenUserList.propTypes = {
   crowi: PropTypes.object.isRequired,
+  seenUserIds: PropTypes.arrayOf(PropTypes.string),
+};
+SeenUserList.defaultProps = {
+  seenUserIds: [],
 };