Merge pull request #2362 from weseek/imprv/refactor-seen-and-liker-users

Imprv/refactor seen and liker users

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,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPictureList from './UserPictureList';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import PageContainer from '../../services/PageContainer';
+
+class LikerList extends React.Component {
+
+  render() {
+    const { pageContainer } = this.props;
+    return (
+      <div className="user-list-content 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>
+        <span className="mr-1">
+          <UserPictureList users={pageContainer.state.likerUsers} />
+        </span>
+      </div>
+    );
+  }
+
+}
+
+LikerList.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const LikerListWrapper = withUnstatedContainers(LikerList, [PageContainer]);
+
+export default (LikerListWrapper);

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import UserPictureList from './UserPictureList';
-
-import { withUnstatedContainers } 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 = withUnstatedContainers(LikerPictureList, [PageContainer]);
-
-export default (LikerPictureListWrapper);

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import UserPictureList from './UserPictureList';
+
+import { withUnstatedContainers } from '../UnstatedUtils';
+
+import PageContainer from '../../services/PageContainer';
+
+class SeenUserList extends React.Component {
+
+  render() {
+    const { pageContainer } = this.props;
+    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>
+          <i className="fa fa-fw fa-paw"></i>
+        </span>
+        <span className="mr-1">
+          <UserPictureList users={pageContainer.state.seenUsers} />
+        </span>
+      </div>
+    );
+  }
+
+}
+
+SeenUserList.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const SeenUserListWrapper = withUnstatedContainers(SeenUserList, [PageContainer]);
+
+export default (SeenUserListWrapper);

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import UserPictureList from './UserPictureList';
-
-import { withUnstatedContainers } 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 = withUnstatedContainers(SeenUserPictureList, [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'),
@@ -131,7 +133,9 @@ export default class PageContainer extends Container {
 
     const seenUserListElem = document.getElementById('seen-user-list');
     if (seenUserListElem != null) {
-      const userIdsStr = seenUserListElem.dataset.userIds;
+      const { userIdsStr, sumOfSeenUsers } = seenUserListElem.dataset;
+      this.setState({ sumOfSeenUsers });
+
       if (userIdsStr === '') {
         return;
       }
@@ -145,7 +149,9 @@ 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;
+      this.setState({ sumOfLikers });
+
       if (userIdsStr === '') {
         return;
       }

src/client/styles/scss/_layout_growi.scss

@@ -11,9 +11,13 @@
     line-height: 1.25;
     border-bottom: 1px solid transparent;
 
-    .liker-user-count,
-    .seen-user-count {
-      font-weight: bold;
+    .user-list-content {
+      direction: rtl;
+
+      .liker-user-count,
+      .seen-user-count {
+        font-weight: bold;
+      }
     }
   }
 

src/server/views/layout-growi/user_page.html

@@ -47,11 +47,11 @@
     {# relocate #revision-toc #}
     <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
       <div class="liker-and-seenusers d-flex align-items-end justify-content-end">
-        {% if page.seenUsers.length > 10 %}<span class="text-muted">..</span>{% endif %}
-        <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-10)|default([])|join(',') }}"></span>
-        <span class="text-danger">
-          <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
-        </span>
+        <div
+          id="seen-user-list"
+          data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
+          data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"
+        ></div>
       </div>
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="116">
         <div id="revision-toc-content" class="revision-toc-content"></div>

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.liker|slice(-15)|default([])|reverse|join(',') }}"
+    data-sum-of-likers="{{ page.liker.length|default(0) }}"
+  ></div>
+  <div
+    id="seen-user-list"
+    data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
+    data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"
+  ></div>
 </div>