Merge branch 'feat/notification' into imprv/80112-serialize-actionUser-securely

# Conflicts:
#	packages/app/src/components/InAppNotification/InAppNotification.tsx
#	packages/app/src/components/InAppNotification/PageCommentInAppNotification.tsx
#	packages/app/src/components/InAppNotification/PageUpdateInAppNotification.tsx

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

@@ -1,10 +1,8 @@
 import React from 'react';
 
 import { UserPicture } from '@growi/ui';
-import { PageCommentInAppNotification } from './PageCommentInAppNotification';
-import { PageUpdateInAppNotification } from './PageUpdateInAppNotification';
 import { IInAppNotification } from '../../interfaces/in-app-notification';
-import FormattedDistanceDate from '../FormattedDistanceDate';
+import { PageUpdateNotification, PageCommentNotification } from './NotificationContent';
 
 interface Props {
   notification: IInAppNotification
@@ -55,10 +53,12 @@ export const InAppNotification = (props: Props): JSX.Element => {
 
   const renderInAppNotificationContent = (): JSX.Element => {
     switch (componentName) {
-      case 'Page:COMMENT':
-        return <PageCommentInAppNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+      // TODO Is the naming of componentName too subtle?
       case 'Page:UPDATE':
-        return <PageUpdateInAppNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+        return <PageUpdateNotification {...propsNew} onClick={props.onClick(props.notification)} />;
+      case 'Page:COMMENT_CREATE':
+      case 'Page:COMMENT_UPDATE':
+        return <PageCommentNotification {...propsNew} onClick={props.onClick(props.notification)} />;
       default:
         return <></>;
     }
@@ -72,13 +72,9 @@ export const InAppNotification = (props: Props): JSX.Element => {
         </div>
         <div className="p-2">
           {renderInAppNotificationContent()}
-          <div>
-            <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
-          </div>
         </div>
       </div>
     </>
   );
 
-
 };

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+
+import FormattedDistanceDate from '../FormattedDistanceDate';
+
+interface Props {
+  actionUsers: string
+  notification: IInAppNotification
+  onClick: () => void
+}
+
+export const PageCommentNotification = (props: Props): JSX.Element => {
+
+  return (
+    <>
+      <div>
+        <b>{props.actionUsers}</b> commented on {props.notification.target.path}
+      </div>
+      <i className="fa fa-comment-o mr-2" />
+      <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
+    </>
+  );
+};
+
+export const PageUpdateNotification = (props: Props): JSX.Element => {
+
+  return (
+    <>
+      <div>
+        <b>{props.actionUsers}</b> page updated on {props.notification.target.path}
+      </div>
+      <i className="fa fa-file-o mr-2" />
+      <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
+    </>
+  );
+
+};