Code improvement

https://youtrack.weseek.co.jp/issue/GW-7839
- Rename currentUserBookmarksData props to bookmarkedPage
- Change type of bookmarkedPage
- Return BookmarkItem as single element
- Add method to generate mapped component of BookmarkItem

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

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import { DevidedPagePath, pathUtils } from '@growi/core';
 import { useTranslation } from 'react-i18next';
@@ -14,63 +14,50 @@ import { MenuItemType, PageItemControl } from '../Common/Dropdown/PageItemContro
 
 
 type Props = {
-  currentUserBookmarksData: IPageHasId[] | undefined,
+  bookmarkedPage: IPageHasId,
   onPageOperationSuccess: () => void
 }
 
 const BookmarkItem = (props: Props) => {
-  const { currentUserBookmarksData, onPageOperationSuccess } = props;
+  const { bookmarkedPage, onPageOperationSuccess } = props;
 
-  const generateBookmarkedPageList = currentUserBookmarksData?.map((page) => {
-    const dPagePath = new DevidedPagePath(page.path, false, true);
-    const { latter: pageTitle, former, isRoot } = dPagePath;
-    const formerPagePath = isRoot ? pageTitle : pathUtils.addTrailingSlash(former);
-    const bookmarkItemId = `bookmark-item-${page._id}`;
+  const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
+  const { latter: pageTitle, former, isRoot } = dPagePath;
+  const formerPagePath = isRoot ? pageTitle : pathUtils.addTrailingSlash(former);
+  const bookmarkItemId = `bookmark-item-${bookmarkedPage._id}`;
 
-    const bookmarkMenuItemClickHandler = (async() => {
-      await unbookmark(page._id);
-      onPageOperationSuccess();
-    });
-
-
-    return (
-      <div className="d-flex justify-content-between" key={page._id}>
-        <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center" id={bookmarkItemId}>
-          <a href={`/${page._id}`} className="grw-bookmarks-title-anchor flex-grow-1">
-            <p className={`text-truncate m-auto ${page.isEmpty && 'grw-sidebar-text-muted'}`}>{pageTitle}</p>
-          </a>
-          <PageItemControl
-            pageId={page._id}
-            isEnableActions
-            forceHideMenuItems={[MenuItemType.DUPLICATE]}
-            onClickBookmarkMenuItem={bookmarkMenuItemClickHandler}
-          >
-            <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}
-          >
-            { formerPagePath }
-          </UncontrolledTooltip>
-        </li>
-      </div>
-    );
-  });
+  const bookmarkMenuItemClickHandler = useCallback(async() => {
+    await unbookmark(bookmarkedPage._id);
+    onPageOperationSuccess();
+  }, [onPageOperationSuccess, bookmarkedPage]);
 
 
   return (
-    <>
-      <ul className="grw-bookmarks-list list-group p-3">
-        <div className="grw-bookmarks-item-container">
-          {generateBookmarkedPageList}
-        </div>
-      </ul>
-    </>
+    <div className="d-flex justify-content-between" key={bookmarkedPage._id}>
+      <li className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center" id={bookmarkItemId}>
+        <a href={`/${bookmarkedPage._id}`} className="grw-bookmarks-title-anchor flex-grow-1">
+          <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}
+        >
+          <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}
+        >
+          { formerPagePath }
+        </UncontrolledTooltip>
+      </li>
+    </div>
   );
 };
 
@@ -80,6 +67,20 @@ const Bookmarks = () : JSX.Element => {
   const { data: isGuestUser } = useIsGuestUser();
   const { data: currentUserBookmarksData, mutate: mutateCurrentUserBookmarks } = useSWRxCurrentUserBookmarks();
 
+  const generateBookmarkList = () => {
+    return (
+      <ul className="grw-bookmarks-list list-group p-3">
+        <div className="grw-bookmarks-item-container">
+          { currentUserBookmarksData?.map((currentUserBookmark) => {
+            return (
+              <BookmarkItem key={currentUserBookmark._id} bookmarkedPage={currentUserBookmark} onPageOperationSuccess={mutateCurrentUserBookmarks} />
+            );
+          })}
+        </div>
+      </ul>
+    );
+  };
+
   const renderBookmarksItem = () => {
     if (currentUserBookmarksData?.length === 0) {
       return (
@@ -88,7 +89,7 @@ const Bookmarks = () : JSX.Element => {
         </h4>
       );
     }
-    return <BookmarkItem currentUserBookmarksData={currentUserBookmarksData} onPageOperationSuccess={mutateCurrentUserBookmarks} />;
+    return generateBookmarkList();
   };
 
   return (
@@ -96,7 +97,6 @@ const Bookmarks = () : JSX.Element => {
       <div className="grw-sidebar-content-header p-3">
         <h3 className="mb-0">{t('Bookmarks')}</h3>
       </div>
-
       { isGuestUser
         ? (
           <h4 className="pl-3">
@@ -104,10 +104,8 @@ const Bookmarks = () : JSX.Element => {
           </h4>
         ) : renderBookmarksItem()
       }
-
     </>
   );
-
 };
 
 export default Bookmarks;