Improve refresh bookmark list on click bookmark folder

https://youtrack.weseek.co.jp/issue/GW-7912
- Add toggleHandler for initial bookmark folder data fetching
- Remove mutation if parent folder on menu item click
- Adjust props of BookmarkFolderMenu component
- Implement onToggle props on UncontrolledDropdown
- Add back isSelected props  BookmarkFolderMenuItem
- Set checked props value by isSelected props for parent folder
- Add currentChildFolders state to store child bookmark folders

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

@@ -36,6 +36,10 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
     setIsCreateAction(true);
   }, []);
 
+  const toggleHandler = useCallback(() => {
+    mutateBookmarkFolderData();
+  }, [mutateBookmarkFolderData]);
+
   useEffect(() => {
     bookmarkFolders?.forEach((bookmarkFolder) => {
       bookmarkFolder.bookmarks.forEach((bookmark) => {
@@ -69,7 +73,6 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const onMenuItemClickHandler = useCallback(async(itemId: string) => {
     try {
       await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: itemId });
-      await mutateBookmarkFolderData();
       setSelectedItem(itemId);
       mutateBookmarkInfo();
       toastSuccess('Bookmark added to bookmark folder successfully');
@@ -77,7 +80,7 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
     catch (err) {
       toastError(err);
     }
-  }, [currentPage?._id, mutateBookmarkFolderData, mutateBookmarkInfo]);
+  }, [currentPage?._id, mutateBookmarkInfo]);
 
   const renderBookmarkMenuItem = useCallback(() => {
     return (
@@ -104,6 +107,7 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
                   <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={() => onMenuItemClickHandler(folder._id)}>
                     <BookmarkFolderMenuItem
                       item={folder}
+                      isSelected={selectedItem === folder._id}
                       onSelectedChild={() => setSelectedItem(null)}
                     />
                   </div>
@@ -121,10 +125,12 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
       onMenuItemClickHandler,
       onPressEnterHandlerForCreate,
       t,
+      selectedItem,
   ]);
 
   return (
     <UncontrolledDropdown
+      onToggle={toggleHandler}
       direction={ isBookmarkFolderExists() ? 'up' : 'down' }
       className="grw-bookmark-folder-dropdown">
       {children}

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

@@ -22,13 +22,15 @@ import BookmarkFolderNameInput from './BookmarkFolderNameInput';
 type Props ={
   item: BookmarkFolderItems
   onSelectedChild: () => void
+  isSelected: boolean
 }
 const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const {
-    item,
+    item, isSelected, onSelectedChild,
   } = props;
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
+  const [currentChildFolders, setCurrentChildFolders] = useState<BookmarkFolderItems[]>();
   const { data: childFolders, mutate: mutateChildFolders } = useSWRxBookamrkFolderAndChild(item._id);
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
@@ -48,21 +50,16 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
 
   }, [item, mutateChildFolders, t]);
 
-  useEffect(() => {
-    if (item.bookmarks != null) {
-      item.bookmarks.forEach((bookmark) => {
-        if (bookmark.page._id === currentPage?._id) {
-          setSelectedItem(item._id);
-        }
-      });
-    }
-  }, [currentPage?._id, item._id, item.bookmarks]);
 
   useEffect(() => {
-    if (isOpen) {
+    if (isOpen && childFolders != null) {
       mutateChildFolders();
+
+      setCurrentChildFolders(childFolders);
+
     }
-    childFolders?.forEach((bookmarkFolder) => {
+
+    currentChildFolders?.forEach((bookmarkFolder) => {
       bookmarkFolder.bookmarks.forEach((bookmark) => {
         if (bookmark.page._id === currentPage?._id) {
           setSelectedItem(bookmarkFolder._id);
@@ -70,7 +67,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
       });
     });
 
-  }, [childFolders, currentPage?._id, isOpen, mutateChildFolders]);
+  }, [childFolders, currentChildFolders, currentPage?._id, isOpen, item._id, mutateChildFolders]);
 
   const onClickNewBookmarkFolder = useCallback((e) => {
     e.stopPropagation();
@@ -94,6 +91,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     e.stopPropagation();
     setSelectedItem(item._id);
     mutateBookmarkInfo();
+    onSelectedChild();
     try {
       await apiv3Post('/bookmark-folder/add-boookmark-to-folder', { pageId: currentPage?._id, folderId: item._id });
       toastSuccess('Bookmark added to bookmark folder successfully');
@@ -101,7 +99,9 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
     catch (err) {
       toastError(err);
     }
-  }, [currentPage, mutateBookmarkInfo]);
+
+    mutateChildFolders();
+  }, [currentPage?._id, mutateBookmarkInfo, onSelectedChild, mutateChildFolders]);
 
   const renderBookmarkSubMenuItem = useCallback(() => {
     return (
@@ -122,9 +122,9 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
               </DropdownItem>
             )}
 
-            { childFolders && childFolders?.length > 0 && (<DropdownItem divider />)}
+            { currentChildFolders && currentChildFolders?.length > 0 && (<DropdownItem divider />)}
 
-            {childFolders?.map(child => (
+            {currentChildFolders?.map(child => (
               <div key={child._id} >
 
                 <div
@@ -134,6 +134,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
                   <BookmarkFolderMenuItem
                     onSelectedChild={() => setSelectedItem(null)}
                     item={child}
+                    isSelected={selectedItem === child._id}
                   />
                 </div>
               </div>
@@ -142,7 +143,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
         )}
       </>
     );
-  }, [childFolders, isCreateAction, onClickChildMenuItemHandler, onClickNewBookmarkFolder, onPressEnterHandlerForCreate, t]);
+  }, [childFolders, currentChildFolders, isCreateAction, onClickChildMenuItemHandler, onClickNewBookmarkFolder, onPressEnterHandlerForCreate, selectedItem, t]);
 
   return (
     <UncontrolledDropdown
@@ -155,7 +156,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
       <div className='d-flex justify-content-start  grw-bookmark-folder-menu-item-title'>
         <input
           type="radio"
-          checked={selectedItem === item._id}
+          checked={isSelected}
           name="bookmark-folder-menu-item"
           id={`bookmark-folder-menu-item-${item._id}`}
           onChange={e => e.stopPropagation()}