Switch selected bookmark folder

https://youtrack.weseek.co.jp/issue/GW-7910
- Add method to get selected bookmark folder based on page id
- Create route to get selected bookmark folder
- Set initial selected bookmark folder
- Set selected folder by  selected-bookamark-folder route
- Replace method to get selected folder in useEffect hook

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

@@ -6,7 +6,7 @@ import {
 } from 'reactstrap';
 
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
-import { apiv3Post } from '~/client/util/apiv3-client';
+import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxCurrentPage } from '~/stores/page';
 
@@ -29,20 +29,26 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const { data: currentPage } = useSWRxCurrentPage();
 
+  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(() => {
-    bookmarkFolders?.forEach((bookmarkFolder) => {
-      const bookmark = bookmarkFolder.bookmarks.filter((bookmark) => {
-        return bookmark.page._id === currentPage?._id;
-      });
-      if (bookmark != null && bookmark.length > 0) {
-        setSelectedItem(bookmarkFolder._id);
-      }
-    });
-  }, [bookmarkFolders, currentPage, mutateBookmarkFolderData]);
+    getSelectedFolder();
+  }, [getSelectedFolder]);
 
   const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
     try {
@@ -67,7 +73,7 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
     catch (err) {
       toastError(err);
     }
-  }, [currentPage]);
+  }, [currentPage?._id]);
 
   return (
     <UncontrolledDropdown className={`grw-bookmark-folder-dropdown ${styles['grw-bookmark-folder-dropdown']}`}>

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

@@ -5,7 +5,7 @@ import {
 } from 'reactstrap';
 
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
-import { apiv3Post } from '~/client/util/apiv3-client';
+import { apiv3Get, apiv3Post } from '~/client/util/apiv3-client';
 import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxCurrentPage } from '~/stores/page';
@@ -27,11 +27,25 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const { data: currentPage } = useSWRxCurrentPage();
 
+  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]);
+
   useEffect(() => {
     if (isOpen) {
       mutateChildFolders();
+      getSelectedFolder();
     }
-  }, [isOpen, mutateChildFolders]);
+  }, [getSelectedFolder, isOpen, mutateChildFolders]);
 
   const onMouseLeaveHandler = useCallback(() => {
     setIsOpen(false);

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

@@ -32,6 +32,7 @@ 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>({
@@ -147,5 +148,15 @@ 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

@@ -108,5 +108,17 @@ 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;
 };