move elements

src/client/js/app.jsx

@@ -27,8 +27,8 @@ import PageAttachment from './components/PageAttachment';
 import PageStatusAlert from './components/PageStatusAlert';
 import RecentCreated from './components/RecentCreated/RecentCreated';
 import MyDraftList from './components/MyDraftList/MyDraftList';
-import SeenUserPictureList from './components/User/SeenUserPictureList';
-import LikerPictureList from './components/User/LikerPictureList';
+import SeenUserList from './components/User/SeenUserList';
+import LikerList from './components/User/LikerList';
 import TableOfContents from './components/TableOfContents';
 
 import PersonalSettings from './components/Me/PersonalSettings';
@@ -93,8 +93,8 @@ if (pageContainer.state.pageId != null) {
     'page-management': <PageManagement />,
 
     'revision-toc': <TableOfContents />,
-    'seen-user-list': <SeenUserPictureList />,
-    'liker-list': <LikerPictureList />,
+    'seen-user-list': <SeenUserList />,
+    'liker-list': <LikerList />,
 
     'user-created-list': <RecentCreated />,
     'user-draft-list': <MyDraftList />,

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPictureList from './UserPictureList';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+
+import PageContainer from '../../services/PageContainer';
+
+class LikerList extends React.Component {
+
+  render() {
+    const { pageContainer } = this.props;
+    return (
+      // <div className="text-truncate text-muted text-right" style="direction: rtl;">
+      <div className="text-truncate text-muted text-right">
+        <span className="text-info">
+          <span className="liker-user-count">{pageContainer.state.sumOfLikers}</span>
+          <i className="icon-fw icon-like"></i>
+        </span>
+        <UserPictureList users={pageContainer.state.likerUsers} />
+      </div>
+    );
+  }
+
+}
+
+LikerList.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const LikerPictureListWrapper = (props) => {
+  return createSubscribedElement(LikerList, props, [PageContainer]);
+};
+
+export default (LikerPictureListWrapper);

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

@@ -1,32 +0,0 @@
-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/SeenUserList.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPictureList from './UserPictureList';
+
+import { createSubscribedElement } from '../UnstatedUtils';
+
+import PageContainer from '../../services/PageContainer';
+
+class SeenUserList extends React.Component {
+
+  render() {
+    const { pageContainer } = this.props;
+    return (
+      // <div className="text-truncate text-muted text-right" style="direction: rtl;">
+      <div className="text-truncate text-muted text-right">
+        <span className="text-danger">
+          <span className="seen-user-count">{pageContainer.state.sumOfSeenUsers}</span>
+          <i className="fa fa-fw fa-paw"></i>
+        </span>
+        <UserPictureList users={pageContainer.state.seenUsers} />
+      </div>
+    );
+  }
+
+}
+
+SeenUserList.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SeenUserPictureListWrapper = (props) => {
+  return createSubscribedElement(SeenUserList, props, [PageContainer]);
+};
+
+export default (SeenUserPictureListWrapper);

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

@@ -1,32 +0,0 @@
-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/services/PageContainer.js

@@ -45,6 +45,8 @@ export default class PageContainer extends Container {
       isLiked: JSON.parse(mainContent.getAttribute('data-page-is-liked')),
       seenUsers: [],
       likerUsers: [],
+      sumOfSeenUsers: 0,
+      sumOfLikers: 0,
       createdAt: mainContent.getAttribute('data-page-created-at'),
       creator: JSON.parse(mainContent.getAttribute('data-page-creator')),
       updatedAt: mainContent.getAttribute('data-page-updated-at'),
@@ -130,13 +132,13 @@ export default class PageContainer extends Container {
 
     const seenUserListElem = document.getElementById('seen-user-list');
     if (seenUserListElem != null) {
-      const userIdsStr = seenUserListElem.dataset.userIds;
+      const { userIdsStr, sumOfSeenUers } = seenUserListElem.dataset;
       if (userIdsStr === '') {
         return;
       }
 
       const { users } = await this.appContainer.apiGet('/users.list', { user_ids: userIdsStr });
-      this.setState({ seenUsers: users });
+      this.setState({ seenUsers: users, sumOfSeenUers: 11 });
 
       await this.updateImageUrlCached(users);
     }
@@ -144,13 +146,14 @@ export default class PageContainer extends Container {
 
     const likerListElem = document.getElementById('liker-list');
     if (likerListElem != null) {
-      const userIdsStr = likerListElem.dataset.userIds;
+      const { userIdsStr, sumOfLikers } = likerListElem.dataset;
+
       if (userIdsStr === '') {
         return;
       }
 
       const { users } = await this.appContainer.apiGet('/users.list', { user_ids: userIdsStr });
-      this.setState({ likerUsers: users });
+      this.setState({ likerUsers: users, sumOfLikers: 11 });
 
       await this.updateImageUrlCached(users);
     }

src/server/views/layout-growi/widget/liker-and-seenusers.html

@@ -1,14 +1,12 @@
 <div class="liker-and-seenusers">
-  <div class="text-truncate text-muted text-right" style="direction: rtl;">
-    <span class="text-info">
-      <span class="liker-user-count">{{ page.liker.length|default(0) }}</span><i class="icon-fw icon-like"></i>
-    </span>
-    <span id="liker-list" class="mr-1" data-user-ids="{{ page.liker|slice(-15)|default([])|reverse|join(',') }}"></span>
-  </div>
-  <div class="text-truncate text-muted text-right" style="direction: rtl;">
-    <span class="text-danger">
-      <span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span><i class="fa fa-fw fa-paw"></i>
-    </span>
-    <span id="seen-user-list" class="mr-1" data-user-ids="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"></span>
-  </div>
+  <div
+    id="liker-list"
+    data-user-ids-str="{{ page.likers|slice(-15)|default([])|reverse|join(',') }}"
+    data-sum-of-likers="{{ page.likers }}"
+  ></div>
+  <div
+    id="seen-users-list"
+    data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
+    data-sum-of-seen-users="{{ page.seenUsers }}"
+  ></div>
 </div>