rename func

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useCallback } from 'react';
 import {
   Dropdown, DropdownMenu, DropdownToggle, DropdownItem,
 } from 'reactstrap';
@@ -16,13 +16,13 @@ type PageItemControlProps = {
   isEnableActions: boolean
   isDeletable: boolean
   onClickDeleteButton?: (pageId: string) => void
-  onClickRenameButton?: (pageId: string) => void
+  onClickRenameButtonHandler?: (pageId: string) => void
 }
 
 const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps) => {
 
   const {
-    page, isEnableActions, onClickDeleteButton, isDeletable, onClickRenameButton,
+    page, isEnableActions, onClickDeleteButton, isDeletable, onClickRenameButtonHandler,
   } = props;
   const { t } = useTranslation('');
   const [isOpen, setIsOpen] = useState(false);
@@ -34,11 +34,11 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
     }
   };
 
-  const renameButtonHandler = () => {
-    if (onClickRenameButton != null && page._id != null) {
-      onClickRenameButton(page._id);
+  const renameButtonClickedHandler = useCallback(() => {
+    if (onClickRenameButtonHandler != null && page._id != null) {
+      onClickRenameButtonHandler(page._id);
     }
-  };
+  }, [onClickRenameButtonHandler, page._id]);
 
 
   const bookmarkToggleHandler = (async() => {
@@ -112,7 +112,7 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
           </DropdownItem>
         )}
         {isEnableActions && (
-          <DropdownItem onClick={renameButtonHandler}>
+          <DropdownItem onClick={renameButtonClickedHandler}>
             <i className="icon-fw  icon-action-redo"></i>
             {t('Move/Rename')}
           </DropdownItem>

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -46,7 +46,7 @@ type ItemControlProps = {
   isEnableActions: boolean
   isDeletable: boolean
   onClickDeleteButtonHandler?(): void
-  onClickRenameButtonHandler?(): void
+  onClickRenameButton?(): void
   onClickPlusButtonHandler?(): void
 }
 
@@ -67,12 +67,12 @@ const ItemControl: FC<ItemControlProps> = memo((props: ItemControlProps) => {
     props.onClickDeleteButtonHandler();
   };
 
-  const onClickRenameButton = () => {
-    if (props.onClickRenameButtonHandler == null) {
+  const onClickRenameButtonHandler = () => {
+    if (props.onClickRenameButton == null) {
       return;
     }
 
-    props.onClickRenameButtonHandler();
+    props.onClickRenameButton();
   };
 
   if (props.page == null) {
@@ -86,7 +86,7 @@ const ItemControl: FC<ItemControlProps> = memo((props: ItemControlProps) => {
         onClickDeleteButton={onClickDeleteButton}
         isEnableActions={props.isEnableActions}
         isDeletable={props.isDeletable}
-        onClickRenameButton={onClickRenameButton}
+        onClickRenameButtonHandler={onClickRenameButtonHandler}
       />
       <button
         type="button"
@@ -186,7 +186,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   }, [page, onClickDeleteByPage]);
 
 
-  const onClickRenameButtonHandler = useCallback(() => {
+  const onClickRenameButton = useCallback(() => {
     setIsInputForRenameOpen(true);
   }, []);
 
@@ -272,7 +272,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           <ItemControl
             page={page}
             onClickDeleteButtonHandler={onClickDeleteButtonHandler}
-            onClickRenameButtonHandler={onClickRenameButtonHandler}
+            onClickRenameButton={onClickRenameButton}
             onClickPlusButtonHandler={() => { setNewPageInputShown(true) }}
             isEnableActions={isEnableActions}
             isDeletable={!page.isEmpty && !isTopPage(page.path as string)}