hide creating template page menu when the page is not creatable

apps/app/src/client/services/use-on-template-button-clicked.ts

@@ -5,43 +5,40 @@ import { useRouter } from 'next/router';
 
 import { createPage, exist } from '~/client/services/page-operation';
 import type { LabelType } from '~/interfaces/template';
+import { EditorMode, useEditorMode } from '~/stores/ui';
 
 export const useOnTemplateButtonClicked = (
     currentPagePath?: string,
     isLoading?: boolean,
 ): {
-  onClickHandler: (label: LabelType) => Promise<void>,
-  isPageCreating: boolean
+  isCreatable: boolean,
+  isPageCreating: boolean,
+  onClickHandler?: (label: LabelType) => Promise<void>,
 } => {
   const router = useRouter();
+
+  const { mutate: mutateEditorMode } = useEditorMode();
+
   const [isPageCreating, setIsPageCreating] = useState(false);
 
+  const isCreatable = currentPagePath != null && isCreatablePage(`${currentPagePath}/_template`);
+
   const onClickHandler = useCallback(async(label: LabelType) => {
-    if (isLoading) return;
+    if (isLoading || !isCreatable) return;
 
     try {
       setIsPageCreating(true);
 
-      const targetPath = currentPagePath == null || currentPagePath === '/'
-        ? `/${label}`
-        : `${currentPagePath}/${label}`;
-
-      const path = isCreatablePage(targetPath) ? targetPath : `/${label}`;
-
-      const res = await exist(JSON.stringify([path]));
-      if (!res.pages[path]) {
-        const params = {
-          isSlackEnabled: false,
-          slackChannels: '',
-          grant: 4,
-        // grant: currentPage?.grant || 1,
-        // grantUserGroupId: currentPage?.grantedGroup?._id,
-        };
+      const templatePagePath = `${currentPagePath}/${label}`;
+      const res = await exist(JSON.stringify([templatePagePath]));
+      const isExists = res.pages[templatePagePath];
 
-        await createPage(path, '', params);
+      if (!isExists) {
+        await createPage({ path: templatePagePath });
       }
 
-      router.push(`${path}#edit`);
+      router.push(`${templatePagePath}#edit`);
+      mutateEditorMode(EditorMode.Editor);
     }
     catch (err) {
       throw err;
@@ -49,7 +46,11 @@ export const useOnTemplateButtonClicked = (
     finally {
       setIsPageCreating(false);
     }
-  }, [currentPagePath, isLoading, router]);
+  }, [currentPagePath, isCreatable, isLoading, mutateEditorMode, router]);
 
-  return { onClickHandler, isPageCreating };
+  return {
+    isCreatable,
+    isPageCreating,
+    onClickHandler: isCreatable ? onClickHandler : undefined,
+  };
 };

apps/app/src/components/CreateTemplateModal.tsx

@@ -6,7 +6,7 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 
 import { useOnTemplateButtonClicked } from '~/client/services/use-on-template-button-clicked';
 import { toastError } from '~/client/util/toastr';
-import { TargetType, LabelType } from '~/interfaces/template';
+import type { TargetType, LabelType } from '~/interfaces/template';
 
 
 type TemplateCardProps = {
@@ -55,16 +55,16 @@ export const CreateTemplateModal: React.FC<CreateTemplateModalProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const { onClickHandler: onClickTemplateButton, isPageCreating } = useOnTemplateButtonClicked(path);
+  const { onClickHandler, isPageCreating } = useOnTemplateButtonClicked(path);
 
   const onClickTemplateButtonHandler = useCallback(async(label: LabelType) => {
     try {
-      await onClickTemplateButton(label);
+      await onClickHandler?.(label);
     }
     catch (err) {
       toastError(err);
     }
-  }, [onClickTemplateButton]);
+  }, [onClickHandler]);
 
   const parentPath = pathUtils.addTrailingSlash(path);
 
@@ -79,6 +79,10 @@ export const CreateTemplateModal: React.FC<CreateTemplateModalProps> = ({
     </div>
   );
 
+  if (!isPageCreating) {
+    return <></>;
+  }
+
   return (
     <Modal isOpen={isOpen} toggle={onClose} data-testid="page-template-modal">
       <ModalHeader tag="h4" toggle={onClose} className="bg-primary text-light">

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

@@ -3,13 +3,13 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { DropdownMenu, DropdownItem } from 'reactstrap';
 
-import { LabelType } from '~/interfaces/template';
+import type { LabelType } from '~/interfaces/template';
 
 
 type DropendMenuProps = {
   onClickCreateNewPageButtonHandler: () => Promise<void>
   onClickCreateTodaysButtonHandler: () => Promise<void>
-  onClickTemplateButtonHandler: (label: LabelType) => Promise<void>
+  onClickTemplateButtonHandler?: (label: LabelType) => Promise<void>
   todaysPath: string | null,
 }
 
@@ -32,6 +32,7 @@ export const DropendMenu = React.memo((props: DropendMenuProps): JSX.Element =>
       >
         {t('create_page_dropdown.new_page')}
       </DropdownItem>
+
       {todaysPath != null && (
         <>
           <DropdownItem divider />
@@ -43,18 +44,23 @@ export const DropendMenu = React.memo((props: DropendMenuProps): JSX.Element =>
           </DropdownItem>
         </>
       )}
-      <DropdownItem divider />
-      <li><span className="text-muted text-nowrap px-3">{t('create_page_dropdown.template.desc')}</span></li>
-      <DropdownItem
-        onClick={() => onClickTemplateButtonHandler('_template')}
-      >
-        {t('create_page_dropdown.template.children')}
-      </DropdownItem>
-      <DropdownItem
-        onClick={() => onClickTemplateButtonHandler('__template')}
-      >
-        {t('create_page_dropdown.template.descendants')}
-      </DropdownItem>
+
+      { onClickTemplateButtonHandler != null && (
+        <>
+          <DropdownItem divider />
+          <li><span className="text-muted text-nowrap px-3">{t('create_page_dropdown.template.desc')}</span></li>
+          <DropdownItem
+            onClick={() => onClickTemplateButtonHandler('_template')}
+          >
+            {t('create_page_dropdown.template.children')}
+          </DropdownItem>
+          <DropdownItem
+            onClick={() => onClickTemplateButtonHandler('__template')}
+          >
+            {t('create_page_dropdown.template.descendants')}
+          </DropdownItem>
+        </>
+      ) }
     </DropdownMenu>
   );
 });

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

@@ -45,11 +45,14 @@ export const PageCreateButton = React.memo((): JSX.Element => {
   // TODO: https://redmine.weseek.co.jp/issues/138806
   const { onClickHandler: onClickTodaysButton, isPageCreating: isTodaysPageCreating } = useOnTodaysButtonClicked(todaysPath);
   // TODO: https://redmine.weseek.co.jp/issues/138805
-  const { onClickHandler: onClickTemplateButton, isPageCreating: isTemplatePageCreating } = useOnTemplateButtonClicked(currentPagePath, isLoadingPagePath);
+  const {
+    onClickHandler: onClickTemplateButton,
+    isPageCreating: isTemplatePageCreating, isCreatable: isTemplatePageCreatable,
+  } = useOnTemplateButtonClicked(currentPagePath, isLoadingPagePath);
 
   const onClickTemplateButtonHandler = useCallback(async(label: LabelType) => {
     try {
-      await onClickTemplateButton(label);
+      await onClickTemplateButton?.(label);
     }
     catch (err) {
       toastError(err);
@@ -91,7 +94,7 @@ export const PageCreateButton = React.memo((): JSX.Element => {
           <DropendMenu
             onClickCreateNewPageButtonHandler={onClickNewButton}
             onClickCreateTodaysButtonHandler={onClickTodaysButton}
-            onClickTemplateButtonHandler={onClickTemplateButtonHandler}
+            onClickTemplateButtonHandler={isTemplatePageCreatable ? onClickTemplateButtonHandler : undefined}
             todaysPath={todaysPath}
           />
         </Dropdown>