refactor useCreateTemplatePage

apps/app/src/client/services/use-create-template-page.ts

@@ -1,56 +1,38 @@
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 
 import { isCreatablePage } from '@growi/core/dist/utils/page-path-utils';
-import { useRouter } from 'next/router';
+import { normalizePath } from '@growi/core/dist/utils/path-utils';
 
-import { createPage, exist } from '~/client/services/page-operation';
 import type { LabelType } from '~/interfaces/template';
-import { EditorMode, useEditorMode } from '~/stores/ui';
+import { useCurrentPagePath } from '~/stores/page';
 
-export const useCreateTemplatePage = (
-    currentPagePath?: string,
-    isLoading?: boolean,
-): {
-  isCreatable: boolean,
-  isPageCreating: boolean,
-  create?: (label: LabelType) => Promise<void>,
-} => {
-  const router = useRouter();
-
-  const { mutate: mutateEditorMode } = useEditorMode();
+import { useCreatePageAndTransit } from './use-create-page-and-transit';
 
-  const [isPageCreating, setIsPageCreating] = useState(false);
-
-  const isCreatable = currentPagePath != null && isCreatablePage(`${currentPagePath}/_template`);
+type UseCreateTemplatePage = () => {
+  isCreatable: boolean,
+  isCreating: boolean,
+  createTemplate?: (label: LabelType) => Promise<void>,
+}
 
-  const create = useCallback(async(label: LabelType) => {
-    if (isLoading || !isCreatable) return;
+export const useCreateTemplatePage: UseCreateTemplatePage = () => {
 
-    try {
-      setIsPageCreating(true);
+  const { data: currentPagePath, isLoading: isLoadingPagePath } = useCurrentPagePath();
 
-      const templatePagePath = `${currentPagePath}/${label}`;
-      const res = await exist(JSON.stringify([templatePagePath]));
-      const isExists = res.pages[templatePagePath];
+  const { isCreating, createAndTransit } = useCreatePageAndTransit();
+  const isCreatable = currentPagePath != null && isCreatablePage(normalizePath(`${currentPagePath}/_template`));
 
-      if (!isExists) {
-        await createPage({ path: templatePagePath });
-      }
+  const createTemplate = useCallback(async(label: LabelType) => {
+    if (isLoadingPagePath || !isCreatable) return;
 
-      router.push(`${templatePagePath}#edit`);
-      mutateEditorMode(EditorMode.Editor);
-    }
-    catch (err) {
-      throw err;
-    }
-    finally {
-      setIsPageCreating(false);
-    }
-  }, [currentPagePath, isCreatable, isLoading, mutateEditorMode, router]);
+    return createAndTransit(
+      { path: normalizePath(`${currentPagePath}/${label}`) },
+      { shouldCheckPageExists: true },
+    );
+  }, [currentPagePath, isCreatable, isLoadingPagePath, createAndTransit]);
 
   return {
     isCreatable,
-    isPageCreating,
-    create: isCreatable ? create : undefined,
+    isCreating,
+    createTemplate: isCreatable ? createTemplate : undefined,
   };
 };

apps/app/src/components/CreateTemplateModal.tsx

@@ -55,16 +55,16 @@ export const CreateTemplateModal: React.FC<CreateTemplateModalProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const { create, isPageCreating, isCreatable } = useCreateTemplatePage(path);
+  const { createTemplate, isCreating, isCreatable } = useCreateTemplatePage();
 
   const onClickTemplateButtonHandler = useCallback(async(label: LabelType) => {
     try {
-      await create?.(label);
+      await createTemplate?.(label);
     }
     catch (err) {
       toastError(err);
     }
-  }, [create]);
+  }, [createTemplate]);
 
   const parentPath = pathUtils.addTrailingSlash(path);
 
@@ -73,7 +73,7 @@ export const CreateTemplateModal: React.FC<CreateTemplateModalProps> = ({
       <TemplateCard
         target={target}
         label={label}
-        isPageCreating={isPageCreating}
+        isPageCreating={isCreating}
         onClickHandler={() => onClickTemplateButtonHandler(label)}
       />
     </div>

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

@@ -10,7 +10,7 @@ import { useCreateTemplatePage } from '~/client/services/use-create-template-pag
 import { toastError } from '~/client/util/toastr';
 import type { LabelType } from '~/interfaces/template';
 import { useCurrentUser } from '~/stores/context';
-import { useCurrentPagePath, useSWRxCurrentPage } from '~/stores/page';
+import { useSWRxCurrentPage } from '~/stores/page';
 
 import { CreateButton } from './CreateButton';
 import { DropendMenu } from './DropendMenu';
@@ -27,7 +27,6 @@ const generateTodaysPath = (currentUser: IUserHasId, parentDirName: string) => {
 export const PageCreateButton = React.memo((): JSX.Element => {
   const { t } = useTranslation('commons');
 
-  const { data: currentPagePath, isLoading: isLoadingPagePath } = useCurrentPagePath();
   const { data: currentPage, isLoading } = useSWRxCurrentPage();
   const { data: currentUser } = useCurrentUser();
 
@@ -46,18 +45,18 @@ export const PageCreateButton = React.memo((): JSX.Element => {
   const { onClickHandler: onClickTodaysButton, isPageCreating: isTodaysPageCreating } = useOnTodaysButtonClicked(todaysPath);
   // TODO: https://redmine.weseek.co.jp/issues/138805
   const {
-    create,
-    isPageCreating: isTemplatePageCreating, isCreatable: isTemplatePageCreatable,
-  } = useCreateTemplatePage(currentPagePath, isLoadingPagePath);
+    createTemplate,
+    isCreating: isTemplatePageCreating, isCreatable: isTemplatePageCreatable,
+  } = useCreateTemplatePage();
 
   const onClickTemplateButtonHandler = useCallback(async(label: LabelType) => {
     try {
-      await create?.(label);
+      await createTemplate?.(label);
     }
     catch (err) {
       toastError(err);
     }
-  }, [create]);
+  }, [createTemplate]);
 
   const onMouseEnterHandler = () => {
     setIsHovered(true);