Code improvement

https://youtrack.weseek.co.jp/issue/GW-7846
- Remove unused imports
- Adjust Props type
- Adjust variable and params name

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

@@ -2,12 +2,13 @@
 import React from 'react';
 
 import { useTranslation } from 'react-i18next';
+
 import { toastSuccess } from '~/client/util/apiNotification';
 import { IPageToDeleteWithMeta } from '~/interfaces/page';
+import { OnDeletedFunction } from '~/interfaces/ui';
+import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
 import { useIsGuestUser } from '~/stores/context';
 import { usePageDeleteModal } from '~/stores/modal';
-import { useSWRxCurrentUserBookmarks } from '~/stores/bookmark';
-import { OnDeletedFunction } from '~/interfaces/ui';
 
 
 import BookmarkItem from './Bookmarks/BookmarkItem';
@@ -19,7 +20,7 @@ const Bookmarks = () : JSX.Element => {
   const { data: currentUserBookmarksData, mutate: mutateCurrentUserBookmarks } = useSWRxCurrentUserBookmarks();
   const { open: openDeleteModal } = usePageDeleteModal();
 
-  const onBookmarkItemDeleted = (pageToDelete: IPageToDeleteWithMeta):void => {
+  const onBookmarkItemDeleted = (pageToDelete: IPageToDeleteWithMeta): void => {
     const onDeletedHandler: OnDeletedFunction = (pathOrPathsToDelete, _isRecursively, isCompletely) => {
       if (typeof pathOrPathsToDelete !== 'string') {
         return;

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

@@ -3,7 +3,6 @@ import React, { useCallback, useState } from 'react';
 
 import nodePath from 'path';
 
-
 import { DevidedPagePath, pathUtils } from '@growi/core';
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip, DropdownToggle } from 'reactstrap';
@@ -12,8 +11,6 @@ import { unbookmark } from '~/client/services/page-operation';
 import { toastError, toastSuccess } from '~/client/util/apiNotification';
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { IPageHasId, IPageInfoAll, IPageToDeleteWithMeta } from '~/interfaces/page';
-import { OnDeletedFunction } from '~/interfaces/ui';
-import { usePageDeleteModal } from '~/stores/modal';
 
 
 import ClosableTextInput, { AlertInfo, AlertType } from '../../Common/ClosableTextInput';
@@ -21,23 +18,26 @@ import { MenuItemType, PageItemControl } from '../../Common/Dropdown/PageItemCon
 
 
 type Props = {
-  page: IPageHasId,
-  refreshBookmarkList: () => void
+  bookmarkedPage: IPageHasId,
+  onUnbookmarked: () => void,
+  onRenamed: () => void,
+  onDeleted: (pageToDelete: IPageToDeleteWithMeta) => void
 }
 
 const BookmarkItem = (props: Props): JSX.Element => {
   const { t } = useTranslation();
-  const { page, refreshBookmarkList } = props;
+  const {
+    bookmarkedPage, onUnbookmarked, onRenamed, onDeleted,
+  } = props;
   const [isRenameInputShown, setRenameInputShown] = useState(false);
-  const dPagePath = new DevidedPagePath(page.path, false, true);
+  const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
   const { latter: pageTitle, former: formerPagePath } = dPagePath;
-  const bookmarkItemId = `bookmark-item-${page._id}`;
-  const { open: openDeleteModal } = usePageDeleteModal();
+  const bookmarkItemId = `bookmark-item-${bookmarkedPage._id}`;
 
   const bookmarkMenuItemClickHandler = useCallback(async() => {
-    await unbookmark(page._id);
-    refreshBookmarkList();
-  }, [page, refreshBookmarkList]);
+    await unbookmark(bookmarkedPage._id);
+    onUnbookmarked();
+  }, [onUnbookmarked, bookmarkedPage]);
 
   const renameMenuItemClickHandler = useCallback(() => {
     setRenameInputShown(true);
@@ -54,10 +54,10 @@ const BookmarkItem = (props: Props): JSX.Element => {
     return null;
   };
 
-  const pressEnterForRenameHandler = (async(inputText: string) => {
-    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(page.path ?? ''));
+  const pressEnterForRenameHandler = useCallback(async(inputText: string) => {
+    const parentPath = pathUtils.addTrailingSlash(nodePath.dirname(bookmarkedPage.path ?? ''));
     const newPagePath = nodePath.resolve(parentPath, inputText);
-    if (newPagePath === page.path) {
+    if (newPagePath === bookmarkedPage.path) {
       setRenameInputShown(false);
       return;
     }
@@ -65,94 +65,75 @@ const BookmarkItem = (props: Props): JSX.Element => {
     try {
       setRenameInputShown(false);
       await apiv3Put('/pages/rename', {
-        pageId: page._id,
-        revisionId: page.revision,
+        pageId: bookmarkedPage._id,
+        revisionId: bookmarkedPage.revision,
         newPagePath,
       });
-      refreshBookmarkList();
-      toastSuccess(t('renamed_pages', { path: page.path }));
+      onRenamed();
+      toastSuccess(t('renamed_pages', { path: bookmarkedPage.path }));
     }
     catch (err) {
       setRenameInputShown(true);
       toastError(err);
     }
-  });
+  }, [bookmarkedPage, onRenamed, t]);
 
   const deleteMenuItemClickHandler = useCallback(async(_pageId: string, pageInfo: IPageInfoAll | undefined): Promise<void> => {
-    const onClickDeleteMenuItem = (pageToDelete: IPageToDeleteWithMeta) => {
-      const onDeletedHandler: 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 }));
-        }
-        refreshBookmarkList();
-      };
-      openDeleteModal([pageToDelete], { onDeleted: onDeletedHandler });
-    };
-
-    if (page._id == null || page.path == null) {
+    if (bookmarkedPage._id == null || bookmarkedPage.path == null) {
       throw Error('_id and path must not be null.');
     }
 
     const pageToDelete: IPageToDeleteWithMeta = {
       data: {
-        _id: page._id,
-        revision: page.revision as string,
-        path: page.path,
+        _id: bookmarkedPage._id,
+        revision: bookmarkedPage.revision as string,
+        path: bookmarkedPage.path,
       },
       meta: pageInfo,
     };
 
-    onClickDeleteMenuItem(pageToDelete);
-  }, [page, openDeleteModal, refreshBookmarkList, t]);
+    onDeleted(pageToDelete);
+  }, [bookmarkedPage, onDeleted]);
 
   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}>
-          { isRenameInputShown ? (
-            <ClosableTextInput
-              value={nodePath.basename(page.path ?? '')}
-              placeholder={t('Input page name')}
-              onClickOutside={() => { setRenameInputShown(false) }}
-              onPressEnter={pressEnterForRenameHandler}
-              inputValidator={inputValidator}
-            />
-          ) : (
-            <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}
-            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}
-          >
-            { formerPagePath || '/' }
-          </UncontrolledTooltip>
-        </li>
-      </div>
-    </>
+    <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}>
+        { 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-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}
+          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 }
+        </UncontrolledTooltip>
+      </li>
+    </div>
   );
 };