change props data

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

@@ -18,43 +18,43 @@ const AllInAppNotifications: FC<Props> = (props: Props) => {
   const { appContainer } = props;
   // const [notifications, setNotifications] = useState([]);
   const limit = 6;
-  const { data: inAppNotificationdata, error, mutate } = useSWRxInAppNotifications(limit);
   console.log('useSWRxInAppNotification_notifications', inAppNotificationdata);
+  const { data: inAppNotificationData, error, mutate } = useSWRxInAppNotifications(limit);
 
   const [isLoaded, setIsLoaded] = useState(false);
 
 
-  useEffect(() => {
-    fetchNotificationList();
-  }, []);
+  // useEffect(() => {
+  //   fetchNotificationList();
+  // }, []);
 
 
-  const fetchNotificationList = async() => {
-    // const limit = 6;
-    try {
-      // const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
+  // const fetchNotificationList = async() => {
+  // const limit = 6;
+  // try {
+  // const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
 
-      // setNotifications(paginationResult.data.docs);
-      setIsLoaded(true);
-    }
-    catch (err) {
-      logger.error(err);
-    }
-  };
+  // setNotifications(paginationResult.data.docs);
+  //     setIsLoaded(true);
+  //   }
+  //   catch (err) {
+  //     logger.error(err);
+  //   }
+  // };
 
-  if (inAppNotificationdata == null) {
-    return (
-      <div className="wiki">
-        <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
-        </div>
-      </div>
-    );
-  }
+  // if (inAppNotificationData == null) {
+  //   return (
+  //     <div className="wiki">
+  //       <div className="text-muted text-center">
+  //         <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+  //       </div>
+  //     </div>
+  //   );
+  // }
 
-  const notifications = inAppNotificationdata.docs;
+  // const notifications = inAppNotificationData.docs;
   return (
-    <InAppNotificationList notifications={notifications} isLoaded={isLoaded} />
+    <InAppNotificationList inAppNotificationData={inAppNotificationData} />
   );
 };
 

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

@@ -8,6 +8,7 @@ import AppContainer from '../../client/services/AppContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import InAppNotificationList from './InAppNotificationList';
 import SocketIoContainer from '../../client/services/SocketIoContainer';
+import { useSWRxInAppNotifications } from '../../stores/in-app-notification';
 
 const logger = loggerFactory('growi:InAppNotificationDropdown');
 
@@ -21,8 +22,10 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
 
   const [count, setCount] = useState(0);
   const [isLoaded, setIsLoaded] = useState(false);
-  const [notifications, setNotifications] = useState([]);
+  // const [notifications, setNotifications] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
+  const limit = 6;
+  const { data: inAppNotificationData, error, mutate } = useSWRxInAppNotifications(limit);
 
   useEffect(() => {
     initializeSocket(props);
@@ -65,9 +68,9 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
   const fetchNotificationList = async() => {
     const limit = 6;
     try {
-      const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
+      // const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
 
-      setNotifications(paginationResult.data.docs);
+      // setNotifications(paginationResult.data.docs);
       setIsLoaded(true);
     }
     catch (err) {
@@ -95,6 +98,9 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
 
   const badge = count > 0 ? <span className="badge badge-pill badge-danger grw-notification-badge">{count}</span> : '';
 
+
+  // const notifications = inAppNotificationData.docs;
+
   return (
     <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
       <DropdownToggle tag="a">
@@ -103,7 +109,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
         </button>
       </DropdownToggle>
       <DropdownMenu className="px-2" right>
-        <InAppNotificationList notifications={notifications} isLoaded={isLoaded} />
+        <InAppNotificationList inAppNotificationData={inAppNotificationData} />
         <DropdownItem divider />
         {/* TODO: Able to show all notifications by #79317 */}
         <a className="dropdown-item d-flex justify-content-center" href="/me/all-in-app-notifications">See All</a>

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

@@ -1,15 +1,29 @@
 import React, { FC } from 'react';
 
+import { PaginateResult } from 'mongoose';
 import { IInAppNotification } from '../../interfaces/in-app-notification';
 import { InAppNotification } from './InAppNotification';
 
 type Props = {
-  notifications: Array<IInAppNotification>;
-  isLoaded: boolean;
+  inAppNotificationData: PaginateResult<IInAppNotification>;
+  // isLoaded: boolean;
 };
 
 const InAppNotificationList: FC<Props> = (props: Props) => {
-  const { notifications } = props;
+  const { inAppNotificationData } = props;
+  // console.log('notifications_InAppNotificationList', notifications);
+
+  if (inAppNotificationData == null) {
+    return (
+      <div className="wiki">
+        <div className="text-muted text-center">
+          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        </div>
+      </div>
+    );
+  }
+
+  const notifications = inAppNotificationData.docs;
 
   const notificationClickHandler = async(notification: Notification) => {
     try {
@@ -51,9 +65,9 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
   };
 
 
-  if (!props.isLoaded) {
-    return <RenderUnLoadedInAppNotification />;
-  }
+  // if (!props.isLoaded) {
+  //   return <RenderUnLoadedInAppNotification />;
+  // }
   return <RenderInAppNotificationList />;
 };