Merge pull request #8818 from weseek/fix/bookmark-for-deleted-pages-2

fix: BookmarkItem occures an error when the related page has been deleted 2

apps/app/src/components/Bookmarks/BookmarkFolderMenu.tsx

@@ -67,7 +67,7 @@ export const BookmarkFolderMenu = (props: BookmarkFolderMenuProps): JSX.Element
     if (isOpen && bookmarkFolders != null) {
       bookmarkFolders.forEach((bookmarkFolder) => {
         bookmarkFolder.bookmarks.forEach((bookmark) => {
-          if (bookmark.page._id === pageId) {
+          if (bookmark.page?._id === pageId) {
             setSelectedItem(bookmarkFolder._id);
           }
         });

apps/app/src/components/Bookmarks/BookmarkFolderTree.tsx

@@ -121,9 +121,8 @@ export const BookmarkFolderTree: React.FC<Props> = (props: Props) => {
           );
         })}
         {userBookmarks?.map(userBookmark => (
-          <div key={userBookmark._id} className="grw-foldertree-item-container grw-root-bookmarks">
+          <div key={userBookmark?._id} className="grw-foldertree-item-container grw-root-bookmarks">
             <BookmarkItem
-              key={userBookmark._id}
               isReadOnlyUser={!!isReadOnlyUser}
               isOperable={props.isOperable}
               bookmarkedPage={userBookmark}

apps/app/src/interfaces/bookmark-info.ts

@@ -9,7 +9,7 @@ export interface IBookmarkInfo {
 
 export interface BookmarkedPage {
   _id: string,
-  page: IPageHasId,
+  page: IPageHasId | null,
   user: Ref<IUser>,
   createdAt: Date,
 }

apps/app/src/stores/bookmark.ts

@@ -1,11 +1,12 @@
 import type { IUser, IPageHasId } from '@growi/core';
-import useSWR, { SWRResponse } from 'swr';
+import type { SWRResponse } from 'swr';
+import useSWR from 'swr';
 import useSWRImmutable from 'swr/immutable';
 import useSWRMutation, { type SWRMutationResponse } from 'swr/mutation';
 
 
 import { apiv3Get } from '../client/util/apiv3-client';
-import { IBookmarkInfo } from '../interfaces/bookmark-info';
+import type { IBookmarkInfo } from '../interfaces/bookmark-info';
 
 import { useCurrentUser } from './context';
 
@@ -16,32 +17,24 @@ export const useSWRxBookmarkedUsers = (pageId: string | null): SWRResponse<IUser
   );
 };
 
-export const useSWRxUserBookmarks = (userId: string | null): SWRResponse<IPageHasId[], Error> => {
+export const useSWRxUserBookmarks = (userId: string | null): SWRResponse<(IPageHasId | null)[], Error> => {
   return useSWRImmutable(
     userId != null ? `/bookmarks/${userId}` : null,
     endpoint => apiv3Get(endpoint).then((response) => {
       const { userRootBookmarks } = response.data;
-      return userRootBookmarks.map((item) => {
-        return {
-          ...item.page,
-        };
-      });
+      return userRootBookmarks.map(item => item.page); // page will be null if the page is deleted
     }),
   );
 };
 
-export const useSWRMUTxCurrentUserBookmarks = (): SWRMutationResponse<IPageHasId[], Error> => {
+export const useSWRMUTxCurrentUserBookmarks = (): SWRMutationResponse<(IPageHasId | null)[], Error> => {
   const { data: currentUser } = useCurrentUser();
 
   return useSWRMutation(
     currentUser != null ? `/bookmarks/${currentUser?._id}` : null,
     endpoint => apiv3Get(endpoint).then((response) => {
       const { userRootBookmarks } = response.data;
-      return userRootBookmarks.map((item) => {
-        return {
-          ...item.page,
-        };
-      });
+      return userRootBookmarks.map(item => item.page); // page will be null if the page is deleted
     }),
   );
 };