Implement update bookmark Info on bookmark delete

https://youtrack.weseek.co.jp/issue/GW-7910
- Remove selected-bookmark-folder route
- Implement useSWRBookmarkInfo in Page tree item component
- Update bookmark info on delete bookmark folder
- Adjust selected bookmark folder item based on current page
- Remove onToggle function props of BookmarkFolderMenu

packages/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -11,7 +11,9 @@ import CountBadge from '~/components/Common/CountBadge';
 import FolderIcon from '~/components/Icons/FolderIcon';
 import TriangleIcon from '~/components/Icons/TriangleIcon';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
+import { useSWRBookmarkInfo } from '~/stores/bookmark';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
+import { useSWRxCurrentPage } from '~/stores/page';
 
 import BookmarkFolderItemControl from './BookmarkFolderItemControl';
 import BookmarkFolderNameInput from './BookmarkFolderNameInput';
@@ -37,6 +39,8 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
   const [isRenameAction, setIsRenameAction] = useState<boolean>(false);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
   const [isDeleteFolderModalShown, setIsDeleteFolderModalShown] = useState<boolean>(false);
+  const { data: currentPage } = useSWRxCurrentPage();
+  const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
 
   const getChildCount = useCallback((): number => {
     if (currentChildren != null && currentChildren.length > children.length) {
@@ -113,12 +117,13 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
       await apiv3Delete(`/bookmark-folder/${folderId}`);
       setIsDeleteFolderModalShown(false);
       loadParent();
+      mutateBookmarkInfo();
       toastSuccess(t('toaster.delete_succeeded', { target: t('bookmark_folder.bookmark_folder') }));
     }
     catch (err) {
       toastError(err);
     }
-  }, [folderId, loadParent, t]);
+  }, [folderId, loadParent, mutateBookmarkInfo, t]);
 
   const onClickPlusButton = useCallback(async(e) => {
     e.stopPropagation();

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

@@ -33,26 +33,19 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const { data: currentPage } = useSWRxCurrentPage();
   const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
 
-  const getSelectedFolder = useCallback(async() => {
-    try {
-      const result = await apiv3Get(`/bookmark-folder/selected-bookmark-folder/${currentPage?._id}`);
-      const { selectedFolder } = result.data;
-      if (selectedFolder != null) {
-        setSelectedItem(selectedFolder);
-      }
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }, [currentPage]);
-
   const onClickNewBookmarkFolder = useCallback(() => {
     setIsCreateAction(true);
   }, []);
 
   useEffect(() => {
-    getSelectedFolder();
-  }, [getSelectedFolder]);
+    bookmarkFolders?.forEach((bookmarkFolder) => {
+      bookmarkFolder.bookmarks.forEach((bookmark) => {
+        if (bookmark.page._id === currentPage?._id) {
+          setSelectedItem(bookmarkFolder._id);
+        }
+      });
+    });
+  }, [bookmarkFolders, currentPage?._id]);
 
   const isBookmarkFolderExists = useCallback((): boolean => {
     if (bookmarkFolders && bookmarkFolders.length > 0) {
@@ -134,7 +127,6 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
 
   return (
     <UncontrolledDropdown
-      onToggle={getSelectedFolder}
       direction={ isBookmarkFolderExists() ? 'up' : 'down' }
       className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}>
       {children}

packages/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -37,19 +37,6 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const { data: currentPage } = useSWRxCurrentPage();
   const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
 
-  const getSelectedFolder = useCallback(async() => {
-    try {
-      const result = await apiv3Get(`/bookmark-folder/selected-bookmark-folder/${currentPage?._id}`);
-      const { selectedFolder } = result.data;
-      if (selectedFolder != null) {
-        setSelectedItem(selectedFolder._id);
-      }
-    }
-    catch (err) {
-      toastError(err);
-    }
-  }, [currentPage]);
-
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
     try {
       await apiv3Post('/bookmark-folder', { name: folderName, parent: item._id });
@@ -66,9 +53,16 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   useEffect(() => {
     if (isOpen) {
       mutateChildFolders();
-      getSelectedFolder();
     }
-  }, [getSelectedFolder, isOpen, mutateChildFolders]);
+    childFolders?.forEach((bookmarkFolder) => {
+      bookmarkFolder.bookmarks.forEach((bookmark) => {
+        if (bookmark.page._id === currentPage?._id) {
+          setSelectedItem(bookmarkFolder._id);
+        }
+      });
+    });
+
+  }, [childFolders, currentPage?._id, isOpen, mutateChildFolders]);
 
   const onClickNewBookmarkFolder = useCallback((e) => {
     e.stopPropagation();

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -17,7 +17,7 @@ import TriangleIcon from '~/components/Icons/TriangleIcon';
 import {
   IPageHasId, IPageInfoAll, IPageToDeleteWithMeta,
 } from '~/interfaces/page';
-import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
+import { useSWRBookmarkInfo, useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import { IPageForPageDuplicateModal } from '~/stores/modal';
 import { useSWRxPageChildren } from '~/stores/page-listing';
 import { usePageTreeDescCountMap } from '~/stores/ui';
@@ -117,6 +117,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
 
   const { data, mutate: mutateChildren } = useSWRxPageChildren(isOpen ? page._id : null);
   const { mutate: mutateCurrentUserBookmarks } = useSWRxCurrentUserBookmarks();
+  const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(page._id);
 
   // descendantCount
   const { getDescCount } = usePageTreeDescCountMap();
@@ -248,6 +249,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     const bookmarkOperation = _newValue ? bookmark : unbookmark;
     await bookmarkOperation(_pageId);
     mutateCurrentUserBookmarks();
+    mutateBookmarkInfo();
   };
 
   const duplicateMenuItemClickHandler = useCallback((): void => {

packages/app/src/server/models/bookmark-folder.ts

@@ -32,7 +32,6 @@ export interface BookmarkFolderModel extends Model<BookmarkFolderDocument>{
   deleteFolderAndChildren(bookmarkFolderId: Types.ObjectId | string): {deletedCount: number}
   updateBookmarkFolder(bookmarkFolderId: string, name: string, parent: string): BookmarkFolderDocument | null
   insertOrUpdateBookmarkedPage(pageId: IPageHasId, userId: Types.ObjectId | string, folderId: string)
-  getSelectedBookmarkFolder(pageId: Types.ObjectId | string): BookmarkFolderDocument | null
 }
 
 const bookmarkFolderSchema = new Schema<BookmarkFolderDocument, BookmarkFolderModel>({
@@ -154,15 +153,5 @@ Promise<BookmarkFolderDocument | null> {
   return bookmarkFolder;
 };
 
-bookmarkFolderSchema.statics.getSelectedBookmarkFolder = async function(pageId: Types.ObjectId | string): Promise<BookmarkFolderDocument | null> {
-
-  const bookmark = await Bookmark.findOne({ page: pageId });
-  if (bookmark != null) {
-    const bookmarkFolder = await this.findOne({ bookmarks: [bookmark._id] }) as unknown as BookmarkFolderDocument;
-    return bookmarkFolder;
-  }
-  return null;
-};
-
 
 export default getOrCreateModel<BookmarkFolderDocument, BookmarkFolderModel>('BookmarkFolder', bookmarkFolderSchema);

packages/app/src/server/routes/apiv3/bookmark-folder.ts

@@ -100,7 +100,7 @@ module.exports = (crowi) => {
 
     try {
       const bookmarkFolder = await BookmarkFolder.insertOrUpdateBookmarkedPage(pageId, userId, folderId);
-      logger.debug('bookmark added to folder created', bookmarkFolder);
+      logger.debug('bookmark added to folder', bookmarkFolder);
       return res.apiv3({ bookmarkFolder });
     }
     catch (err) {
@@ -108,17 +108,6 @@ module.exports = (crowi) => {
     }
   });
 
-  router.get('/selected-bookmark-folder/:pageId', accessTokenParser, loginRequiredStrictly, async(req, res) => {
-    const { pageId } = req.params;
-    try {
-      const selectedFolder = await BookmarkFolder.getSelectedBookmarkFolder(pageId);
-      return res.apiv3({ selectedFolder });
-    }
-    catch (err) {
-      logger.error(err);
-      return res.apiv3Err(err, 500);
-    }
-  });
 
   return router;
 };