refactor

apps/app/src/components/PageHistory/PageRevisionTable.tsx

@@ -2,7 +2,7 @@ import React, {
   useEffect, useRef, useState,
 } from 'react';
 
-import type { IRevisionHasId, IRevisionHasPageId } from '@growi/core';
+import type { IRevisionHasPageId } from '@growi/core';
 import { useTranslation } from 'next-i18next';
 
 import { useSWRxInfinitePageRevisions } from '~/stores/page';
@@ -96,27 +96,19 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
   }, [isLoadingMore, isReachingEnd, setSize, size]);
 
 
-  const onChangeSourceInvoked: React.Dispatch<React.SetStateAction<IRevisionHasId | undefined>> = (revision: IRevisionHasPageId) => {
-    setSourceRevision(revision);
-  };
-  const onChangeTargetInvoked: React.Dispatch<React.SetStateAction<IRevisionHasId | undefined>> = (revision: IRevisionHasPageId) => {
-    setTargetRevision(revision);
-  };
-
-
   const renderRow = (revision: IRevisionHasPageId, previousRevision: IRevisionHasPageId, latestRevision: IRevisionHasPageId,
       isOldestRevision: boolean, hasDiff: boolean) => {
 
     const revisionId = revision._id;
 
     const handleCompareLatestRevisionButton = () => {
-      onChangeSourceInvoked(revision);
-      onChangeTargetInvoked(latestRevision);
+      setSourceRevision(revision);
+      setTargetRevision(latestRevision);
     };
 
     const handleComparePreviousRevisionButton = () => {
-      onChangeSourceInvoked(previousRevision);
-      onChangeTargetInvoked(revision);
+      setSourceRevision(previousRevision);
+      setTargetRevision(revision);
     };
 
     return (
@@ -165,7 +157,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
                 name="compareSource"
                 value={revisionId}
                 checked={revisionId === sourceRevision?._id}
-                onChange={() => onChangeSourceInvoked(revision)}
+                onChange={() => setSourceRevision(revision)}
               />
               <label className="form-label form-check-label" htmlFor={`compareSource-${revisionId}`} />
             </div>
@@ -181,7 +173,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
                 name="compareTarget"
                 value={revisionId}
                 checked={revisionId === targetRevision?._id}
-                onChange={() => onChangeTargetInvoked(revision)}
+                onChange={() => setTargetRevision(revision)}
               />
               <label className="form-label form-check-label" htmlFor={`compareTarget-${revisionId}`} />
             </div>

apps/app/src/components/TreeItem/NewPageCreateButton.tsx

@@ -10,13 +10,8 @@ import { IPageForItem } from '~/interfaces/page';
 import { usePageTreeDescCountMap } from '~/stores/ui';
 
 import { ItemNode } from './ItemNode';
+import type { StateHandlersType } from './state-handlers-type';
 
-type StateHandlersType = {
-  isOpen: boolean,
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
-  isCreating: boolean,
-  setCreating: React.Dispatch<React.SetStateAction<boolean>>,
-};
 
 export type NewPageCreateButtonProps = {
   page: IPageForItem,
@@ -46,7 +41,7 @@ export const NewPageCreateButton: FC<NewPageCreateButtonProps> = (props) => {
     if (hasDescendants) {
       setIsOpen(true);
     }
-  }, [hasDescendants, setIsOpen]);
+  }, [hasDescendants, setIsOpen, setNewPageInputShown]);
 
   return (
     <>

apps/app/src/components/TreeItem/UseNewPageInput.tsx

@@ -4,8 +4,9 @@ import { ItemNode } from './ItemNode';
 import { NewPageCreateButton } from './NewPageCreateButton';
 import { NewPageInput } from './NewPageInput';
 import { SimpleItemToolProps } from './SimpleItem';
+import { StateHandlersType } from './state-handlers-type';
 
-type UseNewPageInputProps = SimpleItemToolProps & {children: ItemNode[], stateHandlers};
+type UseNewPageInputProps = SimpleItemToolProps & {children: ItemNode[], stateHandlers: StateHandlersType };
 
 export const useNewPageInput = () => {
 
@@ -22,12 +23,12 @@ export const useNewPageInput = () => {
     );
   };
 
-  const NewPageInputWrapper = (props) => {
+  const NewPageInputWrapper: FC<UseNewPageInputProps> = (props) => {
     return (
       <NewPageInput
         page={props.page}
         isEnableActions={props.isEnableActions}
-        currentChildren={props.chilren}
+        currentChildren={props.children}
         stateHandlers={props.stateHandlers}
         isNewPageInputShown={isNewPageInputShown}
         setNewPageInputShown={setNewPageInputShown}

apps/app/src/components/TreeItem/state-handlers-type.ts

@@ -0,0 +1,6 @@
+export type StateHandlersType = {
+  isOpen: boolean,
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  isCreating: boolean,
+  setCreating: React.Dispatch<React.SetStateAction<boolean>>,
+};