Merge pull request #4519 from weseek/imprv/#78991-show-notifications-on-popup

Imprv/#78991 show notifications on popup

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

@@ -16,7 +16,7 @@ export const InAppNotification = (props: Props): JSX.Element => {
   const getActionUsers = () => {
     const latestActionUsers = notification.actionUsers.slice(0, 3);
     const latestUsers = latestActionUsers.map((user) => {
-      return `@${user}`;
+      return `@${user.name}`;
     });
 
     let actionedUsers = '';

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

@@ -7,10 +7,7 @@ import loggerFactory from '~/utils/logger';
 import AppContainer from '../../client/services/AppContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
-// import DropdownMenu from './InAppNotificationDropdown/DropdownMenu';
-// import Crowi from 'client/util/Crowi'
-// import { Notification } from 'client/types/crowi'
-// import { InAppNotification } from './InAppNotification';
+import { InAppNotification } from './InAppNotification';
 import SocketIoContainer from '../../client/services/SocketIoContainer';
 
 const logger = loggerFactory('growi:InAppNotificationDropdown');
@@ -71,7 +68,6 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     const limit = 6;
     try {
       const paginationResult = await appContainer.apiv3Get('/in-app-notification/list', { limit });
-      console.log('paginationResult', paginationResult);
 
       setNotifications(paginationResult.data.docs);
       setIsLoaded(true);
@@ -134,19 +130,18 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
     }
     const notificationList = notifications.map((notification: IInAppNotification) => {
       return (
-        // temporaly notification list. need to delete by #79077
-        <div key={notification._id}>action: {notification.action} </div>
-        // use this component to show notification list
-        // <InAppNotification key={notification._id} notification={notification} onClick={notificationClickHandler} />
+        <div className="my-2">
+          <InAppNotification key={notification._id} notification={notification} onClick={notificationClickHandler} />
+        </div>
       );
     });
     return <>{notificationList}</>;
   };
 
   const InAppNotificationContents = (): JSX.Element => {
-    // if (isLoaded === false) {
-    //   return <RenderUnLoadedInAppNotification />;
-    // }
+    if (!isLoaded) {
+      return <RenderUnLoadedInAppNotification />;
+    }
     return <RenderInAppNotificationList />;
   };
 

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

@@ -8,15 +8,11 @@ interface Props {
   onClick: () => void
 }
 export const PageCommentNotification = (props: Props) => {
-  console.log('propsHOge', props);
-
 
   return (
-    <span>
-      {/* TODO: show page path by #78706 */}
-      <b>{props.actionUsers}</b> commented on {props.notification.target}
-      {/* <PagePath page={notification.target} /> */}
-    </span>
+    <>
+      <b>{props.actionUsers}</b> commented on {props.notification.target.path}
+    </>
   );
 
 };