provide types

apps/app/src/components/Sidebar/PageTreeItem/PageTreeItem.tsx

@@ -10,9 +10,7 @@ import { useDrag, useDrop } from 'react-dnd';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastWarning, toastError } from '~/client/util/toastr';
-import {
-  IPageHasId,
-} from '~/interfaces/page';
+import { IPageHasId } from '~/interfaces/page';
 import { mutatePageTree, useSWRxPageChildren } from '~/stores/page-listing';
 import loggerFactory from '~/utils/logger';
 

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

@@ -1,22 +1,38 @@
 import React, {
-  useCallback,
+  useCallback, FC,
 } from 'react';
 
 import { pagePathUtils } from '@growi/core';
 
 import { NotAvailableForGuest } from '~/components/NotAvailableForGuest';
 import { NotAvailableForReadOnlyUser } from '~/components/NotAvailableForReadOnlyUser';
+import { IPageForItem } from '~/interfaces/page';
 import { usePageTreeDescCountMap } from '~/stores/ui';
 
-export const NewPageCreateButton = (props) => {
+import { ItemNode } from '../Sidebar/PageTree/ItemNode';
+
+type StateHandlersType = {
+  isOpen: boolean,
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  isCreating: boolean,
+  setCreating: React.Dispatch<React.SetStateAction<boolean>>,
+};
+
+export type NewPageCreateButtonProps = {
+  page: IPageForItem,
+  currentChildren: ItemNode[],
+  stateHandlers: StateHandlersType,
+  isNewPageInputShown?: boolean,
+  setNewPageInputShown: React.Dispatch<React.SetStateAction<boolean>>,
+};
+
+export const NewPageCreateButton: FC<NewPageCreateButtonProps> = (props) => {
   const {
-    page, children, stateHandlers, setNewPageInputShown,
+    page, currentChildren, stateHandlers, setNewPageInputShown,
   } = props;
 
   const { setIsOpen } = stateHandlers;
 
-  const currentChildren = children;
-
   // descendantCount
   const { getDescCount } = usePageTreeDescCountMap();
   const descendantCount = getDescCount(page._id) || page.descendantCount || 0;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
 
 import nodePath from 'path';
 
@@ -13,19 +13,20 @@ import ClosableTextInput from '~/components/Common/ClosableTextInput';
 import { useSWRxPageChildren } from '~/stores/page-listing';
 import { usePageTreeDescCountMap } from '~/stores/ui';
 
+import { NewPageCreateButtonProps } from './NewPageCreateButton';
 import { NotDraggableForClosableTextInput } from './SimpleItem';
 
-export const NewPageInput = (props) => {
+type NewPageInputProps = NewPageCreateButtonProps & {isEnableActions: boolean};
+
+export const NewPageInput: FC<NewPageInputProps> = (props) => {
   const { t } = useTranslation();
 
   const {
-    page, isEnableActions, children, stateHandlers, isNewPageInputShown, setNewPageInputShown,
+    page, isEnableActions, currentChildren, stateHandlers, isNewPageInputShown, setNewPageInputShown,
   } = props;
 
   const { isOpen, setIsOpen, setCreating } = stateHandlers;
 
-  const currentChildren = children;
-
   const { mutate: mutateChildren } = useSWRxPageChildren(isOpen ? page._id : null);
 
   const { getDescCount } = usePageTreeDescCountMap();

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

@@ -258,11 +258,9 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
         ))}
       </li>
 
-      <div className="flex-fill">
-        {CustomNextComponents?.map((UnderItemContent, index) => (
-          <UnderItemContent key={index} {...SimpleItemContentProps}/>
-        ))}
-      </div>
+      {CustomNextComponents?.map((UnderItemContent, index) => (
+        <UnderItemContent key={index} {...SimpleItemContentProps}/>
+      ))}
 
       {
         isOpen && hasChildren() && currentChildren.map((node, index) => (

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

@@ -1,18 +1,22 @@
-/* eslint-disable react/no-children-prop */
-import React, { useState } from 'react';
+import React, { useState, FC } from 'react';
+
+import { ItemNode } from '../Sidebar/PageTree/ItemNode';
 
 import { NewPageCreateButton } from './NewPageCreateButton';
 import { NewPageInput } from './NewPageInput';
+import { SimpleItemToolProps } from './SimpleItem';
+
+type UseNewPageInputProps = SimpleItemToolProps & {children: ItemNode[], stateHandlers};
 
 export const useNewPageInput = () => {
 
   const [isNewPageInputShown, setNewPageInputShown] = useState(false);
 
-  const NewPageCreateButtonWrapper = (props) => {
+  const NewPageCreateButtonWrapper: FC<UseNewPageInputProps> = (props) => {
     return (
       <NewPageCreateButton
         page={props.page}
-        children={props.children}
+        currentChildren={props.children}
         stateHandlers={props.stateHandlers}
         setNewPageInputShown={setNewPageInputShown}
       />
@@ -24,7 +28,7 @@ export const useNewPageInput = () => {
       <NewPageInput
         page={props.page}
         isEnableActions={props.isEnableActions}
-        children={props.chilren}
+        currentChildren={props.chilren}
         stateHandlers={props.stateHandlers}
         isNewPageInputShown={isNewPageInputShown}
         setNewPageInputShown={setNewPageInputShown}