change window location when notification clicked

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

@@ -6,7 +6,7 @@ import { PageUpdateNotification, PageCommentNotification } from './NotificationC
 
 interface Props {
   notification: IInAppNotification
-  onClick: any
+  // onClick: any
 }
 
 export const InAppNotification = (props: Props): JSX.Element => {
@@ -55,6 +55,19 @@ export const InAppNotification = (props: Props): JSX.Element => {
     );
   };
 
+  const notificationClickHandler = async(notification: IInAppNotification) => {
+    console.log('notificationClickHandler');
+
+    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 renderInAppNotificationContent = (): JSX.Element => {
     const propsNew = {
       actionUsers: getActionUsers(),
@@ -63,9 +76,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,16 +23,18 @@ 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 notificationClickHandler = async(notification: IInAppNotification) => {
+  //   console.log('notificationClickHandler');
+
+  //   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 (
@@ -48,7 +50,8 @@ 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} onClick={notificationClickHandler} /> */}
+          <InAppNotification notification={notification} />
         </div>
       );
     });

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

@@ -10,18 +10,32 @@ interface Props {
   onClick: () => void
 }
 
+// const notificationClickHandler = async(notification: IInAppNotification) => {
+const notificationClickHandler = async(pagePath) => {
+  console.log('notificationClickHandler');
+
+  try {
+    // await this.props.crowi.apiPost('/notification.open', { id: notification._id });
+    // jump to target page
+    window.location.href = pagePath;
+  }
+  catch (err) {
+    // logger.error(err);
+  }
+};
+
 export const PageCommentNotification = (props: Props): JSX.Element => {
 
   const pagePath = { path: props.notification.target.path };
 
   return (
-    <>
+    <div onClick={() => notificationClickHandler(pagePath.path)}>
       <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 +44,12 @@ export const PageUpdateNotification = (props: Props): JSX.Element => {
   const pagePath = { path: props.notification.target.path };
 
   return (
-    <>
+    <div onClick={() => notificationClickHandler(pagePath.path)}>
       <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>
   );
 };