wrap UserPictureLists

src/client/js/app.jsx

@@ -28,7 +28,8 @@ import LikeButton from './components/LikeButton';
 import PagePathAutoComplete from './components/PagePathAutoComplete';
 import RecentCreated from './components/RecentCreated/RecentCreated';
 import MyDraftList from './components/MyDraftList/MyDraftList';
-import UserPictureList from './components/User/UserPictureList';
+import SeenUserPictureList from './components/User/SeenUserPictureList';
+import LikerPictureList from './components/User/LikerPictureList';
 import TableOfContents from './components/TableOfContents';
 
 import PersonalSettings from './components/Me/PersonalSettings';
@@ -89,8 +90,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 users={pageContainer.state.seenUsers} />,
-    'liker-list': <UserPictureList users={pageContainer.state.likerUsers} />,
+    'seen-user-list': <SeenUserPictureList />,
+    'liker-list': <LikerPictureList />,
     '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/LikerPictureList.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPictureList from './UserPictureList';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+
+import PageContainer from '../../services/PageContainer';
+
+class LikerPictureList extends React.Component {
+
+  render() {
+    const { pageContainer } = this.props;
+    return (
+      <UserPictureList users={pageContainer.state.likerUsers} />
+    );
+  }
+
+}
+
+LikerPictureList.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const LikerPictureListWrapper = (props) => {
+  return createSubscribedElement(LikerPictureList, props, [PageContainer]);
+};
+
+export default (LikerPictureListWrapper);

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPictureList from './UserPictureList';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+
+import PageContainer from '../../services/PageContainer';
+
+class SeenUserPictureList extends React.Component {
+
+  render() {
+    const { pageContainer } = this.props;
+    return (
+      <UserPictureList users={pageContainer.state.seenUsers} />
+    );
+  }
+
+}
+
+SeenUserPictureList.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SeenUserPictureListWrapper = (props) => {
+  return createSubscribedElement(SeenUserPictureList, props, [PageContainer]);
+};
+
+export default (SeenUserPictureListWrapper);

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

@@ -8,19 +8,8 @@ import UserPicture from './UserPicture';
 
 export default class UserPictureList extends React.Component {
 
-  constructor(props) {
-    super(props);
-
-    const users = this.props.users;
-
-    this.state = {
-      users,
-    };
-
-  }
-
   render() {
-    const users = this.state.users.map((user) => {
+    const users = this.props.users.map((user) => {
       // create Tooltip
       const tooltip = <Tooltip id={`tooltip-${user._id}`}>@{user.username}<br />{user.name}</Tooltip>;