Merge pull request #5667 from weseek/fix/show-page-meta-info-off-focus-on-search-page

fix: Sync change of count for both like and bookmark in search page

packages/app/src/components/PageList/PageListItemL.tsx

@@ -1,6 +1,6 @@
 import React, {
-  forwardRef,
-  ForwardRefRenderFunction, memo, useCallback, useImperativeHandle, useRef,
+  forwardRef, useState,
+  ForwardRefRenderFunction, memo, useCallback, useImperativeHandle, useRef, useEffect,
 } from 'react';
 
 import { useTranslation } from 'react-i18next';
@@ -49,13 +49,15 @@ type Props = {
 
 const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (props: Props, ref): JSX.Element => {
   const {
-    // todo: refactoring variable name to clear what changed
     page: { data: pageData, meta: pageMeta }, isSelected, isEnableActions,
     forceHideMenuItems,
     showPageUpdatedTime,
     onClickItem, onCheckboxChanged, onPageDuplicated, onPageRenamed, onPageDeleted, onPagePutBacked,
   } = props;
 
+  const [likerCount, setLikerCount] = useState(pageData.liker.length);
+  const [bookmarkCount, setBookmarkCount] = useState(pageMeta && pageMeta.bookmarkCount ? pageMeta.bookmarkCount : 0);
+
   const { t } = useTranslation();
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -97,6 +99,14 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
 
   const lastUpdateDate = format(new Date(pageData.updatedAt), 'yyyy/MM/dd HH:mm:ss');
 
+  useEffect(() => {
+    if (isIPageInfoForEntity(pageInfo) && pageInfo != null) {
+      // likerCount
+      setLikerCount(pageInfo.likerIds?.length ?? 0);
+      // bookmarkCount
+      setBookmarkCount(pageInfo.bookmarkCount ?? 0);
+    }
+  }, [pageInfo]);
 
   // click event handler
   const clickHandler = useCallback(() => {
@@ -147,22 +157,6 @@ const PageListItemLSubstance: ForwardRefRenderFunction<ISelectable, Props> = (pr
 
   const shouldDangerouslySetInnerHTMLForPaths = elasticSearchResult != null && elasticSearchResult.highlightedPath != null;
 
-  let likerCount;
-  if (isSelected && isIPageInfoForEntity(pageInfo)) {
-    likerCount = pageInfo.likerIds?.length;
-  }
-  else {
-    likerCount = pageData.liker.length;
-  }
-
-  let bookmarkCount;
-  if (isSelected && isIPageInfoForEntity(pageInfo)) {
-    bookmarkCount = pageInfo.bookmarkCount;
-  }
-  else {
-    bookmarkCount = pageMeta?.bookmarkCount;
-  }
-
   const canRenderESSnippet = elasticSearchResult != null && elasticSearchResult.snippet != null;
   const canRenderRevisionSnippet = revisionShortBody != null;
 

packages/ui/src/components/PagePath/PageListMeta.jsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { templateChecker, pagePathUtils } from '@growi/core';
-import { FootstampIcon } from '../SearchPage/FootstampIcon';
-
-const { isTopPage } = pagePathUtils;
-const { checkTemplatePath } = templateChecker;
-
-export class PageListMeta extends React.Component {
-
-  render() {
-    const { page, shouldSpaceOutIcon } = this.props;
-
-    // top check
-    let topLabel;
-    if (isTopPage(page.path)) {
-      topLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''} top-label`}>TOP</span>;
-    }
-
-    // template check
-    let templateLabel;
-    if (checkTemplatePath(page.path)) {
-      templateLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''}`}>TMPL</span>;
-    }
-
-    let commentCount;
-    if (page.commentCount != null && page.commentCount > 0) {
-      commentCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-bubble" />{page.commentCount}</span>;
-    }
-
-    // liker count section
-    let likedCount;
-    if (this.props.likerCount > 0) {
-      likedCount = this.props.likerCount;
-    }
-    else if (page.liker != null && page.liker.length > 0) {
-      likedCount = page.liker.length;
-    }
-
-    let likerCount;
-    if (likedCount > 0) {
-      likerCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-heart-o" />{likedCount}</span>;
-    }
-
-    let locked;
-    if (page.grant !== 1) {
-      locked = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-lock" /></span>;
-    }
-
-    let seenUserCount;
-    if (page.seenUserCount > 0) {
-      seenUserCount = (
-        <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}>
-          <i className="footstamp-icon"><FootstampIcon /></i>
-          {page.seenUsers.length}
-        </span>
-      );
-    }
-
-    let bookmarkCount;
-    if (this.props.bookmarkCount > 0) {
-      bookmarkCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-bookmark-o" />{this.props.bookmarkCount}</span>;
-    }
-
-    return (
-      <span className="page-list-meta">
-        {topLabel}
-        {templateLabel}
-        {seenUserCount}
-        {commentCount}
-        {likerCount}
-        {locked}
-        {bookmarkCount}
-      </span>
-    );
-  }
-
-}
-
-PageListMeta.propTypes = {
-  page: PropTypes.object.isRequired,
-  likerCount: PropTypes.number,
-  bookmarkCount: PropTypes.number,
-  shouldSpaceOutIcon: PropTypes.bool,
-};

packages/ui/src/components/PagePath/PageListMeta.tsx

@@ -0,0 +1,74 @@
+import React, { FC } from 'react';
+import { templateChecker, pagePathUtils } from '@growi/core';
+import { IPageHasId } from '@growi/app/src/interfaces/page';
+import { FootstampIcon } from '../SearchPage/FootstampIcon';
+
+const { isTopPage } = pagePathUtils;
+const { checkTemplatePath } = templateChecker;
+
+type PageListMetaProps = {
+  page: IPageHasId,
+  likerCount?: number,
+  bookmarkCount?: number,
+  shouldSpaceOutIcon?: boolean,
+}
+
+export const PageListMeta: FC<PageListMetaProps> = (props: PageListMetaProps) => {
+
+  const { page, shouldSpaceOutIcon } = props;
+
+  // top check
+  let topLabel;
+  if (isTopPage(page.path)) {
+    topLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''} top-label`}>TOP</span>;
+  }
+
+  // template check
+  let templateLabel;
+  if (checkTemplatePath(page.path)) {
+    templateLabel = <span className={`badge badge-info ${shouldSpaceOutIcon ? 'mr-3' : ''}`}>TMPL</span>;
+  }
+
+  let commentCount;
+  if (page.commentCount > 0) {
+    commentCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-bubble" />{page.commentCount}</span>;
+  }
+
+  let likerCount;
+  if (props.likerCount != null && props.likerCount > 0) {
+    likerCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-heart-o" />{props.likerCount}</span>;
+  }
+
+  let locked;
+  if (page.grant !== 1) {
+    locked = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="icon-lock" /></span>;
+  }
+
+  let seenUserCount;
+  if (page.seenUsers.length > 0) {
+    seenUserCount = (
+      <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}>
+        <i className="footstamp-icon"><FootstampIcon /></i>
+        {page.seenUsers.length}
+      </span>
+    );
+  }
+
+  let bookmarkCount;
+  if (props.bookmarkCount != null && props.bookmarkCount > 0) {
+    bookmarkCount = <span className={`${shouldSpaceOutIcon ? 'mr-3' : ''}`}><i className="fa fa-bookmark-o" />{props.bookmarkCount}</span>;
+  }
+
+  return (
+    <span className="page-list-meta">
+      {topLabel}
+      {templateLabel}
+      {seenUserCount}
+      {commentCount}
+      {likerCount}
+      {locked}
+      {bookmarkCount}
+    </span>
+  );
+
+};