[PE-238] refactor: page store hooks (#6409)

* refactor: page store hooks

* fix: page details instances

* fix: build errors

* refactor: page store hooks

* fix: minor bug

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx

@@ -19,7 +19,9 @@ import { IssuePeekOverview } from "@/components/issues";
 import { PageRoot, TPageRootConfig, TPageRootHandlers } from "@/components/pages";
 // hooks
 import { useEditorConfig } from "@/hooks/editor";
-import { useEditorAsset, useProjectPage, useProjectPages, useWorkspace } from "@/hooks/store";
+import { useEditorAsset, useWorkspace } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
 // plane web services
 import { WorkspaceService } from "@/plane-web/services";
 // services
@@ -31,13 +33,16 @@ const projectPageVersionService = new ProjectPageVersionService();
 const PageDetailsPage = observer(() => {
   const { workspaceSlug, projectId, pageId } = useParams();
   // store hooks
-  const { createPage, getPageById } = useProjectPages();
-  const page = useProjectPage(pageId?.toString() ?? "");
+  const { createPage, fetchPageDetails } = usePageStore(EPageStoreType.PROJECT);
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
   const { getWorkspaceBySlug } = useWorkspace();
   const { uploadEditorAsset } = useEditorAsset();
   // derived values
   const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
-  const { canCurrentUserAccessPage, id, name, updateDescription } = page;
+  const { canCurrentUserAccessPage, id, name, updateDescription } = page ?? {};
   // entity search handler
   const fetchEntityCallback = useCallback(
     async (payload: TSearchEntityRequestPayload) =>
@@ -53,7 +58,7 @@ const PageDetailsPage = observer(() => {
   const { error: pageDetailsError } = useSWR(
     workspaceSlug && projectId && pageId ? `PAGE_DETAILS_${pageId}` : null,
     workspaceSlug && projectId && pageId
-      ? () => getPageById(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
+      ? () => fetchPageDetails(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
       : null,
     {
       revalidateIfStale: true,
@@ -70,8 +75,8 @@ const PageDetailsPage = observer(() => {
         return await projectPageVersionService.fetchAllVersions(workspaceSlug.toString(), projectId.toString(), pageId);
       },
       fetchDescriptionBinary: async () => {
-        if (!workspaceSlug || !projectId || !page.id) return;
-        return await projectPageService.fetchDescriptionBinary(workspaceSlug.toString(), projectId.toString(), page.id);
+        if (!workspaceSlug || !projectId || !id) return;
+        return await projectPageService.fetchDescriptionBinary(workspaceSlug.toString(), projectId.toString(), id);
       },
       fetchEntity: fetchEntityCallback,
       fetchVersionDetails: async (pageId, versionId) => {
@@ -84,9 +89,9 @@ const PageDetailsPage = observer(() => {
         );
       },
       getRedirectionLink: (pageId) => `/${workspaceSlug}/projects/${projectId}/pages/${pageId}`,
-      updateDescription,
+      updateDescription: updateDescription ?? (async () => {}),
     }),
-    [createPage, fetchEntityCallback, page.id, projectId, updateDescription, workspaceSlug]
+    [createPage, fetchEntityCallback, id, projectId, updateDescription, workspaceSlug]
   );
   // page root config
   const pageRootConfig: TPageRootConfig = useMemo(
@@ -145,6 +150,8 @@ const PageDetailsPage = observer(() => {
       </div>
     );
 
+  if (!page) return null;
+
   return (
     <>
       <PageHead title={name} />
@@ -154,6 +161,7 @@ const PageDetailsPage = observer(() => {
             config={pageRootConfig}
             handlers={pageRootHandlers}
             page={page}
+            storeType={EPageStoreType.PROJECT}
             webhookConnectionParams={webhookConnectionParams}
             workspaceSlug={workspaceSlug?.toString() ?? ""}
           />

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx

@@ -15,11 +15,13 @@ import { PageEditInformationPopover } from "@/components/pages";
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getPageName } from "@/helpers/page.helper";
 // hooks
-import { useProjectPage, useProject } from "@/hooks/store";
+import { useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
+// plane web hooks
+import { EPageStoreType, usePage } from "@/plane-web/hooks/store";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
@@ -32,7 +34,12 @@ export const PageDetailsHeader = observer(() => {
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const page = useProjectPage(pageId?.toString() ?? "");
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
+  if (!page) return null;
+  // derived values
   const { name, logo_props, updatePageLogo, isContentEditable } = page;
   // use platform
   const { isMobile } = usePlatformOS();

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx

@@ -13,9 +13,11 @@ import { Breadcrumbs, Button, Header, setToast, TOAST_TYPE } from "@plane/ui";
 // helpers
 import { BreadcrumbLink } from "@/components/common";
 // hooks
-import { useEventTracker, useProject, useProjectPages } from "@/hooks/store";
+import { useEventTracker, useProject } from "@/hooks/store";
 // plane web
 import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 
 export const PagesListHeader = observer(() => {
   // states
@@ -27,7 +29,7 @@ export const PagesListHeader = observer(() => {
   const pageType = searchParams.get("type");
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const { canCurrentUserCreatePage, createPage } = useProjectPages();
+  const { canCurrentUserCreatePage, createPage } = usePageStore(EPageStoreType.PROJECT);
   const { setTrackElement } = useEventTracker();
   // handle page create
   const handleCreatePage = async () => {

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx

@@ -14,6 +14,8 @@ import { PagesListRoot, PagesListView } from "@/components/pages";
 import { useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 
 const ProjectPagesPage = observer(() => {
   // router
@@ -63,11 +65,12 @@ const ProjectPagesPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <PagesListView
-        workspaceSlug={workspaceSlug.toString()}
-        projectId={projectId.toString()}
         pageType={currentPageType()}
+        projectId={projectId.toString()}
+        storeType={EPageStoreType.PROJECT}
+        workspaceSlug={workspaceSlug.toString()}
       >
-        <PagesListRoot pageType={currentPageType()} />
+        <PagesListRoot pageType={currentPageType()} storeType={EPageStoreType.PROJECT} />
       </PagesListView>
     </>
   );