show notification list with dummy data

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

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { PageCommentNotification } from './PageCommentNotification';
+import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+
+interface Props {
+  notification: IInAppNotification
+  onClick: any
+}
+
+export const InAppNotification = (props: Props): JSX.Element => {
+
+  const { notification } = props;
+
+  const getActionUsers = () => {
+    const latestActionUsers = notification.actionUsers.slice(0, 3);
+    const latestUsers = latestActionUsers.map((user) => {
+      return `@${user}`;
+    });
+
+    let actionedUsers = '';
+    const latestUsersCount = latestUsers.length;
+    if (latestUsersCount === 1) {
+      actionedUsers = latestUsers[0];
+    }
+    else if (notification.actionUsers.length >= 4) {
+      actionedUsers = `${latestUsers.slice(0, 2).join(', ')} and ${notification.actionUsers.length - 2} others`;
+    }
+    else {
+      actionedUsers = latestUsers.join(', ');
+    }
+
+    return actionedUsers;
+  };
+
+  // TODO show user image by #78702
+  const getUserImage = () => {
+    // const latestActionUsers = props.notification.actionUsers.slice(0, 3);
+
+    // if (latestActionUsers.length < 1) {
+    // what is this case?
+    //   return '';
+    // }
+
+    // return <UserPicture user={latestActionUsers[0]} />;
+    return;
+  };
+
+  const componentName = `${notification.targetModel}:${notification.action}`;
+  const propsNew = {
+    actionUsers: getActionUsers(),
+    ...props,
+  };
+
+  switch (componentName) {
+    case 'Page:COMMENT':
+      return <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+    default:
+      return <></>;
+  }
+};

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

@@ -4,17 +4,29 @@ import {
 } from 'reactstrap';
 import PropTypes from 'prop-types';
 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 SocketIoContainer from '~/client/services/SocketIoContainer';
+import { InAppNotification } from './InAppNotification';
+import SocketIoContainer from '../../client/services/SocketIoContainer';
 
 
 const InAppNotificationDropdown: FC = (props) => {
 
   const [count, setCount] = useState(0);
   const [isLoaded, setIsLoaded] = useState(false);
-  const [notifications, setNotifications] = useState([]);
+  const [notifications, setNotifications] = useState<IInAppNotification[]>([{
+    // This is dummy notification data. Delete it after fetching notification list by #78557
+    _id: '1',
+    user: 'kaori1',
+    targetModel: 'Page',
+    target: 'hogePage',
+    action: 'COMMENT',
+    status: 'hoge',
+    actionUsers: ['taro', 'yamada'],
+    createdAt: 'hoge',
+  }]);
   const [isOpen, setIsOpen] = useState(false);
 
   useEffect(() => {
@@ -32,10 +44,10 @@ const InAppNotificationDropdown: FC = (props) => {
       console.log('socketData', data);
 
       if (props.me === data.user) {
-        // TODO: Fetch notification status by GW-7473
+        // TODO: Fetch notification status by #78563
         // fetchNotificationList();
 
-        // TODO: Fetch notification list by GW-7473
+        // TODO: Fetch notification list by #78557
         // fetchNotificationStatus();
       }
     });
@@ -43,7 +55,7 @@ const InAppNotificationDropdown: FC = (props) => {
 
 
   /**
-    * TODO: Fetch notification status by GW-7473
+    * TODO: Fetch notification status by #78563
     */
   // async fetchNotificationStatus() {
   //   try {
@@ -96,7 +108,7 @@ const InAppNotificationDropdown: FC = (props) => {
     * TODO: Jump to the page by clicking on the notification by GW-7472
     */
 
-  const handleNotificationOnClick = async(notification: Notification) => {
+  const notificationClickHandler = async(notification: Notification) => {
     try {
       // await this.props.crowi.apiPost('/notification.open', { id: notification._id });
       // jump to target page
@@ -118,30 +130,33 @@ const InAppNotificationDropdown: FC = (props) => {
 
   const RenderEmptyInAppNotification = (): JSX.Element => {
     return (
-      // TODO: apply i18n by GW-7536
+      // TODO: apply i18n by #78569
       <>You had no notifications, yet.</>
     );
   };
 
   // TODO: improve renderInAppNotificationList by GW-7535
   // refer to https://github.com/crowi/crowi/blob/eecf2bc821098d2516b58104fe88fae81497d3ea/client/components/Notification/Notification.tsx
-  const RenderInAppNotificationList = (): JSX.Element => {
-    // notifications.map((notification) =>
-    return (
-      // <Notification key={notification._id} notification={notification} onClick={notificationClickHandler} />)
-      <>fuga</>
-    );
-  };
+  const RenderInAppNotificationList = () => {
+
 
-  function renderInAppNotificationContents(): JSX.Element {
-    if (isLoaded === false) {
-      return <RenderUnLoadedInAppNotification />;
-    }
     if (notifications.length === 0) {
       return <RenderEmptyInAppNotification />;
     }
+    const notificationList = notifications.map((notification: IInAppNotification) => {
+      return (
+        <InAppNotification key={notification._id} notification={notification} onClick={notificationClickHandler} />
+      );
+    });
+    return <>{notificationList}</>;
+  };
+
+  const InAppNotificationContents = (): JSX.Element => {
+    // if (isLoaded === false) {
+    //   return <RenderUnLoadedInAppNotification />;
+    // }
     return <RenderInAppNotificationList />;
-  }
+  };
 
   return (
     <Dropdown className="notification-wrapper" isOpen={isOpen} toggle={toggleDropdownHandler}>
@@ -150,7 +165,7 @@ const InAppNotificationDropdown: FC = (props) => {
         {badge}
       </DropdownToggle>
       <DropdownMenu right>
-        {renderInAppNotificationContents}
+        <InAppNotificationContents />
         <DropdownItem divider />
         {/* TODO: Able to show all notifications by GW-7534 */}
         <a>See All</a>

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+// import PagePath from 'components/PageList/PagePath';
+
+interface Props {
+  actionUsers: string
+  notification: IInAppNotification
+  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>
+  );
+
+};

packages/app/src/components/Navbar/GrowiNavbar.jsx

@@ -7,7 +7,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '~/client/services/NavigationContainer';
 import AppContainer from '~/client/services/AppContainer';
-import InAppNotificationDropdown from '~/components/PageEditor/InAppNotificationDropdown';
+import InAppNotificationDropdown from '../InAppNotification/InAppNotificationDropdown';
 
 
 import GrowiLogo from '../Icons/GrowiLogo';

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

@@ -0,0 +1,11 @@
+// refer types https://github.com/crowi/crowi/blob/eecf2bc821098d2516b58104fe88fae81497d3ea/client/types/crowi.d.ts
+export interface InAppNotification {
+  _id: string
+  user: string
+  targetModel: 'Page'
+  target: any /* Need to set "Page" as a type" */
+  action: 'COMMENT' | 'LIKE'
+  status: string
+  actionUsers: any[] /* Need to set "User[]" as a type" */
+  createdAt: string
+}