receive pageId in props

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

@@ -110,7 +110,7 @@ const GrowiSubNavigation = (props) => {
 
         <div className="d-flex flex-column align-items-end">
           <div className="d-flex">
-            <SubnavButtons isCompactMode={isCompactMode} />
+            <SubnavButtons isCompactMode={isCompactMode} pageId={pageId} />
           </div>
           <div className="mt-2">
             {pageContainer.isAbleToShowPageEditorModeManager && (

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

@@ -12,7 +12,7 @@ import PageManagement from '../Page/PageManagement';
 
 const SubnavButtons = (props) => {
   const {
-    appContainer, navigationContainer, pageContainer, isCompactMode,
+    appContainer, navigationContainer, pageContainer, isCompactMode, pageId,
   } = props;
 
   /* eslint-enable react/prop-types */
@@ -23,7 +23,7 @@ const SubnavButtons = (props) => {
     return (
       <>
         <span>
-          <SubscribeButton />
+          <SubscribeButton pageId={pageId} />
         </span>
         {pageContainer.isAbleToShowLikeButton && (
           <span>
@@ -66,6 +66,7 @@ SubnavButtons.propTypes = {
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
 
   isCompactMode: PropTypes.bool,
+  pageId: PropTypes.string,
 };
 
 export default SubnavButtonsWrapper;

packages/app/src/components/SubscribeButton.tsx

@@ -10,13 +10,13 @@ import PageContainer from '~/client/services/PageContainer';
 
 type Props = {
   appContainer: AppContainer,
-  pageContainer: PageContainer,
+  pageId: string,
 };
 
 const SubscruibeButton: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
 
-  const { appContainer, pageContainer } = props;
+  const { appContainer, pageId } = props;
   const [isWatching, setIsWatching] = useState(false);
 
   const handleClick = async() => {
@@ -25,7 +25,7 @@ const SubscruibeButton: FC<Props> = (props: Props) => {
     }
 
     try {
-      const res = await appContainer.apiv3Put('page/subscribe', { pageId: pageContainer.state.pageId, status: !isWatching });
+      const res = await appContainer.apiv3Put('page/subscribe', { pageId, status: !isWatching });
       if (res) {
         const { subscription } = res.data;
         setIsWatching(subscription.status === 'WATCH');