use useSWR

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -9,7 +9,7 @@ import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import InAppNotificationList from './InAppNotificationList';
 import SocketIoContainer from '~/client/services/SocketIoContainer';
-import { useSWRxInAppNotifications } from '~/stores/in-app-notification';
+import { useSWRxInAppNotifications, useSWRxInAppNotificationStatus } from '~/stores/in-app-notification';
 
 const logger = loggerFactory('growi:InAppNotificationDropdown');
 
@@ -24,6 +24,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
   const [isOpen, setIsOpen] = useState(false);
   const limit = 6;
   const { data: inAppNotificationData, mutate } = useSWRxInAppNotifications(limit);
+  const { data: inAppNotificationStatusData } = useSWRxInAppNotificationStatus();
 
 
   const initializeSocket = (props) => {
@@ -33,33 +34,37 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     });
   };
 
-  const fetchNotificationStatus = async() => {
+  const updateNotificationStatus = async() => {
     try {
-      const res = await apiv3Get('/in-app-notification/status');
-      const { count } = res.data;
-      setCount(count);
+      await apiv3Post('/in-app-notification/read');
+      setCount(0);
     }
     catch (err) {
       logger.error(err);
     }
   };
 
-  useEffect(() => {
-    initializeSocket(props);
-    fetchNotificationStatus();
-  }, [props]);
-
-
-  const updateNotificationStatus = async() => {
+  const fetchNotificationStatus = async() => {
     try {
-      await apiv3Post('/in-app-notification/read');
-      setCount(0);
+      // const res = await apiv3Get('/in-app-notification/status');
+      // const { count } = res.data;
+      if (inAppNotificationStatusData != null) {
+        console.log('inAppNotificationStatusData', inAppNotificationStatusData);
+        const { count } = inAppNotificationStatusData;
+        setCount(count);
+      }
     }
     catch (err) {
       logger.error(err);
     }
   };
 
+  useEffect(() => {
+    initializeSocket(props);
+    fetchNotificationStatus();
+  }, [props]);
+
+
   const toggleDropdownHandler = () => {
     if (!isOpen && count > 0) {
       updateNotificationStatus();

packages/app/src/stores/in-app-notification.ts

@@ -13,3 +13,12 @@ export const useSWRxInAppNotifications = <Data, Error>(
     endpoint => apiv3Get(endpoint, { limit, offset, status }).then(response => response.data),
   );
 };
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useSWRxInAppNotificationStatus = <Data, Error>
+  (): SWRResponse<{ count: number }, Error> => {
+  return useSWR(
+    ['/in-app-notification/status'],
+    endpoint => apiv3Get(endpoint).then(response => response.data),
+  );
+};