Update and adjust component

https://youtrack.weseek.co.jp/issue/GW-7861
- Rename BookmarkFolder to BookmarkContents component and adjust import
- Update conditional rendering of BookmarkContents
- Implement useCallback to deleteMenuItemClickHandler method
- Add rendering function for add new bookmark button and bookmark folder name input

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

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useIsGuestUser } from '~/stores/context';
 
-import BookmarkFolder from './Bookmarks/BookmarkFolder';
+import BookamrkContents from './Bookmarks/BookmarkContents';
 
 const Bookmarks = () : JSX.Element => {
   const { t } = useTranslation();
@@ -16,16 +16,13 @@ const Bookmarks = () : JSX.Element => {
       <div className="grw-sidebar-content-header p-3">
         <h3 className="mb-0">{t('Bookmarks')}</h3>
       </div>
-      {!isGuestUser ? (
-        <>
-          <BookmarkFolder />
-        </>
-      ) : (
+      {isGuestUser ? (
         <h4 className="pl-3">
           { t('Not available for guest') }
         </h4>
-      )
-      }
+      ) : (
+        <BookamrkContents />
+      )}
     </>
   );
 };

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

@@ -11,7 +11,7 @@ import BookmarkFolderNameInput from './BookmarkFolderNameInput';
 import BookmarkFolderTree from './BookmarkFolderTree';
 
 
-const BookmarkFolder = (): JSX.Element => {
+const BookmarkContents = (): JSX.Element => {
 
   const { t } = useTranslation();
   const [isRenameInputShown, setIsRenameInputShown] = useState<boolean>(false);
@@ -36,7 +36,7 @@ const BookmarkFolder = (): JSX.Element => {
 
   }, [mutateChildBookmarkData, t]);
 
-  return (
+  const renderAddNewBookmarkFolder = () => (
     <>
       <div className="col-8 mb-2 ">
         <button
@@ -57,9 +57,17 @@ const BookmarkFolder = (): JSX.Element => {
           </div>
         )
       }
+    </>
+  );
+
+  return (
+    <>
+      {
+        renderAddNewBookmarkFolder()
+      }
       <BookmarkFolderTree />
     </>
   );
 };
 
-export default BookmarkFolder;
+export default BookmarkContents;

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

@@ -1,4 +1,6 @@
 
+import { useCallback } from 'react';
+
 import { useTranslation } from 'next-i18next';
 
 import { toastSuccess } from '~/client/util/apiNotification';
@@ -20,7 +22,7 @@ const BookmarkFolderTree = (): JSX.Element => {
   const { data: bookmarkFolderData } = useSWRxBookamrkFolderAndChild();
   const { open: openDeleteModal } = usePageDeleteModal();
 
-  const deleteMenuItemClickHandler = (pageToDelete: IPageToDeleteWithMeta) => {
+  const deleteMenuItemClickHandler = useCallback((pageToDelete: IPageToDeleteWithMeta) => {
     const pageDeletedHandler : OnDeletedFunction = (pathOrPathsToDelete, _isRecursively, isCompletely) => {
       if (typeof pathOrPathsToDelete !== 'string') {
         return;
@@ -36,7 +38,7 @@ const BookmarkFolderTree = (): JSX.Element => {
       mutateCurrentUserBookmarks();
     };
     openDeleteModal([pageToDelete], { onDeleted: pageDeletedHandler });
-  };
+  }, [mutateCurrentUserBookmarks, openDeleteModal, t]);
 
   if (bookmarkFolderData != null) {
     return (