Refresh child bookmark folder structure on sidebar

https://youtrack.weseek.co.jp/issue/GW-7912
- Remove useEffect to set selectedItem value
- Move setSelectedItem to toggleHandler
- Remove setSelectedItem execution from onMenuItemClickHandler
- Add mutation for parent folder
- Remove mutation dependencies in onMenuItemClickHandler

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

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useEffect, useState,
+  useCallback, useState,
 } from 'react';
 
 import { useTranslation } from 'next-i18next';
@@ -32,15 +32,13 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
   const { data: currentPage } = useSWRxCurrentPage();
   const { mutate: mutateBookmarkInfo } = useSWRBookmarkInfo(currentPage?._id);
 
+
   const onClickNewBookmarkFolder = useCallback(() => {
     setIsCreateAction(true);
   }, []);
 
   const toggleHandler = useCallback(() => {
     mutateBookmarkFolderData();
-  }, [mutateBookmarkFolderData]);
-
-  useEffect(() => {
     bookmarkFolders?.forEach((bookmarkFolder) => {
       bookmarkFolder.bookmarks.forEach((bookmark) => {
         if (bookmark.page._id === currentPage?._id) {
@@ -73,14 +71,17 @@ 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 });
-      setSelectedItem(itemId);
+
       mutateBookmarkInfo();
       toastSuccess('Bookmark added to bookmark folder successfully');
     }
     catch (err) {
       toastError(err);
     }
-  }, [currentPage?._id, mutateBookmarkInfo]);
+
+    mutateBookmarkFolderData();
+    setSelectedItem(itemId);
+  }, [currentPage?._id, mutateBookmarkFolderData, mutateBookmarkInfo]);
 
   const renderBookmarkMenuItem = useCallback(() => {
     return (

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

@@ -32,6 +32,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const [isOpen, setIsOpen] = useState(false);
   const [currentChildFolders, setCurrentChildFolders] = useState<BookmarkFolderItems[]>();
   const { data: childFolders, mutate: mutateChildFolders } = useSWRxBookamrkFolderAndChild(item._id);
+  const { mutate: mutateParentFolders } = useSWRxBookamrkFolderAndChild(item.parent);
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
   const { data: currentPage } = useSWRxCurrentPage();
@@ -54,11 +55,8 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   useEffect(() => {
     if (isOpen && childFolders != null) {
       mutateChildFolders();
-
       setCurrentChildFolders(childFolders);
-
     }
-
     currentChildFolders?.forEach((bookmarkFolder) => {
       bookmarkFolder.bookmarks.forEach((bookmark) => {
         if (bookmark.page._id === currentPage?._id) {
@@ -67,7 +65,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
       });
     });
 
-  }, [childFolders, currentChildFolders, currentPage?._id, isOpen, item._id, mutateChildFolders]);
+  }, [childFolders, currentChildFolders, currentPage?._id, isOpen, item, mutateChildFolders, mutateParentFolders]);
 
   const onClickNewBookmarkFolder = useCallback((e) => {
     e.stopPropagation();
@@ -89,19 +87,21 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
 
   const onClickChildMenuItemHandler = useCallback(async(e, item) => {
     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');
+      mutateParentFolders();
+      mutateChildFolders();
+      setSelectedItem(item._id);
     }
     catch (err) {
       toastError(err);
     }
 
-    mutateChildFolders();
-  }, [currentPage?._id, mutateBookmarkInfo, onSelectedChild, mutateChildFolders]);
+
+  }, [mutateBookmarkInfo, onSelectedChild, currentPage?._id]);
 
   const renderBookmarkSubMenuItem = useCallback(() => {
     return (