feat: 84999 85029 Display a list of bookmarked users (#5040)

* new file

* create useSWRxBookmarksInfo

* useSWR

* fix

* create getBookmarkedUsers method

* fix name

* useSWR

* add TODO

* add null

* add bookmarkedUserIds

* Copy the look from LikeButtons

* fix

* added the ability to retrieve user documents

* fix response name & add if

* cleanup

* fb fix

* ok

* i18n

* fix

* delete todo

* rename file

* rename path

packages/app/resource/locales/en_US/translation.json

@@ -58,6 +58,7 @@
   "The end": "The end",
   "Not available for guest": "Not available for guest",
   "No users have liked this yet.": "No users have liked this yet.",
+  "No users have bookmarked yet": "No users have bookmarked yet",
   "Create Archive Page": "Create Archive Page",
   "File type": "File type",
   "Target page": "Target page",

packages/app/resource/locales/ja_JP/translation.json

@@ -58,6 +58,7 @@
   "Presentation Mode": "プレゼンテーション",
   "The end": "おしまい",
   "Not available for guest": "ゲストユーザーは利用できません",
+  "No users have bookmarked yet": "ブックマークしているユーザーはいません",
   "Create Archive Page": "アーカイブページの作成",
   "Target page": "対象ページ",
   "File type": "ファイル形式",

packages/app/resource/locales/zh_CN/translation.json

@@ -59,6 +59,7 @@
 	"Presentation Mode": "演示文稿",
   "The end": "结束",
   "Not available for guest": "Not available for guest",
+  "No users have bookmarked yet": "还没有用户加入书签",
   "Create Archive Page": "创建归档页",
   "File type": "文件类型",
   "Target page": "目标页面",

packages/app/src/components/BookmarkButton.tsx → packages/app/src/components/BookmarkButtons.tsx

@@ -1,9 +1,10 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 
 import { Types } from 'mongoose';
-import { UncontrolledTooltip } from 'reactstrap';
+import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 
+import UserPictureList from './User/UserPictureList';
 import { toastError } from '~/client/util/apiNotification';
 import { useIsGuestUser } from '~/stores/context';
 import { useSWRxBookmarksInfo } from '~/stores/bookmarks';
@@ -17,16 +18,19 @@ const BookmarkButton: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
   const { pageId } = props;
 
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
   const { data: isGuestUser } = useIsGuestUser();
   const { data: bookmarksInfo, mutate } = useSWRxBookmarksInfo(pageId);
 
   const isBookmarked = bookmarksInfo?.isBookmarked != null ? bookmarksInfo.isBookmarked : false;
   const sumOfBookmarks = bookmarksInfo?.sumOfBookmarks != null ? bookmarksInfo.sumOfBookmarks : 0;
-
-  // TODO: To be used in UserPictureList
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const bookmarkedUsers = bookmarksInfo?.bookmarkedUsers != null ? bookmarksInfo.bookmarkedUsers : [];
 
+  const togglePopover = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
   const handleClick = async() => {
     if (isGuestUser) {
       return;
@@ -44,18 +48,15 @@ const BookmarkButton: FC<Props> = (props: Props) => {
   };
 
   return (
-    <div>
+    <div className="btn-group" role="group" aria-label="Bookmark buttons">
       <button
         type="button"
         id="bookmark-button"
         onClick={handleClick}
-        className={`btn btn-bookmark border-0 btn-md
-        ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+        className={`btn btn-bookmark border-0
+          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
-        <i className="icon-star mr-3"></i>
-        <span className="total-bookmarks">
-          {sumOfBookmarks}
-        </span>
+        <i className="icon-star"></i>
       </button>
 
       {isGuestUser && (
@@ -63,6 +64,17 @@ const BookmarkButton: FC<Props> = (props: Props) => {
           {t('Not available for guest')}
         </UncontrolledTooltip>
       )}
+
+      <button type="button" id="po-total-bookmarks" className={`btn btn-bookmark border-0 total-bookmarks ${isBookmarked ? 'active' : ''}`}>
+        {sumOfBookmarks}
+      </button>
+      <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-bookmarks" toggle={togglePopover} trigger="legacy">
+        <PopoverBody className="seen-user-popover">
+          <div className="px-2 text-right user-list-content text-truncate text-muted">
+            {bookmarkedUsers.length ? <UserPictureList users={bookmarkedUsers} /> : t('No users have bookmarked yet')}
+          </div>
+        </PopoverBody>
+      </Popover>
     </div>
   );
 };

packages/app/src/components/Navbar/SubNavButtons.jsx

@@ -5,7 +5,7 @@ import PageContainer from '~/client/services/PageContainer';
 import { EditorMode, useEditorMode } from '~/stores/ui';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
-import BookmarkButton from '../BookmarkButton';
+import BookmarkButtons from '../BookmarkButtons';
 import LikeButtons from '../LikeButtons';
 import SubscribeButton from '../SubscribeButton';
 import PageManagement from '../Page/PageManagement';
@@ -31,7 +31,7 @@ const SubnavButtons = React.memo((props) => {
           </span>
         )}
         <span>
-          <BookmarkButton
+          <BookmarkButtons
             pageId={pageContainer.state.pageId}
           />
         </span>