apply fb

apps/app/src/components/BookmarkButtons.tsx

@@ -18,7 +18,6 @@ import UserPictureList from './User/UserPictureList';
 import styles from './BookmarkButtons.module.scss';
 
 interface Props {
-  pageId: string
   bookmarkedUsers?: IUser[]
   hideTotalNumber?: boolean
   bookmarkInfo? : IBookmarkInfo
@@ -27,7 +26,7 @@ interface Props {
 export const BookmarkButtons: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
   const {
-    pageId, bookmarkedUsers, hideTotalNumber, bookmarkInfo,
+    bookmarkedUsers, hideTotalNumber, bookmarkInfo,
   } = props;
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -46,13 +45,16 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
     return 'tooltip.bookmark';
   }, [isGuestUser]);
 
+  if (bookmarkInfo == null) {
+    return <></>;
+  }
 
   return (
     <div className={`btn-group btn-group-bookmark ${styles['btn-group-bookmark']}`} role="group" aria-label="Bookmark buttons">
-      <BookmarkFolderMenu pageId={pageId}>
+      <BookmarkFolderMenu bookmarkInfo={bookmarkInfo}>
         <DropdownToggle id='bookmark-dropdown-btn' color="transparent" className={`shadow-none btn btn-bookmark border-0
-          ${bookmarkInfo?.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}>
-          <i className={`fa ${bookmarkInfo?.isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
+          ${bookmarkInfo.isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}>
+          <i className={`fa ${bookmarkInfo.isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
         </DropdownToggle>
       </BookmarkFolderMenu>
 
@@ -66,9 +68,9 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
             type="button"
             id="po-total-bookmarks"
             className={`shadow-none btn btn-bookmark border-0
-              total-bookmarks ${bookmarkInfo?.isBookmarked ? 'active' : ''}`}
+              total-bookmarks ${bookmarkInfo.isBookmarked ? 'active' : ''}`}
           >
-            {bookmarkInfo?.sumOfBookmarks ?? 0}
+            {bookmarkInfo.sumOfBookmarks ?? 0}
           </button>
           { bookmarkedUsers != null && (
             <Popover placement="bottom" isOpen={isPopoverOpen} target="po-total-bookmarks" toggle={togglePopover} trigger="legacy">

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -6,6 +6,7 @@ import { DropdownItem, DropdownMenu, UncontrolledDropdown } from 'reactstrap';
 
 import { addBookmarkToFolder, toggleBookmark } from '~/client/util/bookmark-utils';
 import { toastError } from '~/client/util/toastr';
+import { IBookmarkInfo } from '~/interfaces/bookmark-info';
 import { useSWRBookmarkInfo, useSWRxUserBookmarks } from '~/stores/bookmark';
 import { useSWRxBookmarkFolderAndChild } from '~/stores/bookmark-folder';
 import { useCurrentUser } from '~/stores/context';
@@ -13,7 +14,7 @@ import { useSWRxPageInfo } from '~/stores/page';
 
 import { BookmarkFolderMenuItem } from './BookmarkFolderMenuItem';
 
-export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, pageId: string }> = ({ children, pageId }): JSX.Element => {
+export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, bookmarkInfo: IBookmarkInfo }> = ({ children, bookmarkInfo }): JSX.Element => {
   const { t } = useTranslation();
 
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
@@ -21,12 +22,12 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, pageId: s
 
   const { data: currentUser } = useCurrentUser();
   const { data: bookmarkFolders, mutate: mutateBookmarkFolders } = useSWRxBookmarkFolderAndChild(currentUser?._id);
-  const { data: bookmarkInfo, mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(pageId);
+  const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(bookmarkInfo.pageId);
 
   const { mutate: mutateUserBookmarks } = useSWRxUserBookmarks(currentUser?._id);
-  const { mutate: mutatePageInfo } = useSWRxPageInfo(pageId);
+  const { mutate: mutatePageInfo } = useSWRxPageInfo(bookmarkInfo.pageId);
 
-  const isBookmarked = bookmarkInfo?.isBookmarked ?? false;
+  const isBookmarked = bookmarkInfo.isBookmarked ?? false;
 
   const isBookmarkFolderExists = useMemo((): boolean => {
     return bookmarkFolders != null && bookmarkFolders.length > 0;
@@ -34,14 +35,12 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, pageId: s
 
   const toggleBookmarkHandler = useCallback(async() => {
     try {
-      if (pageId != null) {
-        await toggleBookmark(pageId, isBookmarked);
-      }
+      await toggleBookmark(bookmarkInfo.pageId, isBookmarked);
     }
     catch (err) {
       toastError(err);
     }
-  }, [pageId, isBookmarked]);
+  }, [bookmarkInfo.pageId, isBookmarked]);
 
   const onUnbookmarkHandler = useCallback(async() => {
     await toggleBookmarkHandler();
@@ -59,7 +58,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, pageId: s
     if (isOpen && bookmarkFolders != null) {
       bookmarkFolders.forEach((bookmarkFolder) => {
         bookmarkFolder.bookmarks.forEach((bookmark) => {
-          if (bookmark.page._id === pageId) {
+          if (bookmark.page._id === bookmarkInfo.pageId) {
             setSelectedItem(bookmarkFolder._id);
           }
         });
@@ -82,7 +81,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, pageId: s
       }
     }
   },
-  [isOpen, bookmarkFolders, selectedItem, isBookmarked, pageId, toggleBookmarkHandler, mutateUserBookmarks, mutateBookmarkInfo, mutatePageInfo]);
+  [isOpen, bookmarkFolders, selectedItem, isBookmarked, bookmarkInfo.pageId, toggleBookmarkHandler, mutateUserBookmarks, mutateBookmarkInfo, mutatePageInfo]);
 
   const onMenuItemClickHandler = useCallback(async(e, itemId: string) => {
     e.stopPropagation();
@@ -90,9 +89,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, pageId: s
     setSelectedItem(itemId);
 
     try {
-      if (pageId != null) {
-        await addBookmarkToFolder(pageId, itemId === 'root' ? null : itemId);
-      }
+      await addBookmarkToFolder(bookmarkInfo.pageId, itemId === 'root' ? null : itemId);
       mutateUserBookmarks();
       mutateBookmarkFolders();
       mutateBookmarkInfo();
@@ -100,7 +97,7 @@ export const BookmarkFolderMenu: React.FC<{children?: React.ReactNode, pageId: s
     catch (err) {
       toastError(err);
     }
-  }, [mutateBookmarkFolders, pageId, mutateBookmarkInfo, mutateUserBookmarks]);
+  }, [bookmarkInfo.pageId, mutateUserBookmarks, mutateBookmarkFolders, mutateBookmarkInfo]);
 
   const renderBookmarkMenuItem = () => {
     return (

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

@@ -227,7 +227,6 @@ const SubNavButtonsSubstance = (props: SubNavButtonsSubstanceProps): JSX.Element
       )}
       {revisionId != null && (
         <BookmarkButtons
-          pageId={pageId}
           hideTotalNumber={isCompactMode}
           bookmarkedUsers={bookmarkInfo?.bookmarkedUsers}
           bookmarkInfo={bookmarkInfo}

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

@@ -4,9 +4,10 @@ import { IPageHasId } from '~/interfaces/page';
 import { IUser } from '~/interfaces/user';
 
 export interface IBookmarkInfo {
-  sumOfBookmarks: number;
+  sumOfBookmarks: number,
   isBookmarked: boolean,
-  bookmarkedUsers: IUser[]
+  bookmarkedUsers: IUser[],
+  pageId: string,
 }
 
 export interface BookmarkedPage {

apps/app/src/server/routes/apiv3/bookmarks.js

@@ -128,6 +128,7 @@ module.exports = (crowi) => {
       }
       responsesParams.sumOfBookmarks = bookmarks.length;
       responsesParams.bookmarkedUsers = users;
+      responsesParams.pageId = pageId;
     }
     catch (err) {
       logger.error('get-bookmark-document-failed', err);

apps/app/src/stores/bookmark.ts

@@ -14,6 +14,7 @@ export const useSWRBookmarkInfo = (pageId: string | null | undefined): SWRRespon
         sumOfBookmarks: response.data.sumOfBookmarks,
         isBookmarked: response.data.isBookmarked,
         bookmarkedUsers: response.data.bookmarkedUsers,
+        pageId: response.data.pageId,
       };
     }),
   );