hide total number when compact mode

packages/app/src/components/BookmarkButton.jsx

@@ -2,12 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { UncontrolledTooltip } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { withUnstatedContainers } from './UnstatedUtils';
 
-import { toastError } from '~/client/util/apiNotification';
-import { apiv3Put } from '~/client/util/apiv3-client';
-
 import AppContainer from '~/client/services/AppContainer';
 
 class LegacyBookmarkButton extends React.Component {
@@ -28,12 +25,12 @@ class LegacyBookmarkButton extends React.Component {
 
   render() {
     const {
-      appContainer, t, isBookmarked, sumOfBookmarks,
+      appContainer, t, isBookmarked, hideTotalNumber, sumOfBookmarks,
     } = this.props;
     const { isGuestUser } = appContainer;
 
     return (
-      <div>
+      <>
         <button
           type="button"
           id="bookmark-button"
@@ -41,12 +38,14 @@ class LegacyBookmarkButton extends React.Component {
           className={`btn btn-bookmark border-0
           ${`btn-${this.props.size}`} ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}
         >
-          <i className="icon-star mr-3"></i>
-          <span className="total-bookmarks">
-            {sumOfBookmarks && (
-              sumOfBookmarks
-            )}
-          </span>
+          <i className="icon-star"></i>
+          { !hideTotalNumber && (
+            <span className="total-bookmarks ml-3">
+              {sumOfBookmarks && (
+                sumOfBookmarks
+              )}
+            </span>
+          ) }
         </button>
 
         {isGuestUser && (
@@ -54,7 +53,7 @@ class LegacyBookmarkButton extends React.Component {
             {t('Not available for guest')}
           </UncontrolledTooltip>
         )}
-      </div>
+      </>
     );
   }
 
@@ -69,6 +68,8 @@ LegacyBookmarkButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   isBookmarked: PropTypes.bool.isRequired,
+
+  hideTotalNumber: PropTypes.bool,
   sumOfBookmarks: PropTypes.number,
   t: PropTypes.func.isRequired,
   size: PropTypes.string,
@@ -79,8 +80,10 @@ LegacyBookmarkButton.defaultProps = {
   size: 'md',
 };
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const BookmarkButton = (props) => {
-  return <LegacyBookmarkButtonWrapper {...props}></LegacyBookmarkButtonWrapper>;
+  const { t } = useTranslation();
+  return <LegacyBookmarkButtonWrapper t={t} {...props}></LegacyBookmarkButtonWrapper>;
 };
 
-export default withTranslation()(BookmarkButton);
+export default BookmarkButton;

packages/app/src/components/LikeButtons.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useState } from 'react';
 
 import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import UserPictureList from './User/UserPictureList';
 import { withUnstatedContainers } from './UnstatedUtils';
 
@@ -10,14 +10,17 @@ import { IUser } from '../interfaces/user';
 
 type LikeButtonsProps = {
   appContainer: AppContainer,
+
+  hideTotalNumber?: boolean,
   sumOfLikers: number,
   isLiked: boolean,
   likers: IUser[],
   onLikeClicked?: ()=>void,
-  t: (s:string)=>string,
 }
 
 const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
+  const { t } = useTranslation();
+
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const togglePopover = () => {
@@ -33,7 +36,7 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
   };
 
   const {
-    appContainer, isLiked, sumOfLikers, t,
+    appContainer, hideTotalNumber, isLiked, sumOfLikers,
   } = props;
   const { isGuestUser } = appContainer;
 
@@ -54,16 +57,20 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
         </UncontrolledTooltip>
       )}
 
-      <button type="button" id="po-total-likes" className={`btn btn-like border-0 total-likes ${isLiked ? 'active' : ''}`}>
-        {sumOfLikers}
-      </button>
-      <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">
-        <PopoverBody className="seen-user-popover">
-          <div className="px-2 text-right user-list-content text-truncate text-muted">
-            {props.likers?.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
-          </div>
-        </PopoverBody>
-      </Popover>
+      { !hideTotalNumber && (
+        <>
+          <button type="button" id="po-total-likes" className={`btn btn-like border-0 total-likes ${isLiked ? 'active' : ''}`}>
+            {sumOfLikers}
+          </button>
+          <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-likes" toggle={togglePopover} trigger="legacy">
+            <PopoverBody className="seen-user-popover">
+              <div className="px-2 text-right user-list-content text-truncate text-muted">
+                {props.likers?.length ? <UserPictureList users={props.likers} /> : t('No users have liked this yet.')}
+              </div>
+            </PopoverBody>
+          </Popover>
+        </>
+      ) }
     </div>
   );
 
@@ -74,8 +81,9 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
  */
 const LikeButtonsUnstatedWrapper = withUnstatedContainers(LikeButtons, [AppContainer]);
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const LikeButtonsWrapper = (props) => {
   return <LikeButtonsUnstatedWrapper {...props}></LikeButtonsUnstatedWrapper>;
 };
 
-export default withTranslation()(LikeButtonsWrapper);
+export default LikeButtonsWrapper;

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

@@ -49,7 +49,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     catch (err) {
       toastError(err);
     }
-  }, [pageInfo]);
+  }, [appContainer, mutatePageInfo, pageId, pageInfo]);
 
   const bookmarkClickHandler = useCallback(async() => {
     if (isGuestUser) {
@@ -63,7 +63,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     catch (err) {
       toastError(err);
     }
-  }, [bookmarkInfo]);
+  }, [bookmarkInfo, isGuestUser, mutateBookmarkInfo, pageId]);
 
   if (pageInfoError != null || pageInfo == null) {
     return <></>;
@@ -80,6 +80,7 @@ const SubNavButtons: FC<SubNavButtonsProps> = (props: SubNavButtonsProps) => {
     <>
       {isViewMode && (
         <PageReactionButtons
+          isCompactMode={isCompactMode}
           sumOfLikers={sumOfLikers}
           isLiked={isLiked}
           likers={likers || []}

packages/app/src/components/PageReactionButtons.tsx

@@ -4,19 +4,22 @@ import { IUser } from '../interfaces/user';
 import BookmarkButton from './BookmarkButton';
 
 type Props = {
-  sumOfLikers: number,
+  isCompactMode?: boolean,
+
   isLiked: boolean,
+  sumOfLikers: number,
   likers: IUser[],
   onLikeClicked?: ()=>void,
-  sumOfBookmarks: number,
+
   isBookmarked: boolean,
+  sumOfBookmarks: number,
   onBookMarkClicked: ()=>void,
 }
 
 
 const PageReactionButtons : FC<Props> = (props: Props) => {
   const {
-    sumOfLikers, isLiked, likers, onLikeClicked, sumOfBookmarks, isBookmarked, onBookMarkClicked,
+    isCompactMode, sumOfLikers, isLiked, likers, onLikeClicked, sumOfBookmarks, isBookmarked, onBookMarkClicked,
   } = props;
 
 
@@ -24,6 +27,7 @@ const PageReactionButtons : FC<Props> = (props: Props) => {
     <>
       <span>
         <LikeButtons
+          hideTotalNumber={isCompactMode}
           onLikeClicked={onLikeClicked}
           sumOfLikers={sumOfLikers}
           isLiked={isLiked}
@@ -32,7 +36,13 @@ const PageReactionButtons : FC<Props> = (props: Props) => {
         </LikeButtons>
       </span>
       <span>
-        <BookmarkButton sumOfBookmarks={sumOfBookmarks} isBookmarked={isBookmarked} onBookMarkClicked={onBookMarkClicked}></BookmarkButton>
+        <BookmarkButton
+          hideTotalNumber={isCompactMode}
+          sumOfBookmarks={sumOfBookmarks}
+          isBookmarked={isBookmarked}
+          onBookMarkClicked={onBookMarkClicked}
+        >
+        </BookmarkButton>
       </span>
     </>
   );