create PagePath component

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

@@ -3,6 +3,8 @@ import { InAppNotification as IInAppNotification } from '../../interfaces/in-app
 
 import FormattedDistanceDate from '../FormattedDistanceDate';
 
+import { PagePath } from './PagePath';
+
 interface Props {
   actionUsers: string
   notification: IInAppNotification
@@ -14,7 +16,7 @@ export const PageCommentCreatedNotification = (props: Props): JSX.Element => {
   return (
     <>
       <div>
-        <b>{props.actionUsers}</b> commented on {props.notification.target.path}
+        <b>{props.actionUsers}</b> commented on <PagePath notification={props.notification} />
       </div>
       <i className="fa fa-comment-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
@@ -27,7 +29,7 @@ export const PageCommentUpdatedNotification = (props: Props): JSX.Element => {
   return (
     <>
       <div>
-        <b>{props.actionUsers}</b> comment updated on {props.notification.target.path}
+        <b>{props.actionUsers}</b> comment updated on <PagePath notification={props.notification} />
       </div>
       <i className="fa fa-comment-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />
@@ -40,7 +42,7 @@ export const PageUpdatedNotification = (props: Props): JSX.Element => {
   return (
     <>
       <div>
-        <b>{props.actionUsers}</b> page updated on {props.notification.target.path}
+        <b>{props.actionUsers}</b> page updated on <PagePath notification={props.notification} />
       </div>
       <i className="fa fa-file-o mr-2" />
       <FormattedDistanceDate id={props.notification._id} date={props.notification.createdAt} isShowTooltip={false} />

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

@@ -0,0 +1,25 @@
+
+import React from 'react';
+import { pagePathUtils } from '@growi/core';
+
+import { InAppNotification as IInAppNotification } from '../../interfaces/in-app-notification';
+
+const { path2name } = pagePathUtils;
+
+interface Props {
+  notification: IInAppNotification
+}
+
+export const PagePath = (props: Props): JSX.Element => {
+  const { notification } = props;
+  const pagePath = notification.target.path;
+  const shortPath = path2name(pagePath);
+  const pathPrefix = pagePath.slice(0, -shortPath.length);
+
+  return (
+    <>
+      {pathPrefix}<strong>{shortPath}</strong>
+    </>
+  );
+
+};