Merge branch 'refactor/mobx-store' of https://github.com/makeplane/plane into refactor/mobx-store

web/store/application/router.store.ts

@@ -1,21 +1,66 @@
 import { action, makeObservable, observable } from "mobx";
+import { ParsedUrlQuery } from "querystring";
 
 export interface IRouterStore {
-  query: any;
-  setQuery: (query: any) => void;
+  query: ParsedUrlQuery;
+  setQuery: (query: ParsedUrlQuery) => void;
+
+  workspaceSlug: string | undefined;
+  projectId: string | undefined;
+  cycleId: string | undefined;
+  moduleId: string | undefined;
+  viewId: string | undefined;
+  userId: string | undefined;
+  peekId: string | undefined;
 }
 
 export class RouterStore implements IRouterStore {
-  query = {};
+  query: ParsedUrlQuery = {};
 
   constructor() {
     makeObservable(this, {
       query: observable,
       setQuery: action,
+
+      //computed
+      workspaceSlug: action,
+      projectId: action,
+      cycleId: action,
+      moduleId: action,
+      viewId: action,
+      userId: action,
+      peekId: action,
     });
   }
 
-  setQuery(query: any) {
+  setQuery(query: ParsedUrlQuery) {
     this.query = query;
   }
+
+  get workspaceSlug() {
+    return this.query?.workspace_slug?.toString();
+  }
+
+  get projectId() {
+    return this.query?.projectId?.toString();
+  }
+
+  get moduleId() {
+    return this.query?.moduleId?.toString();
+  }
+
+  get cycleId() {
+    return this.query?.cycleId?.toString();
+  }
+
+  get viewId() {
+    return this.query?.viewId?.toString();
+  }
+
+  get userId() {
+    return this.query?.userId?.toString();
+  }
+  get peekId() {
+    return this.query?.peekId?.toString();
+  }
 }

web/store/project/projects.store.ts

@@ -104,9 +104,9 @@ export class ProjectsStore implements IProjectsStore {
   }
 
   get searchedProjects() {
-    if (!this.rootStore.workspace.workspaceSlug) return [];
+    if (!this.rootStore.app.router.query.workspaceSlug) return [];
 
-    const currentProjectsMap = this.projectsMap[this.rootStore.workspace.workspaceSlug];
+    const currentProjectsMap = this.projectsMap[this.rootStore.app.router.query.workspaceSlug.toString()];
     const projectIds = Object.keys(currentProjectsMap);
     return this.searchQuery === ""
       ? projectIds
@@ -117,8 +117,8 @@ export class ProjectsStore implements IProjectsStore {
   }
 
   get workspaceProjects() {
-    if (!this.rootStore.workspace.workspaceSlug) return null;
-    const currentProjectsMap = this.projectsMap[this.rootStore.workspace.workspaceSlug];
+    if (!this.rootStore.app.router.workspaceSlug) return null;
+    const currentProjectsMap = this.projectsMap[this.rootStore.app.router.query.workspaceSlug.toString()];
 
     const projectIds = Object.keys(currentProjectsMap);
     if (!projectIds) return null;
@@ -126,8 +126,8 @@ export class ProjectsStore implements IProjectsStore {
   }
 
   get currentProjectDetails() {
-    if (!this.projectId || !this.rootStore.workspace.workspaceSlug) return;
-    return this.projectsMap[this.rootStore.workspace.workspaceSlug][this.projectId];
+    if (!this.rootStore.app.router.query.projectId || !this.rootStore.app.router.query.workspaceSlug) return;
+    return this.projectsMap[!this.rootStore.app.router.query.workspaceSlug][this.projectId];
   }
 
   get joinedProjects() {

web/store/user/user-membership.store.ts

@@ -1,12 +1,10 @@
 // mobx
 import { action, observable, runInAction, makeObservable, computed } from "mobx";
 // services
-import { ProjectMemberService, ProjectService } from "services/project";
+import { ProjectMemberService } from "services/project";
 import { UserService } from "services/user.service";
 import { WorkspaceService } from "services/workspace.service";
-import { AuthService } from "services/auth.service";
 // interfaces
-import { IUser, IUserSettings } from "types/users";
 import { IWorkspaceMemberMe, IProjectMember, TUserProjectRole, TUserWorkspaceRole } from "types";
 import { RootStore } from "../root.store";
 
@@ -53,14 +51,12 @@ export class UserMembershipStore implements IUserMembershipStore {
   hasPermissionToProject: {
     [projectId: string]: boolean;
   } = {};
-  // root store
-  rootStore;
+  // stores
+  router;
   // services
   userService;
   workspaceService;
-  projectService;
   projectMemberService;
-  authService;
 
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
@@ -83,42 +79,41 @@ export class UserMembershipStore implements IUserMembershipStore {
       hasPermissionToCurrentWorkspace: computed,
       hasPermissionToCurrentProject: computed,
     });
-    this.rootStore = _rootStore;
+    this.router = _rootStore.app.router;
+    // services
     this.userService = new UserService();
     this.workspaceService = new WorkspaceService();
-    this.projectService = new ProjectService();
     this.projectMemberService = new ProjectMemberService();
-    this.authService = new AuthService();
   }
 
   get currentWorkspaceMemberInfo() {
-    if (!this.rootStore.workspace.workspaceSlug) return;
-    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug];
+    if (!this.router.query?.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.router.query?.workspaceSlug];
   }
 
   get currentWorkspaceRole() {
-    if (!this.rootStore.workspace.workspaceSlug) return;
-    return this.workspaceMemberInfo[this.rootStore.workspace.workspaceSlug]?.role;
+    if (!this.router.query?.workspaceSlug) return;
+    return this.workspaceMemberInfo[this.router.query?.workspaceSlug]?.role;
   }
 
   get currentProjectMemberInfo() {
-    if (!this.rootStore.project.projectId) return;
-    return this.projectMemberInfo[this.rootStore.project.projectId];
+    if (!this.router.query?.projectId) return;
+    return this.projectMemberInfo[this.router.query?.projectId];
   }
 
   get currentProjectRole() {
-    if (!this.rootStore.project.projectId) return;
-    return this.projectMemberInfo[this.rootStore.project.projectId]?.role;
+    if (!this.router.query?.projectId) return;
+    return this.projectMemberInfo[this.router.query?.projectId]?.role;
   }
 
   get hasPermissionToCurrentWorkspace() {
-    if (!this.rootStore.workspace.workspaceSlug) return;
-    return this.hasPermissionToWorkspace[this.rootStore.workspace.workspaceSlug];
+    if (!this.router.query?.workspaceSlug) return;
+    return this.hasPermissionToWorkspace[this.router.query?.workspaceSlug];
   }
 
   get hasPermissionToCurrentProject() {
-    if (!this.rootStore.project.projectId) return;
-    return this.hasPermissionToProject[this.rootStore.project.projectId];
+    if (!this.router.query?.projectId) return;
+    return this.hasPermissionToProject[this.router.query?.projectId];
   }
 
   fetchUserWorkspaceInfo = async (workspaceSlug: string) => {