remove id property from IInAppNotification and add HasObjectId instead

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

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 
 import { UserPicture, PagePathLabel } from '@growi/ui';
 import { IInAppNotification } from '~/interfaces/in-app-notification';
+import { HasObjectId } from '~/interfaces/has-object-id';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import FormattedDistanceDate from '../FormattedDistanceDate';
 
@@ -11,7 +12,7 @@ const logger = loggerFactory('growi:InAppNotificationElm');
 
 
 interface Props {
-  notification: IInAppNotification
+  notification: IInAppNotification & HasObjectId
 }
 
 const InAppNotificationElm = (props: Props): JSX.Element => {

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

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
 
 import { useTranslation } from 'react-i18next';
-import { IInAppNotification, PaginateResult } from '../../interfaces/in-app-notification';
+import { IInAppNotification, PaginateResult } from '~/interfaces/in-app-notification';
+import { HasObjectId } from '~/interfaces/has-object-id';
 import InAppNotificationElm from './InAppNotificationElm';
 
 
@@ -26,7 +27,7 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
   const notifications = inAppNotificationData.docs;
 
   const renderInAppNotificationList = () => {
-    const inAppNotificationList = notifications.map((notification: IInAppNotification) => {
+    const inAppNotificationList = notifications.map((notification: IInAppNotification & HasObjectId) => {
       return (
         <div className="d-flex flex-row" key={notification._id}>
           <InAppNotificationElm notification={notification} />

packages/app/src/interfaces/in-app-notification.ts

@@ -3,7 +3,6 @@ import { IUser } from './user';
 import { IPage } from './page';
 
 export interface IInAppNotification {
-  _id: string
   user: string
   targetModel: 'Page'
   target: IPage