optimize custom hook

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

@@ -106,7 +106,7 @@ export const PageEditorSubstance = (props: Props): JSX.Element => {
   const currentPathname = useCurrentPathname();
   const currentPage = useCurrentPageData();
   const [selectedGrant] = useSelectedGrant();
-  const [editingMarkdown] = useEditingMarkdown();
+  const editingMarkdown = useEditingMarkdown();
   const isEnabledAttachTitleHeader = useAtomValue(isEnabledAttachTitleHeaderAtom);
   const templateBody = useTemplateBody();
   const isEditable = useIsEditable();

apps/app/src/client/services/page-operation.ts

@@ -6,8 +6,8 @@ import urljoin from 'url-join';
 
 import type { SyncLatestRevisionBody } from '~/interfaces/yjs';
 import { useIsGuestUser } from '~/states/context';
-import { useCurrentPageId, useFetchCurrentPage, useSetRemoteLatestPageData } from '~/states/page';
-import { useEditingMarkdown } from '~/states/ui/editor';
+import { useFetchCurrentPage, useSetRemoteLatestPageData } from '~/states/page';
+import { useSetEditingMarkdown } from '~/states/ui/editor';
 import { usePageTagsForEditors } from '~/stores/editor';
 import {
   useSWRxApplicableGrant, useSWRxTagsInfo,
@@ -99,13 +99,12 @@ export type UpdateStateAfterSaveOption = {
 }
 
 export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: UpdateStateAfterSaveOption): (() => Promise<void>) | undefined => {
-  const setCurrentPageId = useCurrentPageId();
   const isGuestUser = useIsGuestUser();
   const { fetchCurrentPage } = useFetchCurrentPage();
   const setRemoteLatestPageData = useSetRemoteLatestPageData();
   const { mutate: mutateTagsInfo } = useSWRxTagsInfo(pageId);
   const { sync: syncTagsInfoForEditor } = usePageTagsForEditors(pageId);
-  const [, setEditingMarkdown] = useEditingMarkdown();
+  const setEditingMarkdown = useSetEditingMarkdown();
   const { mutate: mutateCurrentGrantData } = useSWRxCurrentGrantData(isGuestUser ? null : pageId);
   const { mutate: mutateApplicableGrant } = useSWRxApplicableGrant(isGuestUser ? null : pageId);
 
@@ -142,7 +141,7 @@ export const useUpdateStateAfterSave = (pageId: string|undefined|null, opts?: Up
     setRemoteLatestPageData(remoterevisionData);
   },
   // eslint-disable-next-line max-len
-  [pageId, mutateTagsInfo, syncTagsInfoForEditor, setCurrentPageId, fetchCurrentPage, opts?.supressEditingMarkdownMutation, mutateCurrentGrantData, mutateApplicableGrant, setRemoteLatestPageData, setEditingMarkdown]);
+  [pageId, mutateTagsInfo, syncTagsInfoForEditor, fetchCurrentPage, opts?.supressEditingMarkdownMutation, mutateCurrentGrantData, mutateApplicableGrant, setRemoteLatestPageData, setEditingMarkdown]);
 };
 
 export const unlink = async(path: string): Promise<void> => {

apps/app/src/pages/[[...path]]/index.page.tsx

@@ -20,7 +20,7 @@ import {
 import { useHydratePageAtoms } from '~/states/page/hydrate';
 import { useRendererConfig } from '~/states/server-configurations';
 import { useSetupGlobalSocket, useSetupGlobalSocketForPage } from '~/states/socket-io';
-import { useEditingMarkdown } from '~/states/ui/editor';
+import { useSetEditingMarkdown } from '~/states/ui/editor';
 import { useSWRMUTxCurrentPageYjsData } from '~/stores/yjs';
 
 import type { NextPageWithLayout } from '../_app.page';
@@ -96,7 +96,7 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
   const currentPagePath = useCurrentPagePath();
   const isNotFound = usePageNotFound();
   const rendererConfig = useRendererConfig();
-  const [, setEditingMarkdown] = useEditingMarkdown();
+  const setEditingMarkdown = useSetEditingMarkdown();
 
   const { trigger: mutateCurrentPageYjsDataFromApi } = useSWRMUTxCurrentPageYjsData();
 

apps/app/src/pages/[[...path]]/use-same-route-navigation.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 
 import { useFetchCurrentPage } from '~/states/page';
-import { useEditingMarkdown } from '~/states/ui/editor';
+import { useSetEditingMarkdown } from '~/states/ui/editor';
 
 /**
  * This hook is a trigger to fetch page data on client-side navigation.
@@ -14,7 +14,7 @@ import { useEditingMarkdown } from '~/states/ui/editor';
 export const useSameRouteNavigation = (): void => {
   const router = useRouter();
   const { fetchCurrentPage } = useFetchCurrentPage();
-  const [, setEditingMarkdown] = useEditingMarkdown();
+  const setEditingMarkdown = useSetEditingMarkdown();
 
   // useEffect to trigger data fetching when the path changes
   useEffect(() => {

apps/app/src/states/ui/editor/hooks.ts

@@ -1,4 +1,4 @@
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useCallback } from 'react';
 
 import { useIsEditable } from '~/states/context';
@@ -50,7 +50,8 @@ export const useEditorMode = (): UseEditorModeReturn => {
   };
 };
 
-export const useEditingMarkdown = () => useAtom(editingMarkdownAtom);
+export const useEditingMarkdown = () => useAtomValue(editingMarkdownAtom);
+export const useSetEditingMarkdown = () => useSetAtom(editingMarkdownAtom);
 
 /**
  * Hook for managing selected grant in page editor

apps/app/src/states/ui/editor/index.ts

@@ -1,7 +1,12 @@
 // Export only the essential public API
 
 export { editingMarkdownAtom, selectedGrantAtom } from './atoms';
-export { useEditingMarkdown, useEditorMode, useSelectedGrant } from './hooks';
+export {
+  useEditingMarkdown,
+  useEditorMode,
+  useSelectedGrant,
+  useSetEditingMarkdown,
+} from './hooks';
 export type { EditorMode as EditorModeType } from './types';
 export { EditorMode } from './types';