comment out useState

packages/app/src/components/SubscribeButton.tsx

@@ -2,9 +2,11 @@ import React, {
   FC, useState, useCallback, useEffect,
 } from 'react';
 
+
 import { Types } from 'mongoose';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
+import { SubscribeStatuses } from '~/interfaces/in-app-notification-settings';
 import { withUnstatedContainers } from './UnstatedUtils';
 import { useSWRxSubscribeButton } from '../stores/page';
 
@@ -22,14 +24,39 @@ const SubscribeButton: FC<Props> = (props: Props) => {
   const { t } = useTranslation();
 
   const { appContainer, pageId } = props;
-  const [isSubscribing, setIsSubscribing] = useState<boolean | null>(null);
+  // const [isSubscribing, setIsSubscribing] = useState<boolean | null>(null);
   const { data: subscriptionData, mutate } = useSWRxSubscribeButton(pageId);
   console.log('subscriptionData', subscriptionData);
 
+  const fetchSubscriptionStatus = useCallback(async() => {
+    if (appContainer.isGuestUser) {
+      return;
+    }
+
+    try {
+      const res = await appContainer.apiv3Get('page/subscribe', { pageId });
+      const { subscribing } = res.data;
+      if (subscribing == null) {
+        // setIsSubscribing(null);
+      }
+      else {
+        // setIsSubscribing(subscribing);
+      }
+    }
+    catch (err) {
+      toastError(err);
+    }
+  }, [appContainer, pageId]);
+
+  useEffect(() => {
+    fetchSubscriptionStatus();
+  }, [fetchSubscriptionStatus]);
+
   if (subscriptionData == null) {
-    console.log('hoge');
+    return <></>;
   }
 
+  const isSubscribing = subscriptionData.status === SubscribeStatuses.STATUS_SUBSCRIBE;
 
   const buttonClass = `${isSubscribing ? 'active' : ''} ${appContainer.isGuestUser ? 'disabled' : ''}`;
   const iconClass = isSubscribing || isSubscribing == null ? 'fa fa-eye' : 'fa fa-eye-slash';
@@ -40,11 +67,13 @@ const SubscribeButton: FC<Props> = (props: Props) => {
     }
 
     try {
+      console.log('subscriptionData_handleclick', subscriptionData.status);
       const res = await appContainer.apiv3Put('page/subscribe', { pageId, status: !isSubscribing });
       if (res) {
-        const { subscription } = res.data;
-        setIsSubscribing(subscription.status === 'SUBSCRIBE');
+        console.log('res.data', res.data);
         mutate();
+        const { subscription } = res.data;
+        // setIsSubscribing(subscription.status === 'SUBSCRIBE');
       }
     }
     catch (err) {
@@ -52,30 +81,6 @@ const SubscribeButton: FC<Props> = (props: Props) => {
     }
   };
 
-  const fetchSubscriptionStatus = useCallback(async() => {
-    if (appContainer.isGuestUser) {
-      return;
-    }
-
-    try {
-      const res = await appContainer.apiv3Get('page/subscribe', { pageId });
-      const { subscribing } = res.data;
-      if (subscribing == null) {
-        setIsSubscribing(null);
-      }
-      else {
-        setIsSubscribing(subscribing);
-      }
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }, [appContainer, pageId]);
-
-  useEffect(() => {
-    fetchSubscriptionStatus();
-  }, [fetchSubscriptionStatus]);
-
   return (
     <>
       <button