Improvement: High Performance MobX Integration for Pages ✈︎ (#3397)

* fix: removed parameters `workspace`, `project` & `id` from the patch calls

* feat: modified components to work with new pages hooks

* feat: modified stores

* feat: modified initial component

* feat: component implementation changes

* feat: store implementation

* refactor pages store

* feat: updated page store to perform async operations faster

* fix: added types for archive and restore pages

* feat: implemented archive and restore pages

* fix: page creating twice when form submit

* feat: updated create-page-modal

* feat: updated page form and delete page modal

* fix: create page modal not updating isSubmitted prop

* feat: list items and list view refactored for pages

* feat: refactored project-page-store for inserting computed pagesids

* chore: renamed project pages hook

* feat: added favourite pages implementation

* fix: implemented store for archived pages

* fix: project page store for recent pages

* fix: issue suggestions breaking pages

* fix: issue embeds and suggestions breaking

* feat: implemented page store and project page store in page editor

* chore: lock file changes

* fix: modified page details header to catch mobx updates instead of swr calls

* fix: modified usePage hook to fetch page details when reloaded directly on page

* fix: fixed deleting pages

* fix: removed render on props changed

* feat: implemented page store inside page details

* fix: role change in pages archives

* fix: rerending of pages on tab change

* fix: reimplementation of peek overview inside pages

* chore: typo fixes

* fix: issue suggestion widget selecting wrong issues on click

* feat: added labels in pages

* fix: deepsource errors fixed

* fix: build errors

* fix: review comments

* fix: removed swr hooks from the `usePage` store hook and refactored `issueEmbed` hook

* fix: resolved reviewed comments

---------

Co-authored-by: Rahul R <rahulr@Rahuls-MacBook-Pro.local>

web/hooks/store/use-page.ts

@@ -1,11 +1,21 @@
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "contexts/store-context";
-// types
-import { IPageStore } from "store/page.store";
 
-export const usePage = (): IPageStore => {
+export const usePage = (pageId: string) => {
   const context = useContext(StoreContext);
   if (context === undefined) throw new Error("usePage must be used within StoreProvider");
-  return context.page;
+
+  const { projectPageMap, projectArchivedPageMap } = context.projectPages;
+
+  const { projectId, workspaceSlug } = context.app.router;
+  if (!projectId || !workspaceSlug) throw new Error("usePage must be used within ProjectProvider");
+
+  if (projectPageMap[projectId] && projectPageMap[projectId][pageId]) {
+    return projectPageMap[projectId][pageId];
+  } else if (projectArchivedPageMap[projectId] && projectArchivedPageMap[projectId][pageId]) {
+    return projectArchivedPageMap[projectId][pageId];
+  } else {
+    return;
+  }
 };

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

@@ -1,8 +1,9 @@
 import { useContext } from "react";
 // mobx store
 import { StoreContext } from "contexts/store-context";
+import { IProjectPageStore } from "store/project-page.store";
 
-export const useProjectPages = () => {
+export const useProjectPages = (): IProjectPageStore => {
   const context = useContext(StoreContext);
   if (context === undefined) throw new Error("useProjectPublish must be used within StoreProvider");
   return context.projectPages;

web/hooks/store/use-project-specific-pages.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "contexts/store-context";
+// types
+import { IProjectPageStore } from "store/project-page.store";
+
+export const useProjectPages = (): IProjectPageStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("usePage must be used within StoreProvider");
+  return context.projectPages;
+};

web/hooks/use-issue-embeds.tsx

@@ -0,0 +1,48 @@
+import { TIssue } from "@plane/types";
+import { PROJECT_ISSUES_LIST, STATES_LIST } from "constants/fetch-keys";
+import { EIssuesStoreType } from "constants/issue";
+import { StoreContext } from "contexts/store-context";
+import { autorun, toJS } from "mobx";
+import { useContext } from "react";
+import { IssueService } from "services/issue";
+import useSWR from "swr";
+import { useIssueDetail, useIssues, useMember, useProject, useProjectState } from "./store";
+
+const issueService = new IssueService();
+
+export const useIssueEmbeds = () => {
+  const workspaceSlug = useContext(StoreContext).app.router.workspaceSlug;
+  const projectId = useContext(StoreContext).app.router.projectId;
+
+  const { getProjectById } = useProject();
+  const { setPeekIssue } = useIssueDetail();
+  const { getStateById } = useProjectState();
+  const { getUserDetails } = useMember();
+
+  const { data: issuesResponse } = useSWR(
+    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
+    workspaceSlug && projectId ? () => issueService.getIssues(workspaceSlug as string, projectId as string) : null
+  );
+
+  const issues = Object.values(issuesResponse ?? {});
+  const issuesWithStateAndProject = issues.map((issue) => ({
+    ...issue,
+    state_detail: toJS(getStateById(issue.state_id)),
+    project_detail: toJS(getProjectById(issue.project_id)),
+    assignee_details: issue.assignee_ids.map((assigneeid) => toJS(getUserDetails(assigneeid))),
+  }));
+
+  const fetchIssue = async (issueId: string) => issuesWithStateAndProject.find((issue) => issue.id === issueId);
+
+  const issueWidgetClickAction = (issueId: string) => {
+    if (!workspaceSlug || !projectId) return;
+
+    setPeekIssue({ workspaceSlug, projectId: projectId, issueId });
+  };
+
+  return {
+    issues: issuesWithStateAndProject,
+    fetchIssue,
+    issueWidgetClickAction,
+  };
+};