[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

Author: aaryan610

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>
     </>
   );

web/ce/components/command-palette/modals/project-level.tsx

@@ -6,6 +6,8 @@ import { CreatePageModal } from "@/components/pages";
 import { CreateUpdateProjectViewModal } from "@/components/views";
 // hooks
 import { useCommandPalette } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 
 export type TProjectLevelModalsProps = {
   workspaceSlug: string;
@@ -53,6 +55,7 @@ export const ProjectLevelModals = observer((props: TProjectLevelModalsProps) =>
         pageAccess={createPageModal.pageAccess}
         handleModalClose={() => toggleCreatePageModal({ isOpen: false })}
         redirectionEnabled
+        storeType={EPageStoreType.PROJECT}
       />
     </>
   );

web/ce/hooks/store/index.ts

@@ -0,0 +1,2 @@
+export * from "./use-page-store";
+export * from "./use-page";

web/ce/hooks/store/use-page-store.ts

@@ -0,0 +1,24 @@
+import { useContext } from "react";
+// context
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import { IProjectPageStore } from "@/store/pages/project-page.store";
+
+export enum EPageStoreType {
+  PROJECT = "PROJECT_PAGE",
+}
+
+export type TReturnType = {
+  [EPageStoreType.PROJECT]: IProjectPageStore;
+};
+
+export const usePageStore = <T extends EPageStoreType>(storeType: T): TReturnType[T] => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePageStore must be used within StoreProvider");
+
+  if (storeType === EPageStoreType.PROJECT) {
+    return context.projectPages;
+  }
+
+  throw new Error(`Invalid store type: ${storeType}`);
+};

web/ce/hooks/store/use-page.ts

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
+
+export type TArgs = {
+  pageId: string;
+  storeType: EPageStoreType;
+};
+
+export const usePage = (args: TArgs) => {
+  const { pageId, storeType } = args;
+  // context
+  const context = useContext(StoreContext);
+  // store hooks
+  const pageStore = usePageStore(storeType);
+
+  if (context === undefined) throw new Error("usePage must be used within StoreProvider");
+  if (!pageId) throw new Error("pageId is required");
+
+  return pageStore.getPageById(pageId);
+};

web/core/components/pages/dropdowns/actions.tsx

@@ -30,6 +30,7 @@ import { usePageOperations } from "@/hooks/use-page-operations";
 // plane web components
 import { MovePageModal } from "@/plane-web/components/pages";
 // plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 import { usePageFlag } from "@/plane-web/hooks/use-page-flag";
 // store types
 import { TPageInstance } from "@/store/pages/base-page";
@@ -55,10 +56,11 @@ type Props = {
   optionsOrder: TPageActions[];
   page: TPageInstance;
   parentRef?: React.RefObject<HTMLElement>;
+  storeType: EPageStoreType;
 };
 
 export const PageActions: React.FC<Props> = observer((props) => {
-  const { editorRef, extraOptions, optionsOrder, page, parentRef } = props;
+  const { editorRef, extraOptions, optionsOrder, page, parentRef, storeType } = props;
   // states
   const [deletePageModal, setDeletePageModal] = useState(false);
   const [movePageModal, setMovePageModal] = useState(false);
@@ -175,7 +177,12 @@ export const PageActions: React.FC<Props> = observer((props) => {
   return (
     <>
       <MovePageModal isOpen={movePageModal} onClose={() => setMovePageModal(false)} page={page} />
-      <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} page={page} />
+      <DeletePageModal
+        isOpen={deletePageModal}
+        onClose={() => setDeletePageModal(false)}
+        page={page}
+        storeType={storeType}
+      />
       {parentRef && <ContextMenu parentRef={parentRef} items={arrangedOptions} />}
       <CustomMenu placement="bottom-end" optionsClassName="max-h-[90vh]" ellipsis closeOnSelect>
         {arrangedOptions.map((item) => {

web/core/components/pages/editor/header/extra-options.tsx

@@ -12,16 +12,19 @@ import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import useOnlineStatus from "@/hooks/use-online-status";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
 import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
   editorRef: EditorRefApi;
   page: TPageInstance;
+  storeType: EPageStoreType;
 };
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, page } = props;
+  const { editorRef, page, storeType } = props;
   // derived values
   const {
     archived_at,
@@ -84,7 +87,7 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
         />
       )}
       <PageInfoPopover editorRef={editorRef} page={page} />
-      <PageOptionsDropdown editorRef={editorRef} page={page} />
+      <PageOptionsDropdown editorRef={editorRef} page={page} storeType={storeType} />
     </div>
   );
 });