Merge pull request #4633 from weseek/imprv/80940-change-notification-status-read-new

change notification status OPEND

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

@@ -6,7 +6,6 @@ import { PageUpdateNotification, PageCommentNotification } from './NotificationC
 
 interface Props {
   notification: IInAppNotification
-  onClick: any
 }
 
 export const InAppNotification = (props: Props): JSX.Element => {
@@ -63,9 +62,9 @@ export const InAppNotification = (props: Props): JSX.Element => {
     const action: string = notification.action;
     switch (action) {
       case 'PAGE_UPDATE':
-        return <PageUpdateNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+        return <PageUpdateNotification {...propsNew} />;
       case 'COMMENT_CREATE':
-        return <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+        return <PageCommentNotification {...propsNew} />;
       default:
         return <></>;
     }

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

@@ -23,17 +23,6 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
 
   const notifications = inAppNotificationData.docs;
 
-  const notificationClickHandler = async(notification: Notification) => {
-    try {
-      // await this.props.crowi.apiPost('/notification.open', { id: notification._id });
-      // jump to target page
-      // window.location.href = notification.target.path;
-    }
-    catch (err) {
-      // logger.error(err);
-    }
-  };
-
   const RenderEmptyInAppNotification = (): JSX.Element => {
     return (
       // TODO: apply i18n by #78569
@@ -48,7 +37,7 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
     const notificationList = notifications.map((notification: IInAppNotification) => {
       return (
         <div className="d-flex flex-row" key={notification._id}>
-          <InAppNotification notification={notification} onClick={notificationClickHandler} />
+          <InAppNotification notification={notification} />
         </div>
       );
     });

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

@@ -1,27 +1,39 @@
 import React from 'react';
 import { PagePathLabel } from '@growi/ui';
 import { IInAppNotification } from '../../interfaces/in-app-notification';
-
+import { apiv3Post } from '../../client/util/apiv3-client';
 import FormattedDistanceDate from '../FormattedDistanceDate';
 
 interface Props {
   actionUsers: string
   notification: IInAppNotification
-  onClick: () => void
 }
 
+
+const notificationClickHandler = async(notification: IInAppNotification) => {
+  try {
+    await apiv3Post('/in-app-notification/open', { id: notification._id });
+
+    // jump to target page
+    // window.location.href = notification.target.path;
+  }
+  catch (err) {
+    // logger.error(err);
+  }
+};
+
 export const PageCommentNotification = (props: Props): JSX.Element => {
 
   const pagePath = { path: props.notification.target.path };
 
   return (
-    <>
+    <div onClick={() => notificationClickHandler(props.notification)}>
       <div>
         <b>{props.actionUsers}</b> commented on  <PagePathLabel page={pagePath} />
       </div>
       <i className="fa fa-comment-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
-    </>
+    </div>
   );
 };
 
@@ -30,12 +42,12 @@ export const PageUpdateNotification = (props: Props): JSX.Element => {
   const pagePath = { path: props.notification.target.path };
 
   return (
-    <>
+    <div onClick={() => notificationClickHandler(props.notification)}>
       <div>
         <b>{props.actionUsers}</b> page updated on <PagePathLabel page={pagePath} />
       </div>
       <i className="fa fa-file-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
-    </>
+    </div>
   );
 };

packages/app/src/interfaces/has-object-id.ts

@@ -0,0 +1,3 @@
+export type HasObjectId = {
+  _id: string,
+};

packages/app/src/server/routes/apiv3/in-app-notification.ts

@@ -89,7 +89,7 @@ module.exports = (crowi) => {
     const id = req.body.id;
 
     try {
-      const notification = await InAppNotification.open(user, id);
+      const notification = await inAppNotificationService.open(user, id);
       const result = { notification };
       return res.apiv3(result);
     }

packages/app/src/server/service/in-app-notification.ts

@@ -2,10 +2,12 @@ import { Types } from 'mongoose';
 import { subDays } from 'date-fns';
 import Crowi from '../crowi';
 import {
-  InAppNotification, InAppNotificationDocument, STATUS_UNREAD, STATUS_UNOPENED,
+  InAppNotification, InAppNotificationDocument, STATUS_UNREAD, STATUS_UNOPENED, STATUS_OPENED,
 } from '~/server/models/in-app-notification';
 import { ActivityDocument } from '~/server/models/activity';
 
+import { IUser } from '~/interfaces/user';
+import { HasObjectId } from '~/interfaces/has-object-id';
 import loggerFactory from '~/utils/logger';
 import { RoomPrefix, getRoomNameWithId } from '../util/socket-io-helpers';
 
@@ -110,6 +112,15 @@ export default class InAppNotificationService {
     return;
   };
 
+  open = async function(user: IUser & HasObjectId, id: Types.ObjectId): Promise<void> {
+    const query = { _id: id, user: user._id };
+    const parameters = { status: STATUS_OPENED };
+    const options = { new: true };
+
+    await InAppNotification.findOneAndUpdate(query, parameters, options);
+    return;
+  }
+
   getUnreadCountByUser = async function(user: Types.ObjectId): Promise<number| undefined> {
     const query = { user, status: STATUS_UNREAD };