refactor hook

apps/app/src/client/services/create-page/use-create-page.tsx

@@ -7,8 +7,8 @@ import { exist, getIsNonUserRelatedGroupsGranted } from '~/client/services/page-
 import { toastWarning } from '~/client/util/toastr';
 import type { IApiv3PageCreateParams } from '~/interfaces/apiv3';
 import { useGrantedGroupsInheritanceSelectModal } from '~/stores/modal';
-import { mutateUntitledPage, useCurrentPagePath } from '~/stores/page';
-import { EditorMode, useEditorMode } from '~/stores/ui';
+import { useCurrentPagePath } from '~/stores/page';
+import { EditorMode, useEditorMode, useIsUntitledPage } from '~/stores/ui';
 
 import { createPage } from './create-page';
 
@@ -51,6 +51,7 @@ export const useCreatePage: UseCreatePage = () => {
 
   const { data: currentPagePath } = useCurrentPagePath();
   const { mutate: mutateEditorMode } = useEditorMode();
+  const { mutate: mutateIsUntitledPage } = useIsUntitledPage();
   const { open: openGrantedGroupsInheritanceSelectModal, close: closeGrantedGroupsInheritanceSelectModal } = useGrantedGroupsInheritanceSelectModal();
 
   const [isCreating, setCreating] = useState(false);
@@ -108,7 +109,7 @@ export const useCreatePage: UseCreatePage = () => {
         }
 
         if (params.path == null) {
-          mutateUntitledPage(response.page._id, true);
+          mutateIsUntitledPage(true);
         }
 
         onCreated?.();
@@ -133,7 +134,7 @@ export const useCreatePage: UseCreatePage = () => {
     }
 
     await _create();
-  }, [currentPagePath, mutateEditorMode, router, openGrantedGroupsInheritanceSelectModal, closeGrantedGroupsInheritanceSelectModal, t]);
+  }, [currentPagePath, mutateEditorMode, router, t, closeGrantedGroupsInheritanceSelectModal, mutateIsUntitledPage, openGrantedGroupsInheritanceSelectModal]);
 
   return {
     isCreating,

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

@@ -37,13 +37,12 @@ import {
 } from '~/stores/editor';
 import {
   useCurrentPagePath, useSWRxCurrentPage, useCurrentPageId, useIsNotFound, useTemplateBodyData, useSWRxCurrentGrantData,
-  useUntitledPage,
 } from '~/stores/page';
 import { mutatePageTree } from '~/stores/page-listing';
 import { usePreviewOptions } from '~/stores/renderer';
 import {
   EditorMode,
-  useEditorMode, useSelectedGrant,
+  useEditorMode, useIsUntitledPage, useSelectedGrant,
 } from '~/stores/ui';
 import { useEditingUsers } from '~/stores/use-editing-users';
 import { useNextThemes } from '~/stores/use-next-themes';
@@ -102,6 +101,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const { data: isEditable } = useIsEditable();
   const { mutate: mutateWaitingSaveProcessing } = useWaitingSaveProcessing();
   const { data: editorMode, mutate: mutateEditorMode } = useEditorMode();
+  const { data: isUntitledPage } = useIsUntitledPage();
   const { data: isIndentSizeForced } = useIsIndentSizeForced();
   const { data: currentIndentSize, mutate: mutateCurrentIndentSize } = useCurrentIndentSize();
   const { data: defaultIndentSize } = useDefaultIndentSize();
@@ -128,10 +128,6 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
   const currentRevisionId = currentPage?.revision?._id;
   const isRevisionIdRequiredForPageUpdate = currentPage?.revision?.origin === undefined;
 
-  const currentPageTitle = currentPagePath != null ? nodePath.basename(currentPagePath) : undefined;
-
-  const { data: isUntitledPage } = useUntitledPage(currentPage?._id);
-
   const initialValueRef = useRef('');
   const initialValue = useMemo(() => {
     if (!isNotFound) {
@@ -282,7 +278,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   // set handler to focus
   useLayoutEffect(() => {
-    if (editorMode === EditorMode.Editor && !isUntitledPage) {
+    if (editorMode === EditorMode.Editor && isUntitledPage === false) {
       codeMirrorEditor?.focus();
     }
   }, [codeMirrorEditor, editorMode, isUntitledPage]);

apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -11,8 +11,7 @@ import { useTranslation } from 'next-i18next';
 
 import type { InputValidationResult } from '~/client/util/use-input-validator';
 import { ValidationTarget, useInputValidator } from '~/client/util/use-input-validator';
-import { useUntitledPage } from '~/stores/page';
-import { EditorMode, useEditorMode } from '~/stores/ui';
+import { EditorMode, useEditorMode, useIsUntitledPage } from '~/stores/ui';
 
 import { CopyDropdown } from '../Common/CopyDropdown';
 import { AutosizeSubmittableInput, getAdjustedMaxWidthForAutosizeInput } from '../Common/SubmittableInput';
@@ -51,7 +50,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
   const editedPageTitle = nodePath.basename(editedPagePath);
 
   const { data: editorMode } = useEditorMode();
-  const { data: isUntitledPage, mutate: mutateUntitledPage } = useUntitledPage(currentPage._id);
+  const { data: isUntitledPage, mutate: mutateIsUntitledPage } = useIsUntitledPage();
 
   const changeHandler = useCallback(async(e: ChangeEvent<HTMLInputElement>) => {
     const newPageTitle = pathUtils.removeHeadingSlash(e.target.value);
@@ -71,7 +70,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
         setRenameInputShown(false);
         setValidationResult(undefined);
         onMoveTerminated?.();
-        mutateUntitledPage(false);
+        mutateIsUntitledPage(false);
       },
       () => {
         setRenameInputShown(true);
@@ -81,7 +80,7 @@ export const PageTitleHeader = (props: Props): JSX.Element => {
         setValidationResult(undefined);
         onMoveTerminated?.();
       });
-  }, [editedPagePath, mutateUntitledPage, onMoveTerminated, pagePathRenameHandler]);
+  }, [editedPagePath, mutateIsUntitledPage, onMoveTerminated, pagePathRenameHandler]);
 
   const cancel = useCallback(() => {
     setEditedPagePath(currentPagePath);

apps/app/src/stores/page.tsx

@@ -239,22 +239,6 @@ export const useSWRxPageRevision = (pageId: string, revisionId: Ref<IRevision>):
   );
 };
 
-export const useUntitledPage = (pageId?: string): SWRResponse<boolean> => {
-
-  const key = `untitled/${pageId}`;
-
-  return useSWR(key, null);
-
-};
-
-export const mutateUntitledPage = (pageId: string, isUntitledPage: boolean): void => {
-
-  const key = `untitled/${pageId}`;
-
-  mutate(key, isUntitledPage);
-
-};
-
 /*
  * SWR Infinite for page revision list
  */

apps/app/src/stores/ui.tsx

@@ -510,3 +510,14 @@ export const useIsAbleToShowPageAuthors = (): SWRResponse<boolean, Error> => {
     () => isPageExist && !isUsersTopPagePath,
   );
 };
+
+export const useIsUntitledPage = (): SWRResponse<boolean> => {
+  const key = 'isUntitledPage';
+
+  const { data: pageId } = useCurrentPageId();
+
+  return useSWRImmutable(
+    pageId == null ? null : [key, pageId],
+  );
+
+};