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;
+};