[PE-182] refactor: pages' components and store for scalability

packages/editor/src/core/types/editor.ts

@@ -1,5 +1,9 @@
 import { Extensions, JSONContent } from "@tiptap/core";
 import { Selection } from "@tiptap/pm/state";
+// plane types
+import { TWebhookConnectionQueryParams } from "@plane/types";
+// extension types
+import { TTextAlign } from "@/extensions";
 // helpers
 import { IMarking } from "@/helpers/scroll-to-node";
 // types
@@ -15,7 +19,6 @@ import {
   TReadOnlyMentionHandler,
   TServerHandler,
 } from "@/types";
-import { TTextAlign } from "@/extensions";
 
 export type TEditorCommands =
   | "text"
@@ -185,7 +188,5 @@ export type TUserDetails = {
 
 export type TRealtimeConfig = {
   url: string;
-  queryParams: {
-    [key: string]: string;
-  };
+  queryParams: TWebhookConnectionQueryParams;
 };

packages/types/src/pages.d.ts

@@ -15,7 +15,8 @@ export type TPage = {
   label_ids: string[] | undefined;
   name: string | undefined;
   owned_by: string | undefined;
-  project_ids: string[] | undefined;
+  project_ids?: string[] | undefined;
+  team: string | null | undefined;
   updated_at: Date | undefined;
   updated_by: string | undefined;
   workspace: string | undefined;
@@ -25,11 +26,7 @@ export type TPage = {
 // page filters
 export type TPageNavigationTabs = "public" | "private" | "archived";
 
-export type TPageFiltersSortKey =
-  | "name"
-  | "created_at"
-  | "updated_at"
-  | "opened_at";
+export type TPageFiltersSortKey = "name" | "created_at" | "updated_at" | "opened_at";
 
 export type TPageFiltersSortBy = "asc" | "desc";
 
@@ -63,10 +60,17 @@ export type TPageVersion = {
   updated_at: string;
   updated_by: string;
   workspace: string;
-}
+};
 
 export type TDocumentPayload = {
   description_binary: string;
   description_html: string;
   description: object;
-}
+};
+
+export type TWebhookConnectionQueryParams = {
+  documentType: "project_page" | "team_page" | "workspace_page";
+  projectId?: string;
+  teamId?: string;
+  workspaceSlug: string;
+};

packages/types/src/search.d.ts

@@ -6,13 +6,7 @@ import { IProject } from "./project";
 import { IUser } from "./users";
 import { IWorkspace } from "./workspace";
 
-export type TSearchEntities =
-  | "user_mention"
-  | "issue_mention"
-  | "project_mention"
-  | "cycle_mention"
-  | "module_mention"
-  | "page_mention";
+export type TSearchEntities = "user_mention" | "issue" | "project" | "cycle" | "module" | "page";
 
 export type TUserSearchResponse = {
   member__avatar_url: IUser["avatar_url"];
@@ -66,11 +60,11 @@ export type TPageSearchResponse = {
 };
 
 export type TSearchResponse = {
-  cycle_mention?: TCycleSearchResponse[];
-  issue_mention?: TIssueSearchResponse[];
-  module_mention?: TModuleSearchResponse[];
-  page_mention?: TPageSearchResponse[];
-  project_mention?: TProjectSearchResponse[];
+  cycle?: TCycleSearchResponse[];
+  issue?: TIssueSearchResponse[];
+  module?: TModuleSearchResponse[];
+  page?: TPageSearchResponse[];
+  project?: TProjectSearchResponse[];
   user_mention?: TUserSearchResponse[];
 };
 

packages/utils/src/index.ts

@@ -4,7 +4,6 @@ export * from "./datetime";
 export * from "./color";
 export * from "./common";
 export * from "./datetime";
-export * from "./editor";
 export * from "./emoji";
 export * from "./file";
 export * from "./issue";

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

@@ -1,29 +1,58 @@
 "use client";
 
+import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// ui
+// plane types
+import { TSearchEntityRequestPayload } from "@plane/types";
+import { EFileAssetType } from "@plane/types/src/enums";
+// plane ui
 import { getButtonStyling } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { IssuePeekOverview } from "@/components/issues";
-import { PageRoot } from "@/components/pages";
+import { PageRoot, TPageRootConfig, TPageRootHandlers } from "@/components/pages";
 // helpers
-import { cn } from "@/helpers/common.helper";
+import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
-import { usePage, useProjectPages } from "@/hooks/store";
+import { useProjectPage, useProjectPages, useWorkspace } from "@/hooks/store";
+// plane web hooks
+import { useFileSize } from "@/plane-web/hooks/use-file-size";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+// services
+import { FileService } from "@/services/file.service";
+import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
+const workspaceService = new WorkspaceService();
+const fileService = new FileService();
+const projectPageService = new ProjectPageService();
+const projectPageVersionService = new ProjectPageVersionService();
 
 const PageDetailsPage = observer(() => {
   const { workspaceSlug, projectId, pageId } = useParams();
-
   // store hooks
-  const { getPageById } = useProjectPages();
-  const page = usePage(pageId?.toString() ?? "");
-  const { id, name } = page;
-
+  const { createPage, getPageById } = useProjectPages();
+  const page = useProjectPage(pageId?.toString() ?? "");
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
+  const { id, name, updateDescription } = page;
+  // entity search handler
+  const fetchEntityCallback = useCallback(
+    async (payload: TSearchEntityRequestPayload) =>
+      await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+        ...payload,
+        project_id: projectId?.toString() ?? "",
+      }),
+    [projectId, workspaceSlug]
+  );
+  // file size
+  const { maxFileSize } = useFileSize();
   // fetch page details
   const { error: pageDetailsError } = useSWR(
     workspaceSlug && projectId && pageId ? `PAGE_DETAILS_${pageId}` : null,
@@ -36,6 +65,62 @@ const PageDetailsPage = observer(() => {
       revalidateOnReconnect: true,
     }
   );
+  // page root handlers
+  const pageRootHandlers: TPageRootHandlers = useMemo(
+    () => ({
+      create: createPage,
+      fetchAllVersions: async (pageId) => {
+        if (!workspaceSlug || !projectId) return;
+        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);
+      },
+      fetchEntity: fetchEntityCallback,
+      fetchVersionDetails: async (pageId, versionId) => {
+        if (!workspaceSlug || !projectId) return;
+        return await projectPageVersionService.fetchVersionById(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          pageId,
+          versionId
+        );
+      },
+      getRedirectionLink: (pageId) => `/${workspaceSlug}/projects/${projectId}/pages/${pageId}`,
+      updateDescription,
+    }),
+    [createPage, fetchEntityCallback, page.id, projectId, updateDescription, workspaceSlug]
+  );
+  // page root config
+  const pageRootConfig: TPageRootConfig = useMemo(
+    () => ({
+      fileHandler: getEditorFileHandlers({
+        maxFileSize,
+        projectId: projectId?.toString() ?? "",
+        uploadFile: async (file) => {
+          const { asset_id } = await fileService.uploadProjectAsset(
+            workspaceSlug?.toString() ?? "",
+            projectId?.toString() ?? "",
+            {
+              entity_identifier: id ?? "",
+              entity_type: EFileAssetType.PAGE_DESCRIPTION,
+            },
+            file
+          );
+          return asset_id;
+        },
+        workspaceId,
+        workspaceSlug: workspaceSlug?.toString() ?? "",
+      }),
+      webhookConnectionParams: {
+        documentType: "project_page",
+        projectId: projectId?.toString() ?? "",
+        workspaceSlug: workspaceSlug?.toString() ?? "",
+      },
+    }),
+    [id, maxFileSize, projectId, workspaceId, workspaceSlug]
+  );
 
   if ((!page || !id) && !pageDetailsError)
     return (
@@ -65,7 +150,12 @@ const PageDetailsPage = observer(() => {
       <PageHead title={name} />
       <div className="flex h-full flex-col justify-between">
         <div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
-          <PageRoot page={page} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} />
+          <PageRoot
+            config={pageRootConfig}
+            handlers={pageRootHandlers}
+            page={page}
+            workspaceSlug={workspaceSlug?.toString() ?? ""}
+          />
           <IssuePeekOverview />
         </div>
       </div>

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

@@ -15,7 +15,7 @@ import { PageEditInformationPopover } from "@/components/pages";
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getPageName } from "@/helpers/page.helper";
 // hooks
-import { usePage, useProject, useUser, useUserPermissions } from "@/hooks/store";
+import { useProjectPage, useProject, useUser, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
@@ -32,7 +32,7 @@ export const PageDetailsHeader = observer(() => {
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const page = usePage(pageId?.toString() ?? "");
+  const page = useProjectPage(pageId?.toString() ?? "");
   const { name, logo_props, updatePageLogo, owned_by } = page;
   const { allowPermissions } = useUserPermissions();
   const { data: currentUser } = useUser();
@@ -169,7 +169,7 @@ export const PageDetailsHeader = observer(() => {
       </Header.LeftItem>
       <Header.RightItem>
         <PageEditInformationPopover page={page} />
-        <PageDetailsHeaderExtraActions />
+        <PageDetailsHeaderExtraActions page={page} />
       </Header.RightItem>
     </Header>
   );

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

@@ -51,11 +51,7 @@ const ProjectPagesPage = observer(() => {
         projectId={projectId.toString()}
         pageType={currentPageType()}
       >
-        <PagesListRoot
-          pageType={currentPageType()}
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-        />
+        <PagesListRoot pageType={currentPageType()} />
       </PagesListView>
     </>
   );