enabled front side to receive subscribe status

packages/app/src/components/SubscribeButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState, FC } from 'react';
+import React, { useState, useEffect, FC } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
@@ -36,6 +36,21 @@ const SubscruibeButton: FC<Props> = (props: Props) => {
     }
   };
 
+  const fetchSubscribeStatus = async() => {
+    try {
+      const res = await appContainer.apiv3Get('page/subscribe/status', { pageId });
+      const { subscribing } = res.data;
+      setIsSubscribing(subscribing);
+    }
+    catch (err) {
+      toastError(err);
+    }
+  };
+
+  useEffect(() => {
+    fetchSubscribeStatus();
+  }, []);
+
   return (
     <>
       <button

packages/app/src/server/routes/apiv3/page.js

@@ -468,6 +468,26 @@ module.exports = (crowi) => {
   //   return res.apiv3({ dummy });
   // });
 
+  router.get('/subscribe/status', accessTokenParser, loginRequiredStrictly, async(req, res) => {
+    const { pageId } = req.query;
+    const userId = req.user._id;
+    try {
+      const subscription = await Subscription.findByUserIdAndTargetId(userId, pageId);
+      const getDefaultStatus = async() => {
+        const page = await Page.findById(pageId);
+        if (!page) throw new Error('Page not found');
+        const targetUsers = await page.getNotificationTargetUsers();
+        return targetUsers.some(user => user.toString() === userId.toString());
+      };
+      const subscribing = subscription ? subscription.isSubscribing() : await getDefaultStatus();
+      return res.apiv3({ subscribing });
+    }
+    catch (err) {
+      logger.error('Failed to ge subscribe status', err);
+      return res.apiv3(err, 500);
+    }
+  });
+
   /**
    * @swagger
    *