wip

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

@@ -6,7 +6,7 @@ import { HasObjectId } from '~/interfaces/has-object-id';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import FormattedDistanceDate from '../FormattedDistanceDate';
 
-import { renderHogeModelNotification } from './renderTargetModel/page';
+import { RenderPageModelNotification } from './renderTargetModel/page';
 
 interface Props {
   notification: IInAppNotification & HasObjectId
@@ -57,16 +57,16 @@ const InAppNotificationElm = (props: Props): JSX.Element => {
     );
   };
 
-  const renderNotificationDate = (): JSX.Element => {
-    return (
-      <FormattedDistanceDate
-        id={notification._id}
-        date={notification.createdAt}
-        isShowTooltip={false}
-        differenceForAvoidingFormat={Number.POSITIVE_INFINITY}
-      />
-    );
-  };
+  // const renderNotificationDate = (): JSX.Element => {
+  //   return (
+  //     <FormattedDistanceDate
+  //       id={notification._id}
+  //       date={notification.createdAt}
+  //       isShowTooltip={false}
+  //       differenceForAvoidingFormat={Number.POSITIVE_INFINITY}
+  //     />
+  //   );
+  // };
 
   const actionUsers = getActionUsers();
 
@@ -108,35 +108,35 @@ const InAppNotificationElm = (props: Props): JSX.Element => {
       actionIcon = '';
   }
 
-  // Change the display for each TargetModel
-  const RenderPageModelNotification = (): JSX.Element => {
-
-    const snapshot = JSON.parse(notification.snapshot);
-    const pagePath = { path: snapshot.path };
-
-    const notificationClickHandler = useCallback(() => {
-      // set notification status "OPEND"
-      apiv3Post('/in-app-notification/open', { id: notification._id });
-
-      // jump to target page
-      const targetPagePath = notification.target?.path;
-      if (targetPagePath != null) {
-        window.location.href = targetPagePath;
-      }
-    }, []);
-
-    return (
-      <div className="p-2">
-        <div onClick={notificationClickHandler}>
-          <div>
-            <b>{actionUsers}</b> {actionMsg} <PagePathLabel page={pagePath} />
-          </div>
-          <i className={`${actionIcon} mr-2`} />
-          {renderNotificationDate()}
-        </div>
-      </div>
-    );
-  };
+  // // Change the display for each TargetModel
+  // const RenderPageModelNotification = (): JSX.Element => {
+
+  //   const snapshot = JSON.parse(notification.snapshot);
+  //   const pagePath = { path: snapshot.path };
+
+  //   const notificationClickHandler = useCallback(() => {
+  //     // set notification status "OPEND"
+  //     apiv3Post('/in-app-notification/open', { id: notification._id });
+
+  //     // jump to target page
+  //     const targetPagePath = notification.target?.path;
+  //     if (targetPagePath != null) {
+  //       window.location.href = targetPagePath;
+  //     }
+  //   }, []);
+
+  //   return (
+  //     <div className="p-2">
+  //       <div onClick={notificationClickHandler}>
+  //         <div>
+  //           <b>{actionUsers}</b> {actionMsg} <PagePathLabel page={pagePath} />
+  //         </div>
+  //         <i className={`${actionIcon} mr-2`} />
+  //         {renderNotificationDate()}
+  //       </div>
+  //     </div>
+  //   );
+  // };
 
   return (
     <div className="dropdown-item d-flex flex-row mb-3">
@@ -144,11 +144,14 @@ const InAppNotificationElm = (props: Props): JSX.Element => {
         <span className={`${notification.status === 'UNOPENED' ? 'grw-unopend-notification' : 'ml-2'} rounded-circle mr-3`}></span>
         {renderActionUserPictures()}
       </div>
-      {/* test */}
-      {renderHogeModelNotification()}
-      {/* {notification.targetModel === 'Page' && (
-        RenderPageModelNotification()
-      )} */}
+      {notification.targetModel === 'Page' && (
+        <RenderPageModelNotification
+          notification={notification}
+          actionMsg={actionMsg}
+          actionIcon={actionIcon}
+          actionUsers={actionUsers}
+        />
+      )}
     </div>
   );
 };

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

@@ -1,15 +1,51 @@
-import React from 'react';
-
-export const createSnapshot = (page): string => {
-  return JSON.stringify({
-    path: page.path,
-    creator: page.creator,
-    lastUpdateUser: page.lastUpdateUser,
-  });
-};
+import React, { useCallback } from 'react';
+import { PagePathLabel } from '@growi/ui';
+import { apiv3Post } from '~/client/util/apiv3-client';
+
+import { IInAppNotification } from '~/interfaces/in-app-notification';
+import { HasObjectId } from '~/interfaces/has-object-id';
+import FormattedDistanceDate from '../../FormattedDistanceDate';
+
+interface Props {
+  notification: IInAppNotification & HasObjectId
+  actionMsg: string
+  actionIcon: string
+  actionUsers: string
+}
+
+export const RenderPageModelNotification = (props: Props): JSX.Element => {
+  const {
+    notification, actionMsg, actionIcon, actionUsers,
+  } = props;
+
+  const snapshot = JSON.parse(notification.snapshot);
+  const pagePath = { path: snapshot.path };
+
+  const notificationClickHandler = useCallback(() => {
+    // set notification status "OPEND"
+    apiv3Post('/in-app-notification/open', { id: notification._id });
+
+    // jump to target page
+    const targetPagePath = notification.target?.path;
+    if (targetPagePath != null) {
+      window.location.href = targetPagePath;
+    }
+  }, []);
 
-export const renderHogeModelNotification = (): JSX.Element => {
   return (
-    <div>Hello</div>
+    <div className="p-2">
+      <div onClick={notificationClickHandler}>
+        <div>
+          <b>{actionUsers}</b> {actionMsg} <PagePathLabel page={pagePath} />
+        </div>
+        <i className={`${actionIcon} mr-2`} />
+        <FormattedDistanceDate
+          id={notification._id}
+          date={notification.createdAt}
+          isShowTooltip={false}
+          differenceForAvoidingFormat={Number.POSITIVE_INFINITY}
+        />
+      </div>
+    </div>
   );
 };

packages/app/src/server/service/comment.ts

@@ -4,7 +4,7 @@ import loggerFactory from '../../utils/logger';
 import ActivityDefine from '../util/activityDefine';
 import Crowi from '../crowi';
 
-import { createSnapshot } from '../../components/InAppNotification/renderTargetModel/page';
+// import { createSnapshot } from '../../components/InAppNotification/renderTargetModel/page';
 
 const logger = loggerFactory('growi:service:CommentService');
 
@@ -91,7 +91,13 @@ class CommentService {
   };
 
   private createAndSendNotifications = async function(activity, page) {
-    const snapshot = createSnapshot(page);
+    // const snapshot = createSnapshot(page);
+
+    const snapshot = JSON.stringify({
+      path: page.path,
+      creator: page.creator,
+      lastUpdateUser: page.lastUpdateUser,
+    });
 
     // Get user to be notified
     let targetUsers: Types.ObjectId[] = [];

packages/app/src/server/service/page.js

@@ -3,7 +3,7 @@ import isThisHour from 'date-fns/isThisHour/index.js';
 import loggerFactory from '~/utils/logger';
 import ActivityDefine from '../util/activityDefine';
 
-import { createSnapshot } from '../../components/InAppNotification/renderTargetModel/page';
+// import { createSnapshot } from '../../components/InAppNotification/renderTargetModel/page';
 
 const mongoose = require('mongoose');
 const escapeStringRegexp = require('escape-string-regexp');
@@ -814,7 +814,13 @@ class PageService {
 
     const { activityService, inAppNotificationService } = this.crowi;
 
-    const snapshot = createSnapshot(page);
+    // const snapshot = createSnapshot(page);
+
+    const snapshot = JSON.stringify({
+      path: page.path,
+      creator: page.creator,
+      lastUpdateUser: page.lastUpdateUser,
+    });
 
     // Create activity
     const parameters = {