show seen user count

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

@@ -14,7 +14,7 @@ class SeenUserList extends React.Component {
     return (
       <div className="user-list-content text-truncate text-muted text-right">
         <span className="text-danger">
-          <span className="seen-user-count">{pageContainer.state.sumOfSeenUsers}</span>
+          <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>
           <i className="fa fa-fw fa-paw"></i>
         </span>
         <span className="mr-1">

src/client/js/services/PageContainer.js

@@ -51,7 +51,7 @@ export default class PageContainer extends Container {
       isLiked: JSON.parse(mainContent.getAttribute('data-page-is-liked')),
       seenUsers: [],
       likerUsers: [],
-      sumOfSeenUsers: 0,
+      countOfSeenUsers: mainContent.getAttribute('data-page-count-of-seen-users'),
       sumOfLikers: 0,
       createdAt: mainContent.getAttribute('data-page-created-at'),
       creator: JSON.parse(mainContent.getAttribute('data-page-creator')),
@@ -129,8 +129,7 @@ export default class PageContainer extends Container {
 
     const seenUserListElem = document.getElementById('seen-user-list');
     if (seenUserListElem != null) {
-      const { userIdsStr, sumOfSeenUsers } = seenUserListElem.dataset;
-      this.setState({ sumOfSeenUsers });
+      const { userIdsStr } = seenUserListElem.dataset;
 
       if (userIdsStr === '') {
         return;

src/server/views/widget/page_content.html

@@ -24,6 +24,8 @@
   data-page-updated-at="{% if page %}{{ page.updatedAt|datetz('Y/m/d H:i:s') }}{% endif %}"
   data-page-has-children="{% if pages.length > 0 %}true{% else %}false{% endif %}"
   data-page-user="{% if pageUser %}{{ pageUser|json }}{% else %}null{% endif %}"
+  data-page-ids-of-seen-users="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
+  data-page-count-of-seen-users="{{ page.seenUsers.length|default(0) }}"
   >
 {% else %}
 <div id="content-main" class="content-main"