use appContainer

packages/app/src/client/services/PageContainer.js

@@ -53,6 +53,7 @@ export default class PageContainer extends Container {
       tocHtml: '',
       isLiked: false,
       isBookmarked: false,
+      isSubscribing: false,
       seenUsers: [],
       seenUserIds: mainContent.getAttribute('data-page-ids-of-seen-users'),
       countOfSeenUsers: mainContent.getAttribute('data-page-count-of-seen-users'),
@@ -120,6 +121,7 @@ export default class PageContainer extends Container {
       this.retrieveSeenUsers();
       this.retrieveLikeInfo();
       this.retrieveBookmarkInfo();
+      this.retrieveSubscribeStatus();
     }
 
     this.setTocHtml = this.setTocHtml.bind(this);
@@ -303,6 +305,17 @@ export default class PageContainer extends Container {
     return this.retrieveBookmarkInfo();
   }
 
+  async retrieveSubscribeStatus() {
+    const res = await this.appContainer.apiv3Get('/page/subscribe/status', { pageId: this.state.pageId });
+    this.setState({ isSubscribing: res.data.subscribing });
+  }
+
+  async toggleSubscribe() {
+    const bool = !this.state.isSubscribing;
+    await this.appContainer.apiv3Put('page/subscribe', { pageId: this.state.pageId, status: bool });
+    return this.retrieveSubscribeStatus();
+  }
+
   async checkAndUpdateImageUrlCached(users) {
     const noImageCacheUsers = users.filter((user) => { return user.imageUrlCached == null });
     if (noImageCacheUsers.length === 0) {

packages/app/src/components/SubscribeButton.tsx

@@ -1,4 +1,6 @@
-import React, { useState, useEffect, FC } from 'react';
+import React, {
+  useState, useEffect, useCallback, FC,
+} from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
@@ -10,13 +12,14 @@ 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, pageId } = props;
+  const { appContainer, pageContainer, pageId } = props;
   const [isSubscribing, setIsSubscribing] = useState(false);
 
   const handleClick = async() => {
@@ -25,41 +28,33 @@ const SubscruibeButton: FC<Props> = (props: Props) => {
     }
 
     try {
-      const res = await appContainer.apiv3Put('page/subscribe', { pageId, status: !isSubscribing });
-      if (res) {
-        const { subscription } = res.data;
-        setIsSubscribing(subscription.status === 'SUBSCRIBE');
-      }
+      pageContainer.toggleSubscribe();
     }
     catch (err) {
       toastError(err);
     }
-  };
 
-  const fetchSubscribeStatus = async() => {
-    try {
-      const res = await appContainer.apiv3Get('page/subscribe/status', { pageId });
-      const { subscribing } = res.data;
-      setIsSubscribing(subscribing);
-    }
-    catch (err) {
-      toastError(err);
-    }
+    // try {
+    //   const res = await appContainer.apiv3Put('page/subscribe', { pageId, status: !isSubscribing });
+    //   if (res) {
+    //     const { subscription } = res.data;
+    //     setIsSubscribing(subscription.status === 'SUBSCRIBE');
+    //   }
+    // }
+    // catch (err) {
+    //   toastError(err);
+    // }
   };
 
-  useEffect(() => {
-    fetchSubscribeStatus();
-  }, []);
-
   return (
     <>
       <button
         type="button"
         id="subscribe-button"
         onClick={handleClick}
-        className={`btn btn-subscribe border-0 ${isSubscribing ? 'active' : ''}  ${appContainer.isGuestUser ? 'disabled' : ''}`}
+        className={`btn btn-subscribe border-0 ${pageContainer.state.isSubscribing ? 'active' : ''}  ${appContainer.isGuestUser ? 'disabled' : ''}`}
       >
-        <i className={isSubscribing ? 'fa fa-eye' : 'fa fa-eye-slash'}></i>
+        <i className={pageContainer.state.isSubscribing ? 'fa fa-eye' : 'fa fa-eye-slash'}></i>
       </button>
 
       {appContainer.isGuestUser && (