132486 create button hendler with useCallback

apps/app/src/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -217,9 +217,9 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
 
   const { isLinkSharingDisabled } = props;
 
-  const tagEditHandler = () => {
+  const onClickEditTagsButton = useCallback(() => {
     openTagEditModal(tagsInfoData?.tags, pageId, revisionId);
-  };
+  }, [openTagEditModal, tagsInfoData?.tags, pageId, revisionId]);
 
   const duplicateItemClickedHandler = useCallback(async(page: IPageForPageDuplicateModal) => {
     const duplicatedHandler: OnDuplicatedFunction = (fromPath, toPath) => {
@@ -321,7 +321,7 @@ const GrowiContextualSubNavigation = (props: GrowiContextualSubNavigationProps):
               showPageControlDropdown={isAbleToShowPageManagement}
               isReadOnlyUser={isReadOnlyUser}
               isGuestUser={isGuestUser}
-              openTagEditModal={tagEditHandler}
+              onClickEditTagsButton={onClickEditTagsButton}
               additionalMenuItemRenderer={additionalMenuItemsRenderer}
               onClickDuplicateMenuItem={duplicateItemClickedHandler}
               onClickRenameMenuItem={renameItemClickedHandler}

apps/app/src/components/PageControls/PageControls.tsx

@@ -32,18 +32,18 @@ import SubscribeButton from './SubscribeButton';
 import styles from './PageControls.module.scss';
 
 type TagsProps = {
-  openTagEditModal?: () => void,
+  onClickEditTagsButton: () => void,
 }
 
 const Tags = (props: TagsProps): JSX.Element => {
-  const { openTagEditModal } = props;
+  const { onClickEditTagsButton } = props;
 
   return (
     <div className="grw-taglabels-container d-flex align-items-center">
       <button
         type="button"
         className="btn btn-link btn-edit-tags text-muted border border-secondary p-1 d-flex align-items-center"
-        onClick={openTagEditModal}
+        onClick={onClickEditTagsButton}
       >
         <i className="icon-tag me-2" />
         Tags
@@ -106,7 +106,7 @@ type PageControlsSubstanceProps = CommonProps & {
   expandContentWidth?: boolean,
   isGuestUser?: boolean,
   isReadOnlyUser?: boolean,
-  openTagEditModal?: () => void,
+  onClickEditTagsButton: () => void,
 }
 
 const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element => {
@@ -114,7 +114,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     pageInfo,
     pageId, revisionId, path, shareLinkId, expandContentWidth,
     disableSeenUserInfoPopover, showPageControlDropdown, forceHideMenuItems, additionalMenuItemRenderer,
-    isGuestUser, isReadOnlyUser, openTagEditModal,
+    isGuestUser, isReadOnlyUser, onClickEditTagsButton,
     onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
   } = props;
 
@@ -243,7 +243,7 @@ const PageControlsSubstance = (props: PageControlsSubstanceProps): JSX.Element =
     <div className={`grw-page-controls ${styles['grw-page-controls']} d-flex`} style={{ gap: '2px' }}>
       {revisionId != null && !isViewMode && (
         <Tags
-          openTagEditModal={openTagEditModal}
+          onClickEditTagsButton={onClickEditTagsButton}
         />
       )}
       {revisionId != null && (
@@ -301,13 +301,13 @@ type PageControlsProps = CommonProps & {
   expandContentWidth?: boolean,
   isGuestUser?: boolean,
   isReadOnlyUser?: boolean,
-  openTagEditModal?: () => void,
+  onClickEditTagsButton: () => void,
 };
 
 export const PageControls = memo((props: PageControlsProps): JSX.Element => {
   const {
     pageId, revisionId, path, shareLinkId, expandContentWidth, isGuestUser, isReadOnlyUser,
-    openTagEditModal, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
+    onClickEditTagsButton, onClickDuplicateMenuItem, onClickRenameMenuItem, onClickDeleteMenuItem, onClickSwitchContentWidth,
   } = props;
 
   const { data: pageInfo, error } = useSWRxPageInfo(pageId ?? null, shareLinkId);
@@ -329,7 +329,7 @@ export const PageControls = memo((props: PageControlsProps): JSX.Element => {
       path={path}
       isGuestUser={isGuestUser}
       isReadOnlyUser={isReadOnlyUser}
-      openTagEditModal={openTagEditModal}
+      onClickEditTagsButton={onClickEditTagsButton}
       onClickDuplicateMenuItem={onClickDuplicateMenuItem}
       onClickRenameMenuItem={onClickRenameMenuItem}
       onClickDeleteMenuItem={onClickDeleteMenuItem}

apps/app/src/components/PageSideContents/PageSideContents.tsx

@@ -44,6 +44,10 @@ const Tags = (props: TagsProps): JSX.Element => {
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { open: openTagEditModal } = useTagEditModal();
 
+  const onClickEditTagsButton = useCallback(() => {
+    openTagEditModal(tagsInfoData?.tags, pageId, revisionId);
+  }, [openTagEditModal, pageId, revisionId, tagsInfoData?.tags]);
+
   if (!showTagLabel) {
     return <></>;
   }
@@ -57,7 +61,7 @@ const Tags = (props: TagsProps): JSX.Element => {
           <PageTags
             tags={tagsInfoData.tags}
             isTagLabelsDisabled={isTagLabelsDisabled ?? false}
-            openTagEditModal={() => openTagEditModal(tagsInfoData?.tags, pageId, revisionId)}
+            onClickEditTagsButton={onClickEditTagsButton}
           />
         )
         : <PageTagsSkeleton />

apps/app/src/components/PageTags/PageTags.tsx

@@ -10,7 +10,7 @@ type Props = {
   tags?: string[],
   isTagLabelsDisabled: boolean,
   tagsUpdateInvoked?: (tags: string[]) => Promise<void> | void,
-  openTagEditModal?: () => void,
+  onClickEditTagsButton: () => void,
 }
 
 export const PageTagsSkeleton = (): JSX.Element => {
@@ -19,7 +19,7 @@ export const PageTagsSkeleton = (): JSX.Element => {
 
 export const PageTags:FC<Props> = (props: Props) => {
   const {
-    tags, isTagLabelsDisabled, openTagEditModal,
+    tags, isTagLabelsDisabled, onClickEditTagsButton,
   } = props;
 
   if (tags == null) {
@@ -32,7 +32,7 @@ export const PageTags:FC<Props> = (props: Props) => {
         <RenderTagLabels
           tags={tags}
           isTagLabelsDisabled={isTagLabelsDisabled}
-          openTagEditModal={openTagEditModal}
+          onClickEditTagsButton={onClickEditTagsButton}
         />
       </div>
     </>

apps/app/src/components/PageTags/RenderTagLabels.tsx

@@ -10,12 +10,12 @@ import { NotAvailableForReadOnlyUser } from '../NotAvailableForReadOnlyUser';
 type RenderTagLabelsProps = {
   tags: string[],
   isTagLabelsDisabled: boolean,
-  openTagEditModal?: () => void,
+  onClickEditTagsButton: () => void,
 }
 
 const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
   const {
-    tags, isTagLabelsDisabled, openTagEditModal,
+    tags, isTagLabelsDisabled, onClickEditTagsButton,
   } = props;
   const { t } = useTranslation();
 
@@ -46,7 +46,7 @@ const RenderTagLabels = React.memo((props: RenderTagLabelsProps) => {
                 ${isTagsEmpty && 'no-tags'}
                 ${isTagLabelsDisabled && 'disabled'}`
               }
-              onClick={openTagEditModal}
+              onClick={onClickEditTagsButton}
             >
               {isTagsEmpty && <>{ t('Add tags for this page') }</>}
               <i className={`icon-plus ${isTagsEmpty && 'ms-1'}`} />