pass the pageId from the parent component

packages/app/src/components/LikeButtons.tsx

@@ -6,7 +6,7 @@ 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 { apiv3Put } from '~/client/util/apiv3-client';
 
 interface Props {
@@ -15,10 +15,10 @@ interface Props {
 
 const LikeButtons: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
+  const { pageId } = props;
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
-  const { data: pageId } = usePageId();
   const { data: isGuestUser } = useIsGuestUser();
 
   // TODO: Get the following values in SWR

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,11 +25,11 @@ const SubnavButtons = React.memo((props) => {
     return (
       <>
         <span>
-          <SubscribeButton pageId={pageContainer.state.pageId} />
+          <SubscribeButton pageId={pageId} />
         </span>
         {pageContainer.isAbleToShowLikeButtons && (
           <span>
-            <LikeButtons />
+            <LikeButtons pageId={pageId} />
           </span>
         )}
         <span>