Switch selected bookmark folder

https://youtrack.weseek.co.jp/issue/GW-7910
- Remove existing bookmark in folder before saving
- Implement stopPropagation on sub folder radio button click
- Remove initial bookmark folder data fetching from BookmarkButtons component
- Add initial bookmark folder data fetching to BookmarkFolderMenu
- Get selected bookmark folder based on bookmarked page
- Implement useEffect to set selected bookmark folder

packages/app/src/components/BookmarkButtons.tsx

@@ -7,7 +7,6 @@ import {
   UncontrolledTooltip, Popover, PopoverBody, DropdownToggle,
 } from 'reactstrap';
 
-import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useIsGuestUser } from '~/stores/context';
 
 import { IUser } from '../interfaces/user';
@@ -34,8 +33,6 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const { data: isGuestUser } = useIsGuestUser();
-  const { data: bookmarkFolderData, mutate: mutatebookmarkFolderData } = useSWRxBookamrkFolderAndChild();
-
 
   const togglePopover = () => {
     setIsPopoverOpen(!isPopoverOpen);
@@ -52,14 +49,11 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
     return 'tooltip.bookmark';
   }, [isGuestUser, isBookmarked]);
 
-  const onClickBookmarkButtonHandler = useCallback(() => {
-    mutatebookmarkFolderData();
-  }, [mutatebookmarkFolderData]);
 
   return (
     <div className={`btn-group btn-group-bookmark ${styles['btn-group-bookmark']}`} role="group" aria-label="Bookmark buttons">
-      <BookmarkFolderMenu bookmarkFolders={bookmarkFolderData}>
-        <DropdownToggle id='bookmark-dropdown-btn' color="transparent" onClick={onClickBookmarkButtonHandler} className={`shadow-none btn btn-bookmark border-0
+      <BookmarkFolderMenu >
+        <DropdownToggle id='bookmark-dropdown-btn' color="transparent" className={`shadow-none btn btn-bookmark border-0
           ${isBookmarked ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`}>
           <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
         </DropdownToggle>

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { useTranslation } from 'next-i18next';
 import {
@@ -7,7 +7,6 @@ import {
 
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Post } from '~/client/util/apiv3-client';
-import { BookmarkFolderItems } from '~/interfaces/bookmark-info';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 import { useSWRxCurrentPage } from '~/stores/page';
 
@@ -20,14 +19,13 @@ import styles from './BookmarkFolderMenu.module.scss';
 
 type Props = {
   children?: React.ReactNode
-  bookmarkFolders: BookmarkFolderItems[] | undefined
 }
 
 const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { children, bookmarkFolders } = props;
+  const { children } = props;
   const [isCreateAction, setIsCreateAction] = useState(false);
-  const { mutate: mutateChildBookmarkData } = useSWRxBookamrkFolderAndChild(null);
+  const { data: bookmarkFolders, mutate: mutateBookmarkFolderData } = useSWRxBookamrkFolderAndChild();
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const { data: currentPage } = useSWRxCurrentPage();
 
@@ -35,11 +33,21 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
     setIsCreateAction(true);
   }, []);
 
-  const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
+  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]);
 
+  const onPressEnterHandlerForCreate = useCallback(async(folderName: string) => {
     try {
       await apiv3Post('/bookmark-folder', { name: folderName, parent: null });
-      await mutateChildBookmarkData();
+      await mutateBookmarkFolderData();
       setIsCreateAction(false);
       toastSuccess(t('toaster.create_succeeded', { target: t('bookmark_folder.bookmark_folder') }));
     }
@@ -47,14 +55,14 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
       toastError(err);
     }
 
-  }, [mutateChildBookmarkData, t]);
-
+  }, [mutateBookmarkFolderData, t]);
 
   const onMenuItemClickHandler = useCallback(async(itemId: string) => {
-    setSelectedItem(itemId);
     try {
       await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: itemId });
+      setSelectedItem(itemId);
       toastSuccess('Bookmark added to bookmark folder successfully');
+
     }
     catch (err) {
       toastError(err);
@@ -97,7 +105,7 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
                   name="bookmark-folder-menu-item"
                   id={`bookmark-folder-menu-item-${folder._id}`}
                   onChange={e => e.stopPropagation()}
-                  onClick={e => e.stopPropagation() }
+                  onClick={e => e.stopPropagation()}
                 />
                 <label htmlFor={`bookmark-folder-menu-item-${folder._id}`} className='p-2 m-0 grw-bookmark-folder-menu-item-title mr-auto'>
                   {folder.name}

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

@@ -67,7 +67,8 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
           checked={isSelected}
           name="bookmark-folder-menu-item"
           id={`bookmark-folder-menu-item-${item._id}`}
-          onChange={e => e.stopPropagation() }
+          onChange={e => e.stopPropagation()}
+          onClick={e => e.stopPropagation()}
         />
         <label htmlFor={`bookmark-folder-menu-item-${item._id}`} className='p-2 m-0'>
           {item.name}

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

@@ -135,7 +135,14 @@ bookmarkFolderSchema.statics.updateBookmarkFolder = async function(bookmarkFolde
 
 bookmarkFolderSchema.statics.insertOrUpdateBookmarkedPage = async function(pageId: IPageHasId, userId: Types.ObjectId | string, folderId: string):
 Promise<BookmarkFolderDocument | null> {
+
+  // Create bookmark or update existing
   const bookmarkedPage = await Bookmark.findOneAndUpdate({ page: pageId, user: userId }, { page: pageId, user: userId }, { new: true, upsert: true });
+
+  // Remove existing bookmark in bookmark folder
+  await this.updateMany({}, { $pull: { bookmarks:  bookmarkedPage._id } });
+
+  // Insert bookmark into bookmark folder
   const bookmarkFolder = await this.findByIdAndUpdate(folderId, { $addToSet: { bookmarks: bookmarkedPage } }, { new: true, upsert: true });
   return bookmarkFolder;
 };