[PE-238] refactor: page store hooks

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

@@ -12,6 +12,8 @@ import { PagesListRoot, PagesListView } from "@/components/pages";
 import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import { useProject } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 
 const ProjectPagesPage = observer(() => {
   // router
@@ -51,7 +53,7 @@ const ProjectPagesPage = observer(() => {
         projectId={projectId.toString()}
         pageType={currentPageType()}
       >
-        <PagesListRoot pageType={currentPageType()} />
+        <PagesListRoot pageType={currentPageType()} storeType={EPageStoreType.PROJECT} />
       </PagesListView>
     </>
   );

web/ce/hooks/store/index.ts

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

web/core/hooks/store/pages/use-project-page.ts → web/ce/hooks/store/use-page-store.ts

@@ -4,8 +4,21 @@ import { StoreContext } from "@/lib/store-context";
 // mobx store
 import { IProjectPageStore } from "@/store/pages/project-page.store";
 
-export const useProjectPages = (): IProjectPageStore => {
+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("useProjectPage must be used within StoreProvider");
+
+  if (storeType === EPageStoreType.PROJECT) {
+    return context.projectPages;
+  }
+
   return context.projectPages;
 };

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

@@ -0,0 +1,25 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
+// store
+import { TProjectPage } from "@/store/pages/project-page";
+
+export type TArgs = {
+  pageId: string | undefined;
+  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) return {} as TProjectPage;
+
+  return pageStore.data?.[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";
@@ -54,10 +55,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);
@@ -174,7 +176,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/list/block-item-action.tsx

@@ -13,15 +13,19 @@ import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { useMember } from "@/hooks/store";
 import { usePageOperations } from "@/hooks/use-page-operations";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
+// store
 import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
   page: TPageInstance;
   parentRef: React.RefObject<HTMLElement>;
+  storeType: EPageStoreType;
 };
 
 export const BlockItemAction: FC<Props> = observer((props) => {
-  const { page, parentRef } = props;
+  const { page, parentRef, storeType } = props;
   // store hooks
   const { getUserDetails } = useMember();
   // page operations
@@ -80,6 +84,7 @@ export const BlockItemAction: FC<Props> = observer((props) => {
         ]}
         page={page}
         parentRef={parentRef}
+        storeType={storeType}
       />
     </>
   );

web/core/components/pages/list/block.tsx

@@ -11,19 +11,23 @@ import { BlockItemAction } from "@/components/pages/list";
 import { getPageName } from "@/helpers/page.helper";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { TUsePage } from "@/store/pages/base-page";
+// plane web hooks
+import { EPageStoreType, usePage } from "@/plane-web/hooks/store";
 
 type TPageListBlock = {
   pageId: string;
-  usePage: TUsePage;
+  storeType: EPageStoreType;
 };
 
 export const PageListBlock: FC<TPageListBlock> = observer((props) => {
-  const { pageId, usePage } = props;
+  const { pageId, storeType } = props;
   // refs
   const parentRef = useRef(null);
   // hooks
-  const page = usePage(pageId);
+  const page = usePage({
+    pageId,
+    storeType,
+  });
   const { isMobile } = usePlatformOS();
   // derived values
   const { name, logo_props, getRedirectionLink } = page;
@@ -41,7 +45,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
       }
       title={getPageName(name)}
       itemLink={getRedirectionLink()}
-      actionableItems={<BlockItemAction page={page} parentRef={parentRef} />}
+      actionableItems={<BlockItemAction page={page} parentRef={parentRef} storeType={storeType} />}
       isMobile={isMobile}
       parentRef={parentRef}
     />

web/core/components/pages/list/root.tsx

@@ -4,27 +4,28 @@ import { observer } from "mobx-react";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { ListLayout } from "@/components/core/list";
-// hooks
-import { useProjectPage, useProjectPages } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 // components
 import { PageListBlock } from "./";
 
 type TPagesListRoot = {
   pageType: TPageNavigationTabs;
+  storeType: EPageStoreType;
 };
 
 export const PagesListRoot: FC<TPagesListRoot> = observer((props) => {
-  const { pageType } = props;
+  const { pageType, storeType } = props;
   // store hooks
-  const { getCurrentProjectFilteredPageIds } = useProjectPages();
+  const { getCurrentProjectFilteredPageIds } = usePageStore(storeType);
   // derived values
   const filteredPageIds = getCurrentProjectFilteredPageIds(pageType);
 
   if (!filteredPageIds) return <></>;
   return (
     <ListLayout>
       {filteredPageIds.map((pageId) => (
-        <PageListBlock key={pageId} pageId={pageId} usePage={useProjectPage} />
+        <PageListBlock key={pageId} pageId={pageId} storeType={storeType} />
       ))}
     </ListLayout>
   );

web/core/components/pages/modals/delete-page-modal.tsx

@@ -7,21 +7,25 @@ import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { PAGE_DELETED } from "@/constants/event-tracker";
 // hooks
-import { useEventTracker, useProjectPages } from "@/hooks/store";
+import { useEventTracker } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
+// store
 import { TPageInstance } from "@/store/pages/base-page";
 
 type TConfirmPageDeletionProps = {
-  page: TPageInstance;
   isOpen: boolean;
   onClose: () => void;
+  page: TPageInstance;
+  storeType: EPageStoreType;
 };
 
 export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((props) => {
-  const { page, isOpen, onClose } = props;
+  const { isOpen, onClose, page, storeType } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
-  const { removePage } = useProjectPages();
+  const { removePage } = usePageStore(storeType);
   const { capturePageEvent } = useEventTracker();
   if (!page || !page.id) return null;
   // derived values

web/core/hooks/store/index.ts

@@ -1,6 +1,5 @@
 export * from "./estimates";
 export * from "./notifications";
-export * from "./pages";
 export * from "./use-app-theme";
 export * from "./use-calendar-view";
 export * from "./use-command-palette";

web/core/store/pages/base-page.ts

@@ -64,8 +64,6 @@ export type TPageInstance = TBasePage &
     getRedirectionLink: () => string;
   };
 
-export type TUsePage = (pageId: string | undefined) => TPageInstance;
-
 export class BasePage implements TBasePage {
   // loaders
   isSubmitting: TNameDescriptionLoader = "saved";

web/ee/hooks/store/index.ts

@@ -0,0 +1 @@
+export * from "ce/hooks/store";