Use same component for bookmark tree

https://youtrack.weseek.co.jp/issue/GW-7849
- Adjust props of BookmarkItem on BookmarkFolderTree component
- Change BookmarkItem component to previous version
- Implement BookmarkFolderTree to UsersHomePageFooter component
- Remove BookmarkContents for UsersHomePageFooter

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

@@ -69,7 +69,6 @@ const BookmarkFolderTree = (): JSX.Element => {
               onUnbookmarked={mutateCurrentUserBookmarks}
               onRenamed={mutateCurrentUserBookmarks}
               onClickDeleteMenuItem={deleteMenuItemClickHandler}
-              isSidebarItem={true}
             />
           );
         })}

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

@@ -1,4 +1,3 @@
-
 import React, { useCallback, useState } from 'react';
 
 import nodePath from 'path';
@@ -12,23 +11,22 @@ import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '~/interfaces/page';
 
+
 import ClosableTextInput, { AlertInfo, AlertType } from '../Common/ClosableTextInput';
 import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemControl';
-import { PageListItemS } from '../PageList/PageListItemS';
 
 
 type Props = {
   bookmarkedPage: IPageHasId,
   onUnbookmarked: () => void,
   onRenamed: () => void,
-  onClickDeleteMenuItem: (pageToDelete: IPageToDeleteWithMeta) => void,
-  isSidebarItem: boolean
+  onClickDeleteMenuItem: (pageToDelete: IPageToDeleteWithMeta) => void
 }
 
 const BookmarkItem = (props: Props): JSX.Element => {
   const { t } = useTranslation();
   const {
-    bookmarkedPage, onUnbookmarked, onRenamed, onClickDeleteMenuItem, isSidebarItem,
+    bookmarkedPage, onUnbookmarked, onRenamed, onClickDeleteMenuItem,
   } = props;
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
@@ -96,53 +94,9 @@ const BookmarkItem = (props: Props): JSX.Element => {
     onClickDeleteMenuItem(pageToDelete);
   }, [bookmarkedPage, onClickDeleteMenuItem]);
 
-  const renderBookmarkListForSidebar = () => {
-    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}>
-          { isRenameInputShown ? (
-            <ClosableTextInput
-              value={nodePath.basename(bookmarkedPage.path ?? '')}
-              placeholder={t('Input page name')}
-              onClickOutside={() => { setRenameInputShown(false) }}
-              onPressEnter={pressEnterForRenameHandler}
-              inputValidator={inputValidator}
-            />
-          ) : (
-            <a href={`/${bookmarkedPage._id}`} className="grw-foldertree-title-anchor flex-grow-1 pr-3">
-              <p className={`text-truncate m-auto ${bookmarkedPage.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
-            </a>
-          )}
-          <PageItemControl
-            pageId={bookmarkedPage._id}
-            isEnableActions
-            forceHideMenuItems={[MenuItemType.DUPLICATE]}
-            onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
-            onClickRenameMenuItem={renameMenuItemClickHandler}
-            onClickDeleteMenuItem={deleteMenuItemClickHandler}
-          >
-            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
-              <i className="icon-options fa fa-rotate-90 p-1"></i>
-            </DropdownToggle>
-          </PageItemControl>
-          <UncontrolledTooltip
-            modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
-            autohide={false}
-            placement="right"
-            target={bookmarkItemId}
-            fade={false}
-          >
-            { formerPagePath !== null ? `${formerPagePath}/` : '/' }
-          </UncontrolledTooltip>
-        </li>
-      </div>
-    );
-  };
-
-  const renderBookmarkListForUserPage = () => {
-    return (
-      <li key={`my-bookmarks:${bookmarkedPage?._id}`}
-        className="bookmark-item-list list-group-item list-group-item-action border-0 py-2 pl-3 d-flex align-items-center">
+  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}>
         { isRenameInputShown ? (
           <ClosableTextInput
             value={nodePath.basename(bookmarkedPage.path ?? '')}
@@ -151,37 +105,34 @@ const BookmarkItem = (props: Props): JSX.Element => {
             onPressEnter={pressEnterForRenameHandler}
             inputValidator={inputValidator}
           />
-
         ) : (
-          <>
-            <div className='d-flex flex-row'>
-              <PageListItemS page={bookmarkedPage} />
-              <PageItemControl
-                pageId={bookmarkedPage._id}
-                isEnableActions
-                forceHideMenuItems={[MenuItemType.DUPLICATE]}
-                onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
-                onClickRenameMenuItem={renameMenuItemClickHandler}
-                onClickDeleteMenuItem={deleteMenuItemClickHandler}
-              >
-                <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
-                  <i className="icon-options fa fa-rotate-90 p-1"></i>
-                </DropdownToggle>
-              </PageItemControl>
-            </div>
-          </>
+          <a href={`/${bookmarkedPage._id}`} className="grw-foldertree-title-anchor flex-grow-1 pr-3">
+            <p className={`text-truncate m-auto ${bookmarkedPage.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
+          </a>
         )}
-
+        <PageItemControl
+          pageId={bookmarkedPage._id}
+          isEnableActions
+          forceHideMenuItems={[MenuItemType.DUPLICATE]}
+          onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
+          onClickRenameMenuItem={renameMenuItemClickHandler}
+          onClickDeleteMenuItem={deleteMenuItemClickHandler}
+        >
+          <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+            <i className="icon-options fa fa-rotate-90 p-1"></i>
+          </DropdownToggle>
+        </PageItemControl>
+        <UncontrolledTooltip
+          modifiers={{ preventOverflow: { boundariesElement: 'window' } }}
+          autohide={false}
+          placement="right"
+          target={bookmarkItemId}
+          fade={false}
+        >
+          { formerPagePath !== null ? `${formerPagePath}/` : '/' }
+        </UncontrolledTooltip>
       </li>
-    );
-  };
-  return (
-    <>
-      {isSidebarItem
-        ? renderBookmarkListForSidebar()
-        : renderBookmarkListForUserPage()
-      }
-    </>
+    </div>
   );
 };
 

packages/app/src/components/UsersHomePageFooter.tsx

@@ -10,8 +10,8 @@ import styles from '~/components/UsersHomePageFooter.module.scss';
 import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
 
 import BookmarkFolderNameInput from './Bookmarks/BookmarkFolderNameInput';
+import BookmarkFolderTree from './Bookmarks/BookmarkFolderTree';
 import FolderPlusIcon from './Icons/FolderPlusIcon';
-import BookmarkContents from './UsersPageBookmarks/BookmarkContents';
 
 
 export type UsersHomePageFooterProps = {
@@ -65,7 +65,7 @@ export const UsersHomePageFooter = (props: UsersHomePageFooterProps): JSX.Elemen
           </div>
         )}
         {
-          <BookmarkContents />
+          <BookmarkFolderTree />
         }
 
       </div>

packages/app/src/components/UsersPageBookmarks/BookmarkContents.module.scss

@@ -1,3 +0,0 @@
-@use '~/styles/molecules/bookmark-folder-tree';
-@use '~/styles/molecules/page_list';
-

packages/app/src/components/UsersPageBookmarks/BookmarkContents.tsx

@@ -1,77 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { useTranslation } from 'next-i18next';
-
-import { toastSuccess } from '~/client/util/apiNotification';
-import { IPageToDeleteWithMeta } from '~/interfaces/page';
-import { OnDeletedFunction } from '~/interfaces/ui';
-import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
-import { useSWRxBookamrkFolderAndChild } from '~/stores/bookmark-folder';
-import { usePageDeleteModal } from '~/stores/modal';
-
-import BookmarkFolderItem from '../Bookmarks/BookmarkFolderItem';
-import BookmarkItem from '../Bookmarks/BookmarkItem';
-
-
-import styles from './BookmarkContents.module.scss';
-
-const BookmarkContents = (): JSX.Element => {
-  const { t } = useTranslation();
-  const { data: bookmarkFolderData } = useSWRxBookamrkFolderAndChild(null);
-  const { data: currentUserBookmarksData, mutate: mutateCurrentUserBookmarks } = useSWRxCurrentUserBookmarks();
-  const { open: openDeleteModal } = usePageDeleteModal();
-
-  const deleteMenuItemClickHandler = useCallback((pageToDelete: IPageToDeleteWithMeta) => {
-    const pageDeletedHandler : OnDeletedFunction = (pathOrPathsToDelete, _isRecursively, isCompletely) => {
-      if (typeof pathOrPathsToDelete !== 'string') {
-        return;
-      }
-      const path = pathOrPathsToDelete;
-
-      if (isCompletely) {
-        toastSuccess(t('deleted_pages_completely', { path }));
-      }
-      else {
-        toastSuccess(t('deleted_pages', { path }));
-      }
-      mutateCurrentUserBookmarks();
-    };
-    openDeleteModal([pageToDelete], { onDeleted: pageDeletedHandler });
-  }, [mutateCurrentUserBookmarks, openDeleteModal, t]);
-
-  return (
-    <ul className={`grw-foldertree ${styles['grw-foldertree']} list-group p-3`}>
-      {bookmarkFolderData?.map((item) => {
-        return (
-          <BookmarkFolderItem
-            key={item._id}
-            bookmarkFolder={item}
-            isOpen={false}
-            isSidebarItem={false}
-          />
-        );
-      })}
-      <div id="user-bookmark-list" className={`page-list ${styles['page-list']}`}>
-        {currentUserBookmarksData?.length === 0 ? t('No bookmarks yet') : (
-          <>
-            <ul className="page-list-ul page-list-ul-flat my-3">
-              {currentUserBookmarksData?.map(page => (
-                <BookmarkItem
-                  key={page._id}
-                  onClickDeleteMenuItem={deleteMenuItemClickHandler}
-                  onRenamed={mutateCurrentUserBookmarks}
-                  onUnbookmarked={mutateCurrentUserBookmarks}
-                  bookmarkedPage={page}
-                  isSidebarItem={false}
-                />
-              ))}
-
-            </ul>
-          </>
-        ) }
-      </div>
-    </ul>
-  );
-};
-
-export default BookmarkContents;