refactor types

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

@@ -10,7 +10,6 @@ import { useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { UncontrolledTooltip } from 'reactstrap';
 
-import type { IPageForItem } from '~/interfaces/page';
 import { useSWRxPageChildren } from '~/stores/page-listing';
 import { usePageTreeDescCountMap } from '~/stores/ui';
 import { shouldRecoverPagePaths } from '~/utils/page-operation';
@@ -19,7 +18,7 @@ import CountBadge from '../Common/CountBadge';
 
 import { ItemNode } from './ItemNode';
 import { useNewPageInput } from './UseNewPageInput';
-import { SimpleItemProps, SimpleItemStateHandlers, SimpleItemToolProps } from './interfaces';
+import type { SimpleItemContentProps, SimpleItemProps, SimpleItemToolProps } from './interfaces';
 
 
 // Utility to mark target
@@ -104,12 +103,6 @@ export const SimpleItemTool: FC<SimpleItemToolProps> = (props) => {
   );
 };
 
-type SimpleItemContentProps = SimpleItemProps & {
-  page: IPageForItem,
-  children: ItemNode[],
-  stateHandlers: SimpleItemStateHandlers,
-};
-
 export const SimpleItem: FC<SimpleItemProps> = (props) => {
   const {
     itemNode, targetPathOrId, isOpen: _isOpen = false,
@@ -126,11 +119,6 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
 
   const { data } = useSWRxPageChildren(isOpen ? page._id : null);
 
-  const stateHandlers = {
-    isOpen,
-    setIsOpen,
-  };
-
   // descendantCount
   const { getDescCount } = usePageTreeDescCountMap();
   const descendantCount = getDescCount(page._id) || page.descendantCount || 0;
@@ -176,7 +164,12 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
 
   const ItemClassFixed = itemClass ?? SimpleItem;
 
-  const commonProps = {
+  const CustomEndComponents = props.customEndComponents;
+
+  const SimpleItemContent = CustomEndComponents ?? [SimpleItemTool];
+
+  const simpleItemProps: SimpleItemProps = {
+    itemNode,
     isEnableActions,
     isReadOnlyUser,
     isOpen: false,
@@ -184,23 +177,13 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
     onRenamed,
     onClickDuplicateMenuItem,
     onClickDeleteMenuItem,
-    stateHandlers,
   };
 
-  const CustomEndComponents = props.customEndComponents;
-
-  const SimpleItemContent = CustomEndComponents ?? [SimpleItemTool];
-
-  const SimpleItemContentProps: SimpleItemContentProps = {
-    itemNode,
+  const simpleItemContentProps: SimpleItemContentProps = {
+    ...simpleItemProps,
     page,
-    onRenamed,
-    onClickDuplicateMenuItem,
-    onClickDeleteMenuItem,
-    isEnableActions,
-    isReadOnlyUser,
     children,
-    stateHandlers,
+    stateHandlers: { isOpen, setIsOpen },
   };
 
   const CustomNextComponents = props.customNextComponents;
@@ -233,19 +216,19 @@ export const SimpleItem: FC<SimpleItemProps> = (props) => {
         </div>
         {SimpleItemContent.map((ItemContent, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <ItemContent key={index} {...SimpleItemContentProps} />
+          <ItemContent key={index} {...simpleItemContentProps} />
         ))}
       </li>
 
       {CustomNextComponents?.map((UnderItemContent, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <UnderItemContent key={index} {...SimpleItemContentProps} />
+        <UnderItemContent key={index} {...simpleItemContentProps} />
       ))}
 
       {
         isOpen && hasChildren() && currentChildren.map((node, index) => (
           <div key={node.page._id} className="grw-pagetree-item-children">
-            <ItemClassFixed itemNode={node} {...commonProps} />
+            <ItemClassFixed {...simpleItemProps} />
             {isProcessingSubmission && (currentChildren.length - 1 === index) && (
               <div className="text-muted text-center">
                 <i className="fa fa-spinner fa-pulse mr-1"></i>

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

@@ -4,23 +4,24 @@ import { apiv3Post } from '~/client/util/apiv3-client';
 import { useSWRxPageChildren } from '~/stores/page-listing';
 import { usePageTreeDescCountMap } from '~/stores/ui';
 
-import { ItemNode } from './ItemNode';
 import { NewPageCreateButton } from './NewPageCreateButton';
 import { NewPageInput } from './NewPageInput';
-import { SimpleItemToolProps } from './interfaces';
+import type { SimpleItemContentProps } from './interfaces';
 
-type UseNewPageInputProps = SimpleItemToolProps & {
-  children: ItemNode[],
-};
+type UseNewPageInput = {
+  NewPageInputWrapper: FC<SimpleItemContentProps>,
+  NewPageCreateButtonWrapper: FC<SimpleItemContentProps>,
+  isProcessingSubmission: boolean,
+}
 
-export const useNewPageInput = () => {
+export const useNewPageInput = (): UseNewPageInput => {
 
   const [showInput, setShowInput] = useState(false);
   const [isProcessingSubmission, setProcessingSubmission] = useState(false);
 
   const { getDescCount } = usePageTreeDescCountMap();
 
-  const NewPageCreateButtonWrapper: FC<UseNewPageInputProps> = (props) => {
+  const NewPageCreateButtonWrapper: FC<SimpleItemContentProps> = (props) => {
 
     const { page, children, stateHandlers } = props;
     const { setIsOpen } = stateHandlers;
@@ -47,7 +48,7 @@ export const useNewPageInput = () => {
     );
   };
 
-  const NewPageInputWrapper: FC<UseNewPageInputProps> = (props) => {
+  const NewPageInputWrapper: FC<SimpleItemContentProps> = (props) => {
 
     const {
       page, children, stateHandlers,
@@ -87,15 +88,17 @@ export const useNewPageInput = () => {
       setProcessingSubmission(false);
     }, []);
 
-    return showInput && (
-      <NewPageInput
-        page={props.page}
-        isEnableActions={props.isEnableActions}
-        onSubmit={submitHandler}
-        onSubmittionFailed={submittionFailedHandler}
-        onCanceled={() => setShowInput(false)}
-      />
-    );
+    return showInput
+      ? (
+        <NewPageInput
+          page={props.page}
+          isEnableActions={props.isEnableActions}
+          onSubmit={submitHandler}
+          onSubmittionFailed={submittionFailedHandler}
+          onCanceled={() => setShowInput(false)}
+        />
+      )
+      : <></>;
   };
 
   return {

apps/app/src/components/TreeItem/interfaces/index.ts

@@ -6,16 +6,10 @@ import type { IPageForPageDuplicateModal } from '~/stores/modal';
 
 import type { ItemNode } from '../ItemNode';
 
-export type SimpleItemStateHandlers = {
-  isOpen: boolean,
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
-};
-
 type SimpleItemToolPropsOptional = 'itemNode' | 'targetPathOrId' | 'isOpen' | 'itemRef' | 'itemClass' | 'mainClassName';
 
 export type SimpleItemToolProps = Omit<SimpleItemProps, SimpleItemToolPropsOptional> & {
   page: IPageForItem,
-  stateHandlers: SimpleItemStateHandlers,
 };
 
 export type SimpleItemProps = {
@@ -33,3 +27,12 @@ export type SimpleItemProps = {
   customEndComponents?: Array<React.FunctionComponent<SimpleItemToolProps>>
   customNextComponents?: Array<React.FunctionComponent<SimpleItemToolProps>>
 };
+
+export type SimpleItemContentProps = SimpleItemToolProps & {
+  page: IPageForItem,
+  children: ItemNode[],
+  stateHandlers: {
+    isOpen: boolean,
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
+  },
+};