pass the pageId from the parent component

packages/app/src/components/BookmarkButtons.tsx

@@ -1,21 +1,25 @@
 import React, { FC, useState } from 'react';
 
+import { Types } from 'mongoose';
 import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
 
 import UserPictureList from './User/UserPictureList';
 import { toastError } from '~/client/util/apiNotification';
-import { usePageId, useIsGuestUser } from '~/stores/context';
+import { useIsGuestUser } from '~/stores/context';
 import { useSWRxBookmarksInfo } from '~/stores/bookmarks';
 import { apiv3Put } from '~/client/util/apiv3-client';
 
+interface Props {
+  pageId: Types.ObjectId
+}
 
-const BookmarkButton: FC = () => {
+const BookmarkButton: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
+  const { pageId } = props;
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const { data: pageId } = usePageId();
   const { data: isGuestUser } = useIsGuestUser();
   const { data: bookmarksInfo, mutate } = useSWRxBookmarksInfo(pageId);
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import AppContainer from '~/client/services/AppContainer';
 import PageContainer from '~/client/services/PageContainer';
+import { usePageId } from '~/stores/context';
 import { EditorMode, useEditorMode } from '~/stores/ui';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -15,6 +16,7 @@ const SubnavButtons = React.memo((props) => {
     appContainer, pageContainer, isCompactMode,
   } = props;
 
+  const { data: pageId } = usePageId();
   const { data: editorMode } = useEditorMode();
 
   /* eslint-disable react/prop-types */
@@ -23,7 +25,7 @@ const SubnavButtons = React.memo((props) => {
     return (
       <>
         <span>
-          <SubscribeButton pageId={pageContainer.state.pageId} />
+          <SubscribeButton pageId={pageId} />
         </span>
         {pageContainer.isAbleToShowLikeButtons && (
           <span>
@@ -31,7 +33,7 @@ const SubnavButtons = React.memo((props) => {
           </span>
         )}
         <span>
-          <BookmarkButtons />
+          <BookmarkButtons page={pageId} />
         </span>
       </>
     );