Refresh bookmark item on add bookmark from subnavigation

https://youtrack.weseek.co.jp/issue/GW-7912
- Adjust class of bookmark item under bookmark folder
- Remove bookmark item from sidebar
- Remove isSelected props from BookmarkFolderMenuItem
- Implement useEffect to get selected item and set checked value of radio button
- Refresh bookmark item list on click bookmark folder

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

@@ -69,6 +69,7 @@ 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');
@@ -76,7 +77,7 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
     catch (err) {
       toastError(err);
     }
-  }, [currentPage, mutateBookmarkInfo]);
+  }, [currentPage?._id, mutateBookmarkFolderData, mutateBookmarkInfo]);
 
   const renderBookmarkMenuItem = useCallback(() => {
     return (
@@ -102,7 +103,6 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
                 {
                   <div className='dropdown-item grw-bookmark-folder-menu-item' tabIndex={0} role="menuitem" onClick={() => onMenuItemClickHandler(folder._id)}>
                     <BookmarkFolderMenuItem
-                      isSelected={selectedItem === folder._id}
                       item={folder}
                       onSelectedChild={() => setSelectedItem(null)}
                     />
@@ -120,7 +120,6 @@ const BookmarkFolderMenu = (props: Props): JSX.Element => {
       onClickNewBookmarkFolder,
       onMenuItemClickHandler,
       onPressEnterHandlerForCreate,
-      selectedItem,
       t,
   ]);
 

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

@@ -21,17 +21,15 @@ import BookmarkFolderNameInput from './BookmarkFolderNameInput';
 
 type Props ={
   item: BookmarkFolderItems
-  isSelected: boolean
   onSelectedChild: () => void
 }
 const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
   const {
-    item, isSelected,
+    item,
   } = props;
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
   const { data: childFolders, mutate: mutateChildFolders } = useSWRxBookamrkFolderAndChild(item._id);
-
   const [selectedItem, setSelectedItem] = useState<string | null>(null);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
   const { data: currentPage } = useSWRxCurrentPage();
@@ -50,6 +48,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) {
       mutateChildFolders();
@@ -125,7 +133,6 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
                   onClick={e => onClickChildMenuItemHandler(e, child)}>
                   <BookmarkFolderMenuItem
                     onSelectedChild={() => setSelectedItem(null)}
-                    isSelected={selectedItem === child._id}
                     item={child}
                   />
                 </div>
@@ -135,7 +142,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
         )}
       </>
     );
-  }, [childFolders, isCreateAction, onClickChildMenuItemHandler, onClickNewBookmarkFolder, onPressEnterHandlerForCreate, selectedItem, t]);
+  }, [childFolders, isCreateAction, onClickChildMenuItemHandler, onClickNewBookmarkFolder, onPressEnterHandlerForCreate, t]);
 
   return (
     <UncontrolledDropdown
@@ -148,7 +155,7 @@ const BookmarkFolderMenuItem = (props: Props):JSX.Element => {
       <div className='d-flex justify-content-start  grw-bookmark-folder-menu-item-title'>
         <input
           type="radio"
-          checked={isSelected}
+          checked={selectedItem === item._id}
           name="bookmark-folder-menu-item"
           id={`bookmark-folder-menu-item-${item._id}`}
           onChange={e => e.stopPropagation()}

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

@@ -96,7 +96,7 @@ const BookmarkItem = (props: Props): JSX.Element => {
 
   return (
     <div className="grw-foldertree-item-container" key={bookmarkedPage._id}>
-      <li className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 pl-3 d-flex align-items-center" id={bookmarkItemId}>
+      <li className="bookmark-item-list list-group-item list-group-item-action border-0 py-0 pl-5 d-flex align-items-center" id={bookmarkItemId}>
         { isRenameInputShown ? (
           <ClosableTextInput
             value={nodePath.basename(bookmarkedPage.path ?? '')}

packages/app/src/components/Sidebar/Bookmarks/BookmarkContents.tsx

@@ -6,7 +6,6 @@ import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import BookmarkFolderNameInput from '~/components/Bookmarks/BookmarkFolderNameInput';
 import BookmarkFolderTree from '~/components/Bookmarks/BookmarkFolderTree';
-import BookmarkItemList from '~/components/Bookmarks/BookmarkItemList';
 import FolderPlusIcon from '~/components/Icons/FolderPlusIcon';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
@@ -66,7 +65,6 @@ const BookmarkContents = (): JSX.Element => {
         renderAddNewBookmarkFolder()
       }
       <BookmarkFolderTree />
-      <BookmarkItemList />
     </>
   );
 };