Merge pull request #5135 from weseek/feat/86574-show-bookmarked-users

feat: 86574 show bookmarked users

packages/app/src/components/BookmarkButton.jsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { UncontrolledTooltip } from 'reactstrap';
-import { useTranslation } from 'react-i18next';
-import { withUnstatedContainers } from './UnstatedUtils';
-
-import AppContainer from '~/client/services/AppContainer';
-
-class LegacyBookmarkButton extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  async handleClick() {
-
-    if (this.props.onBookMarkClicked == null) {
-      return;
-    }
-    this.props.onBookMarkClicked();
-  }
-
-  render() {
-    const {
-      appContainer, t, isBookmarked, hideTotalNumber, sumOfBookmarks,
-    } = this.props;
-    const { isGuestUser } = appContainer;
-
-    return (
-      <>
-        <button
-          type="button"
-          id="bookmark-button"
-          onClick={this.handleClick}
-          className={`btn btn-bookmark border-0
-          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
-        >
-          <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
-          { !hideTotalNumber && (
-            <span className="total-bookmarks ml-3">
-              {sumOfBookmarks && (
-                sumOfBookmarks
-              )}
-            </span>
-          ) }
-        </button>
-
-        {isGuestUser && (
-          <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
-            {t('Not available for guest')}
-          </UncontrolledTooltip>
-        )}
-      </>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const LegacyBookmarkButtonWrapper = withUnstatedContainers(LegacyBookmarkButton, [AppContainer]);
-
-LegacyBookmarkButton.propTypes = {
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-
-  isBookmarked: PropTypes.bool.isRequired,
-
-  hideTotalNumber: PropTypes.bool,
-  sumOfBookmarks: PropTypes.number,
-  t: PropTypes.func.isRequired,
-  onBookMarkClicked: PropTypes.func,
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-const BookmarkButton = (props) => {
-  const { t } = useTranslation();
-  return <LegacyBookmarkButtonWrapper t={t} {...props}></LegacyBookmarkButtonWrapper>;
-};
-
-export default BookmarkButton;

packages/app/src/components/BookmarkButtons.tsx

@@ -1,49 +1,35 @@
 import React, { FC, useState } from 'react';
 
-import { Types } from 'mongoose';
 import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 
+import { IUser } from '../interfaces/user';
+
 import UserPictureList from './User/UserPictureList';
-import { toastError } from '~/client/util/apiNotification';
 import { useIsGuestUser } from '~/stores/context';
-import { useSWRxBookmarksInfo } from '~/stores/bookmarks';
-import { apiv3Put } from '~/client/util/apiv3-client';
 
 interface Props {
-  pageId: Types.ObjectId
+  hideTotalNumber?: boolean
+  isBookmarked: boolean
+  sumOfBookmarks: number
+  bookmarkedUsers: IUser[]
+  onBookMarkClicked: ()=>void;
 }
 
-const BookmarkButton: FC<Props> = (props: Props) => {
+const BookmarkButtons: 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;
-  const bookmarkedUsers = bookmarksInfo?.bookmarkedUsers != null ? bookmarksInfo.bookmarkedUsers : [];
 
   const togglePopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
   };
 
   const handleClick = async() => {
-    if (isGuestUser) {
-      return;
-    }
-
-    try {
-      const res = await apiv3Put('/bookmarks', { pageId, bool: !isBookmarked });
-      if (res) {
-        mutate();
-      }
-    }
-    catch (err) {
-      toastError(err);
+    if (props.onBookMarkClicked != null) {
+      props.onBookMarkClicked();
     }
   };
 
@@ -54,9 +40,9 @@ const BookmarkButton: FC<Props> = (props: Props) => {
         id="bookmark-button"
         onClick={handleClick}
         className={`btn btn-bookmark border-0
-          ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
+          ${props.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
       >
-        <i className="icon-star"></i>
+        <i className={`fa ${props.isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
       </button>
 
       {isGuestUser && (
@@ -65,19 +51,22 @@ const BookmarkButton: FC<Props> = (props: Props) => {
         </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>
+      { !props.hideTotalNumber && (
+        <>
+          <button type="button" id="po-total-bookmarks" className={`btn btn-bookmark border-0 total-bookmarks ${props.isBookmarked ? 'active' : ''}`}>
+            {props.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">
+                {props.bookmarkedUsers.length ? <UserPictureList users={props.bookmarkedUsers} /> : t('No users have bookmarked yet')}
+              </div>
+            </PopoverBody>
+          </Popover>
+        </>
+      ) }
     </div>
   );
 };
 
-export default BookmarkButton;
+export default BookmarkButtons;

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

@@ -74,7 +74,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
   }
 
   const { sumOfLikers, isLiked } = pageInfo;
-  const { sumOfBookmarks, isBookmarked } = bookmarkInfo;
+  const { sumOfBookmarks, isBookmarked, bookmarkedUsers } = bookmarkInfo;
 
   return (
     <div className="d-flex" style={{ gap: '2px' }}>
@@ -91,6 +91,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
             onLikeClicked={likeClickhandler}
             sumOfBookmarks={sumOfBookmarks}
             isBookmarked={isBookmarked}
+            bookmarkedUsers={bookmarkedUsers}
             onBookMarkClicked={bookmarkClickHandler}
           >
           </PageReactionButtons>

packages/app/src/components/PageReactionButtons.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import LikeButtons from './LikeButtons';
 import { IUser } from '../interfaces/user';
-import BookmarkButton from './BookmarkButton';
+import BookmarkButtons from './BookmarkButtons';
 
 type Props = {
   isCompactMode?: boolean,
@@ -13,13 +13,14 @@ type Props = {
 
   isBookmarked: boolean,
   sumOfBookmarks: number,
+  bookmarkedUsers: IUser[]
   onBookMarkClicked: ()=>void,
 }
 
 
 const PageReactionButtons : FC<Props> = (props: Props) => {
   const {
-    isCompactMode, sumOfLikers, isLiked, likers, onLikeClicked, sumOfBookmarks, isBookmarked, onBookMarkClicked,
+    isCompactMode, sumOfLikers, isLiked, likers, onLikeClicked, sumOfBookmarks, isBookmarked, bookmarkedUsers, onBookMarkClicked,
   } = props;
 
 
@@ -33,13 +34,14 @@ const PageReactionButtons : FC<Props> = (props: Props) => {
         likers={likers}
       >
       </LikeButtons>
-      <BookmarkButton
+      <BookmarkButtons
         hideTotalNumber={isCompactMode}
         sumOfBookmarks={sumOfBookmarks}
         isBookmarked={isBookmarked}
+        bookmarkedUsers={bookmarkedUsers}
         onBookMarkClicked={onBookMarkClicked}
       >
-      </BookmarkButton>
+      </BookmarkButtons>
     </>
   );
 };

packages/app/src/interfaces/bookmark-info.ts

@@ -1,4 +1,7 @@
+import { IUser } from '~/interfaces/user';
+
 export type IBookmarkInfo = {
   sumOfBookmarks: number;
   isBookmarked: boolean,
+  bookmarkedUsers: IUser[]
 };

packages/app/src/interfaces/bookmarks.ts

@@ -1,7 +0,0 @@
-import { IUser } from '~/interfaces/user';
-
-export interface IBookmarksInfo {
-  isBookmarked: boolean
-  sumOfBookmarks: number
-  bookmarkedUsers: IUser[]
-}

packages/app/src/stores/bookmark.ts

@@ -11,6 +11,7 @@ export const useSWRBookmarkInfo = (pageId: string | null | undefined, isOpen = f
       return {
         sumOfBookmarks: response.data.sumOfBookmarks,
         isBookmarked: response.data.isBookmarked,
+        bookmarkedUsers: response.data.bookmarkedUsers,
       };
     }),
   );

packages/app/src/stores/bookmarks.tsx

@@ -1,21 +0,0 @@
-import useSWR, { SWRResponse } from 'swr';
-
-import { Types } from 'mongoose';
-import { apiv3Get } from '~/client/util/apiv3-client';
-
-import { IBookmarksInfo } from '~/interfaces/bookmarks';
-
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const useSWRxBookmarksInfo = <Data, Error>(pageId: Types.ObjectId):SWRResponse<IBookmarksInfo, Error> => {
-  return useSWR(
-    ['/bookmarks/info', pageId],
-    (endpoint, pageId) => apiv3Get(endpoint, { pageId }).then((response) => {
-      return {
-        isBookmarked: response.data.isBookmarked,
-        sumOfBookmarks: response.data.sumOfBookmarks,
-        bookmarkedUsers: response.data.bookmarkedUsers,
-      };
-    }),
-  );
-};