Merge pull request #3014 from weseek/imprv/gw-4313-reactify-seen-user-list

Imprv/gw 4313 reactify seen user list

src/client/js/app.jsx

@@ -26,7 +26,6 @@ import RecentlyCreatedIcon from './components/Icons/RecentlyCreatedIcon';
 import MyDraftList from './components/MyDraftList/MyDraftList';
 import BookmarkIcon from './components/Icons/BookmarkIcon';
 import BookmarkList from './components/PageList/BookmarkList';
-import SeenUserList from './components/User/SeenUserList';
 import LikerList from './components/User/LikerList';
 import TableOfContents from './components/TableOfContents';
 import PageAccessories from './components/PageAccessories';
@@ -110,7 +109,6 @@ if (pageContainer.state.pageId != null) {
     'page-management': <PageManagement />,
     'page-accessories': <PageAccessories />,
     'revision-toc': <TableOfContents />,
-    'seen-user-list': <SeenUserList />,
     'liker-list': <LikerList />,
 
     'recent-created-icon': <RecentlyCreatedIcon />,

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -11,6 +11,7 @@ import TimeLineIcon from './Icons/TimeLineIcon';
 import HistoryIcon from './Icons/HistoryIcon';
 import AttachmentIcon from './Icons/AttachmentIcon';
 import ShareLinkIcon from './Icons/ShareLinkIcon';
+import SeenUserInfo from './User/SeenUserInfo';
 
 import { withUnstatedContainers } from './UnstatedUtils';
 
@@ -65,13 +66,7 @@ const PageAccessoriesModalControl = (props) => {
           {t('Not available for guest')}
         </UncontrolledTooltip>
       )}
-      <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) }}"
-        className="grw-seen-user-list ml-1 pl-1"
-      >
-      </div>
+      <SeenUserInfo />
     </div>
   );
 };

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

@@ -15,12 +15,12 @@ import FootstampIcon from '../FootstampIcon';
 
 /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
 
-const SeenUserList = (props) => {
+const SeenUserInfo = (props) => {
   const [popoverOpen, setPopoverOpen] = useState(false);
   const toggle = () => setPopoverOpen(!popoverOpen);
   const { pageContainer } = props;
   return (
-    <>
+    <div className="grw-seen-user-info ml-1 pl-1">
       <Button id="po-seen-user" color="link" className="px-2">
         <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>
@@ -32,17 +32,17 @@ const SeenUserList = (props) => {
           </div>
         </PopoverBody>
       </Popover>
-    </>
+    </div>
   );
 };
 
-SeenUserList.propTypes = {
+SeenUserInfo.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 };
 
 /**
  * Wrapper component for using unstated
  */
-const SeenUserListWrapper = withUnstatedContainers(SeenUserList, [PageContainer]);
+const SeenUserInfoWrapper = withUnstatedContainers(SeenUserInfo, [PageContainer]);
 
-export default (SeenUserListWrapper);
+export default (SeenUserInfoWrapper);

src/client/js/services/PageContainer.js

@@ -52,6 +52,7 @@ export default class PageContainer extends Container {
       isLiked: false,
       isBookmarked: false,
       seenUsers: [],
+      seenUserIds: mainContent.getAttribute('data-page-ids-of-seen-users'),
       countOfSeenUsers: mainContent.getAttribute('data-page-count-of-seen-users'),
 
       likerUsers: [],
@@ -61,15 +62,15 @@ export default class PageContainer extends Container {
       updatedAt: mainContent.getAttribute('data-page-updated-at'),
       isTrashPage: isTrashPage(path),
       isForbidden: JSON.parse(mainContent.getAttribute('data-page-is-forbidden')),
-      isDeleted:  JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
-      isDeletable:  JSON.parse(mainContent.getAttribute('data-page-is-deletable')),
+      isDeleted: JSON.parse(mainContent.getAttribute('data-page-is-deleted')),
+      isDeletable: JSON.parse(mainContent.getAttribute('data-page-is-deletable')),
       isNotCreatable: JSON.parse(mainContent.getAttribute('data-page-is-not-creatable')),
-      isAbleToDeleteCompletely:  JSON.parse(mainContent.getAttribute('data-page-is-able-to-delete-completely')),
+      isAbleToDeleteCompletely: JSON.parse(mainContent.getAttribute('data-page-is-able-to-delete-completely')),
       pageUser: JSON.parse(mainContent.getAttribute('data-page-user')),
       tags: null,
       hasChildren: JSON.parse(mainContent.getAttribute('data-page-has-children')),
       templateTagData: mainContent.getAttribute('data-template-tags') || null,
-      shareLinksNumber:  mainContent.getAttribute('data-share-links-number'),
+      shareLinksNumber: mainContent.getAttribute('data-share-links-number'),
       shareLinkId: JSON.parse(mainContent.getAttribute('data-share-link-id') || null),
 
       // latest(on remote) information

src/client/styles/scss/_toc.scss

@@ -14,7 +14,7 @@
     font-size: 12px;
     font-weight: bolder;
   }
-  .grw-seen-user-list {
+  .grw-seen-user-info {
     .btn {
       white-space: nowrap;
     }

src/client/styles/scss/theme/_apply-colors.scss

@@ -312,7 +312,7 @@ ul.pagination {
   .grw-btn-top-of-table {
     fill: $color-link;
   }
-  .grw-seen-user-list {
+  .grw-seen-user-info {
     @include border-vertical('before', $bordercolor-toc, 70%);
 
     .btn {

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

@@ -1,7 +0,0 @@
-<div class="liker-and-seenusers">
-  <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>