create use is editable page hooks

apps/app/src/client/services/side-effects/hash-changed.ts

@@ -2,7 +2,7 @@ import { useCallback, useEffect } from 'react';
 
 import { useRouter } from 'next/router';
 
-import { useIsEditable } from '~/stores/context';
+import { useIsEditablePage } from '~/stores/page';
 import { useEditorMode, determineEditorModeByHash } from '~/stores/ui';
 
 /**
@@ -11,7 +11,7 @@ import { useEditorMode, determineEditorModeByHash } from '~/stores/ui';
 export const useHashChangedEffect = (): void => {
   const router = useRouter();
 
-  const { data: isEditable } = useIsEditable();
+  const { data: isEditablePage } = useIsEditablePage();
   const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
 
   const hashchangeHandler = useCallback(() => {
@@ -24,7 +24,7 @@ export const useHashChangedEffect = (): void => {
 
   // setup effect
   useEffect(() => {
-    if (!isEditable) {
+    if (!isEditablePage) {
       return;
     }
 
@@ -35,7 +35,7 @@ export const useHashChangedEffect = (): void => {
       window.removeEventListener('hashchange', hashchangeHandler);
     };
 
-  }, [hashchangeHandler, isEditable]);
+  }, [hashchangeHandler, isEditablePage]);
 
   /*
   * Route changes by Next Router

apps/app/src/components/Hotkeys/Subscribers/EditPage.jsx

@@ -2,16 +2,16 @@ import { useEffect } from 'react';
 
 import PropTypes from 'prop-types';
 
-import { useIsEditable } from '~/stores/context';
+import { useIsEditablePage } from '~/stores/page';
 import { EditorMode, useEditorMode } from '~/stores/ui';
 
 const EditPage = (props) => {
-  const { data: isEditable } = useIsEditable();
+  const { data: isEditablePage } = useIsEditablePage();
   const { mutate: mutateEditorMode } = useEditorMode();
 
   // setup effect
   useEffect(() => {
-    if (!isEditable) {
+    if (!isEditablePage) {
       return;
     }
 
@@ -24,7 +24,7 @@ const EditPage = (props) => {
 
     // remove this
     props.onDeleteRender(this);
-  }, [isEditable, mutateEditorMode, props]);
+  }, [isEditablePage, mutateEditorMode, props]);
 
   return null;
 };

apps/app/src/components/Hotkeys/Subscribers/FocusToGlobalSearch.jsx

@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
 
-import { useIsEditable } from '~/stores/context';
+import { useIsEditablePage } from '~/stores/page';
 import { useGlobalSearchFormRef } from '~/stores/ui';
 
 const FocusToGlobalSearch = (props) => {
-  const { data: isEditable } = useIsEditable();
+  const { data: isEditablePage } = useIsEditablePage();
   const { data: globalSearchFormRef } = useGlobalSearchFormRef();
 
   // setup effect
   useEffect(() => {
-    if (!isEditable) {
+    if (!isEditablePage) {
       return;
     }
 
@@ -22,7 +22,7 @@ const FocusToGlobalSearch = (props) => {
 
     // remove this
     props.onDeleteRender();
-  }, [globalSearchFormRef, isEditable, props]);
+  }, [globalSearchFormRef, isEditablePage, props]);
 
   return null;
 };

apps/app/src/components/Page/DisplaySwitcher.tsx

@@ -5,7 +5,7 @@ import dynamic from 'next/dynamic';
 
 import { useHashChangedEffect } from '~/client/services/side-effects/hash-changed';
 import { usePageUpdatedEffect } from '~/client/services/side-effects/page-updated';
-import { useIsEditable } from '~/stores/context';
+import { useIsEditablePage } from '~/stores/page';
 import { EditorMode, useEditorMode } from '~/stores/ui';
 
 import { LazyRenderer } from '../Common/LazyRenderer';
@@ -23,7 +23,7 @@ export const DisplaySwitcher = (props: Props): JSX.Element => {
   const { pageView } = props;
 
   const { data: editorMode = EditorMode.View } = useEditorMode();
-  const { data: isEditable } = useIsEditable();
+  const { data: isEditablePage } = useIsEditablePage();
 
   usePageUpdatedEffect();
   useHashChangedEffect();
@@ -34,11 +34,11 @@ export const DisplaySwitcher = (props: Props): JSX.Element => {
     <>
       { isViewMode && pageView }
 
-      <LazyRenderer shouldRender={isEditable === true && editorMode === EditorMode.Editor}>
+      <LazyRenderer shouldRender={isEditablePage === true && editorMode === EditorMode.Editor}>
         <PageEditor />
       </LazyRenderer>
 
-      { isEditable && !isViewMode && <EditorNavbarBottom /> }
+      { isEditablePage && !isViewMode && <EditorNavbarBottom /> }
     </>
   );
 };

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -23,7 +23,7 @@ import { SocketEventName } from '~/interfaces/websocket';
 import {
   useDefaultIndentSize,
   useCurrentPathname, useIsEnabledAttachTitleHeader,
-  useIsEditable, useIsUploadableFile, useIsUploadableImage, useIsIndentSizeForced,
+  useIsUploadableFile, useIsUploadableImage, useIsIndentSizeForced,
 } from '~/stores/context';
 import {
   useCurrentIndentSize, useIsSlackEnabled, usePageTagsForEditors,
@@ -35,6 +35,7 @@ import {
 import { useConflictDiffModal } from '~/stores/modal';
 import {
   useCurrentPagePath, useSWRMUTxCurrentPage, useSWRxCurrentPage, useSWRxTagsInfo, useCurrentPageId, useIsNotFound, useIsLatestRevision, useTemplateBodyData,
+  useIsEditablePage,
 } from '~/stores/page';
 import { mutatePageTree } from '~/stores/page-listing';
 import {
@@ -100,7 +101,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { data: editingMarkdown, mutate: mutateEditingMarkdown } = useEditingMarkdown();
   const { data: isEnabledAttachTitleHeader } = useIsEnabledAttachTitleHeader();
   const { data: templateBodyData } = useTemplateBodyData();
-  const { data: isEditable } = useIsEditable();
+  const { data: isEditablePage } = useIsEditablePage();
   const { mutate: mutateWaitingSaveProcessing } = useWaitingSaveProcessing();
   const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
   const { data: isSlackEnabled } = useIsSlackEnabled();
@@ -557,7 +558,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
     };
   }, [onRouterChangeComplete, router.events]);
 
-  if (!isEditable) {
+  if (!isEditablePage) {
     return <></>;
   }
 

apps/app/src/components/SavePageControls.tsx

@@ -10,11 +10,9 @@ import {
 } from 'reactstrap';
 
 import type { IPageGrantData } from '~/interfaces/page';
-import {
-  useIsEditable, useIsAclEnabled,
-} from '~/stores/context';
+import { useIsAclEnabled } from '~/stores/context';
 import { useWaitingSaveProcessing } from '~/stores/editor';
-import { useSWRxCurrentPage } from '~/stores/page';
+import { useSWRxCurrentPage, useIsEditablePage } from '~/stores/page';
 import { useSelectedGrant } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
 
@@ -37,7 +35,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
   const { slackChannels } = props;
   const { t } = useTranslation();
   const { data: currentPage } = useSWRxCurrentPage();
-  const { data: isEditable } = useIsEditable();
+  const { data: isEditablePage } = useIsEditablePage();
   const { data: isAclEnabled } = useIsAclEnabled();
   const { data: grantData, mutate: mutateGrant } = useSelectedGrant();
   const { data: _isWaitingSaveProcessing } = useWaitingSaveProcessing();
@@ -59,11 +57,11 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
   }, [slackChannels]);
 
 
-  if (isEditable == null || isAclEnabled == null || grantData == null) {
+  if (isEditablePage == null || isAclEnabled == null || grantData == null) {
     return null;
   }
 
-  if (!isEditable) {
+  if (!isEditablePage) {
     return null;
   }
 

apps/app/src/stores/page.tsx

@@ -24,7 +24,7 @@ import type { AxiosResponse } from '~/utils/axios';
 import type { IPageTagsInfo } from '../interfaces/tag';
 
 import {
-  useCurrentPathname, useShareLinkId, useIsGuestUser, useIsReadOnlyUser,
+  useCurrentPathname, useShareLinkId, useIsGuestUser, useIsReadOnlyUser, useIsExecutePageCreation,
 } from './context';
 
 
@@ -292,3 +292,15 @@ export const useIsTrashPage = (): SWRResponse<boolean, Error> => {
     // { fallbackData:  }
   );
 };
+
+export const useIsEditablePage = (): SWRResponse<boolean, Error> => {
+  const { data: isExecutePageCreation } = useIsExecutePageCreation();
+  const { data: isNotFound } = useIsNotFound();
+
+  return useSWRImmutable(
+    ['isEditablePage', isExecutePageCreation, isNotFound],
+    ([, isExecutePageCreation, isNotFound]) => {
+      return (!!isExecutePageCreation && !isNotFound);
+    },
+  );
+};