add props isLoaded

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

@@ -1,10 +1,13 @@
 import React, { FC, useState, useEffect } from 'react';
 
 import AppContainer from '../../client/services/AppContainer';
+import loggerFactory from '~/utils/logger';
 
 import InAppNotificationContents from './InAppNotificationContents';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
+const logger = loggerFactory('growi:ALlInAppnotification');
+
 type Props = {
   appContainer: AppContainer,
 
@@ -13,31 +16,28 @@ type Props = {
 const AllInAppNotifications: FC<Props> = (props: Props) => {
   const { appContainer } = props;
   const [notifications, setNotifications] = useState([]);
-  // const [isLoaded, setIsLoaded] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffect(() => {
     fetchNotificationList();
   }, []);
 
 
-  /**
-    * TODO: Fetch notification list by GW-7473
-    */
   const fetchNotificationList = async() => {
     const limit = 6;
     try {
       const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
 
       setNotifications(paginationResult.data.docs);
-      // setIsLoaded(true);
+      setIsLoaded(true);
     }
     catch (err) {
-      // logger.error(err);
+      logger.error(err);
     }
   };
 
   return (
-    <InAppNotificationContents notifications={notifications} />
+    <InAppNotificationContents notifications={notifications} isLoaded={isLoaded} />
   );
 };
 

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

@@ -5,6 +5,7 @@ import { InAppNotification } from './InAppNotification';
 
 type Props = {
   notifications: Array<IInAppNotification>;
+  isLoaded: boolean;
 };
 
 const InAppNotificationContents: FC<Props> = (props: Props) => {
@@ -52,9 +53,9 @@ const InAppNotificationContents: FC<Props> = (props: Props) => {
   };
 
   const InAppNotificationContents = (): JSX.Element => {
-    // if (!isLoaded) {
-    //   return <RenderUnLoadedInAppNotification />;
-    // }
+    if (!props.isLoaded) {
+      return <RenderUnLoadedInAppNotification />;
+    }
     return <RenderInAppNotificationList />;
   };
 

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

@@ -103,7 +103,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
         </button>
       </DropdownToggle>
       <DropdownMenu className="px-2" right>
-        <InAppNotificationContents notifications={notifications} />
+        <InAppNotificationContents notifications={notifications} isLoaded={isLoaded} />
         <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>