Initial commit: Plane

Synced from upstream: 8853637e981ed7d8a6cff32bd98e7afe20f54362

apps/web/core/store/project/index.ts

@@ -0,0 +1,25 @@
+import type { CoreRootStore } from "../root.store";
+import type { IProjectPublishStore } from "./project-publish.store";
+import { ProjectPublishStore } from "./project-publish.store";
+import type { IProjectStore } from "./project.store";
+import { ProjectStore } from "./project.store";
+import type { IProjectFilterStore } from "./project_filter.store";
+import { ProjectFilterStore } from "./project_filter.store";
+
+export interface IProjectRootStore {
+  project: IProjectStore;
+  projectFilter: IProjectFilterStore;
+  publish: IProjectPublishStore;
+}
+
+export class ProjectRootStore {
+  project: IProjectStore;
+  projectFilter: IProjectFilterStore;
+  publish: IProjectPublishStore;
+
+  constructor(_root: CoreRootStore) {
+    this.project = new ProjectStore(_root);
+    this.projectFilter = new ProjectFilterStore(_root);
+    this.publish = new ProjectPublishStore(this);
+  }
+}

apps/web/core/store/project/project-publish.store.ts

@@ -0,0 +1,188 @@
+import { unset, set } from "lodash-es";
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import type { TProjectPublishSettings } from "@plane/types";
+// services
+import { ProjectPublishService } from "@/services/project";
+// store
+import type { ProjectRootStore } from "@/store/project";
+
+export interface IProjectPublishStore {
+  // states
+  generalLoader: boolean;
+  fetchSettingsLoader: boolean;
+  // observables
+  publishSettingsMap: Record<string, TProjectPublishSettings>; // projectID => TProjectPublishSettings
+  // helpers
+  getPublishSettingsByProjectID: (projectID: string) => TProjectPublishSettings | undefined;
+  // actions
+  fetchPublishSettings: (workspaceSlug: string, projectID: string) => Promise<TProjectPublishSettings>;
+  updatePublishSettings: (
+    workspaceSlug: string,
+    projectID: string,
+    projectPublishId: string,
+    data: Partial<TProjectPublishSettings>
+  ) => Promise<TProjectPublishSettings>;
+  publishProject: (
+    workspaceSlug: string,
+    projectID: string,
+    data: Partial<TProjectPublishSettings>
+  ) => Promise<TProjectPublishSettings>;
+  unPublishProject: (workspaceSlug: string, projectID: string, projectPublishId: string) => Promise<void>;
+}
+
+export class ProjectPublishStore implements IProjectPublishStore {
+  // states
+  generalLoader: boolean = false;
+  fetchSettingsLoader: boolean = false;
+  // observables
+  publishSettingsMap: Record<string, TProjectPublishSettings> = {};
+  // root store
+  projectRootStore: ProjectRootStore;
+  // services
+  projectPublishService;
+
+  constructor(_projectRootStore: ProjectRootStore) {
+    makeObservable(this, {
+      // states
+      generalLoader: observable.ref,
+      fetchSettingsLoader: observable.ref,
+      // observables
+      publishSettingsMap: observable,
+      // actions
+      fetchPublishSettings: action,
+      updatePublishSettings: action,
+      publishProject: action,
+      unPublishProject: action,
+    });
+    // root store
+    this.projectRootStore = _projectRootStore;
+    // services
+    this.projectPublishService = new ProjectPublishService();
+  }
+
+  /**
+   * @description returns the publish settings of a particular project
+   * @param {string} projectID
+   * @returns {TProjectPublishSettings | undefined}
+   */
+  getPublishSettingsByProjectID = (projectID: string): TProjectPublishSettings | undefined =>
+    this.publishSettingsMap?.[projectID] ?? undefined;
+
+  /**
+   * Fetches project publish settings
+   * @param workspaceSlug
+   * @param projectID
+   * @returns
+   */
+  fetchPublishSettings = async (workspaceSlug: string, projectID: string) => {
+    try {
+      runInAction(() => {
+        this.fetchSettingsLoader = true;
+      });
+      const response = await this.projectPublishService.fetchPublishSettings(workspaceSlug, projectID);
+
+      runInAction(() => {
+        set(this.publishSettingsMap, [projectID], response);
+        this.fetchSettingsLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.fetchSettingsLoader = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Publishes project and updates project publish status in the store
+   * @param workspaceSlug
+   * @param projectID
+   * @param data
+   * @returns
+   */
+  publishProject = async (workspaceSlug: string, projectID: string, data: Partial<TProjectPublishSettings>) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+      });
+      const response = await this.projectPublishService.publishProject(workspaceSlug, projectID, data);
+      runInAction(() => {
+        set(this.publishSettingsMap, [projectID], response);
+        set(this.projectRootStore.project.projectMap, [projectID, "anchor"], response.anchor);
+        this.generalLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Updates project publish settings
+   * @param workspaceSlug
+   * @param projectID
+   * @param projectPublishId
+   * @param data
+   * @returns
+   */
+  updatePublishSettings = async (
+    workspaceSlug: string,
+    projectID: string,
+    projectPublishId: string,
+    data: Partial<TProjectPublishSettings>
+  ) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+      });
+      const response = await this.projectPublishService.updatePublishSettings(
+        workspaceSlug,
+        projectID,
+        projectPublishId,
+        data
+      );
+      runInAction(() => {
+        set(this.publishSettingsMap, [projectID], response);
+        this.generalLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Unpublishes project and updates project publish status in the store
+   * @param workspaceSlug
+   * @param projectID
+   * @param projectPublishId
+   * @returns
+   */
+  unPublishProject = async (workspaceSlug: string, projectID: string, projectPublishId: string) => {
+    try {
+      runInAction(() => {
+        this.generalLoader = true;
+      });
+      const response = await this.projectPublishService.unpublishProject(workspaceSlug, projectID, projectPublishId);
+      runInAction(() => {
+        unset(this.publishSettingsMap, [projectID]);
+        set(this.projectRootStore.project.projectMap, [projectID, "anchor"], null);
+        this.generalLoader = false;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.generalLoader = false;
+      });
+      throw error;
+    }
+  };
+}

apps/web/core/store/project/project.store.ts

@@ -0,0 +1,619 @@
+import { sortBy, cloneDeep, update, set } from "lodash-es";
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+// plane imports
+import type { TFetchStatus, TLoader, TProjectAnalyticsCount, TProjectAnalyticsCountParams } from "@plane/types";
+// helpers
+import { orderProjects, shouldFilterProject } from "@plane/utils";
+// services
+import type { TProject, TPartialProject } from "@/plane-web/types/projects";
+import { IssueLabelService, IssueService } from "@/services/issue";
+import { ProjectService, ProjectStateService, ProjectArchiveService } from "@/services/project";
+// store
+import type { CoreRootStore } from "../root.store";
+
+type ProjectOverviewCollapsible = "links" | "attachments" | "milestones";
+
+export interface IProjectStore {
+  // observables
+  isUpdatingProject: boolean;
+  loader: TLoader;
+  fetchStatus: TFetchStatus;
+  projectMap: Record<string, TProject>; // projectId: project info
+  projectAnalyticsCountMap: Record<string, TProjectAnalyticsCount>; // projectId: project analytics count
+  // computed
+  isInitializingProjects: boolean;
+  filteredProjectIds: string[] | undefined;
+  workspaceProjectIds: string[] | undefined;
+  archivedProjectIds: string[] | undefined;
+  totalProjectIds: string[] | undefined;
+  joinedProjectIds: string[];
+  favoriteProjectIds: string[];
+  currentProjectDetails: TProject | undefined;
+  // actions
+  getProjectById: (projectId: string | undefined | null) => TProject | undefined;
+  getPartialProjectById: (projectId: string | undefined | null) => TPartialProject | undefined;
+  getProjectIdentifierById: (projectId: string | undefined | null) => string;
+  getProjectAnalyticsCountById: (projectId: string | undefined | null) => TProjectAnalyticsCount | undefined;
+  getProjectByIdentifier: (projectIdentifier: string) => TProject | undefined;
+  // collapsible
+  openCollapsibleSection: ProjectOverviewCollapsible[];
+  lastCollapsibleAction: ProjectOverviewCollapsible | null;
+
+  setOpenCollapsibleSection: (section: ProjectOverviewCollapsible[]) => void;
+  setLastCollapsibleAction: (section: ProjectOverviewCollapsible) => void;
+  toggleOpenCollapsibleSection: (section: ProjectOverviewCollapsible) => void;
+
+  // helper actions
+  processProjectAfterCreation: (workspaceSlug: string, data: TProject) => void;
+
+  // fetch actions
+  fetchPartialProjects: (workspaceSlug: string) => Promise<TPartialProject[]>;
+  fetchProjects: (workspaceSlug: string) => Promise<TProject[]>;
+  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<TProject>;
+  fetchProjectAnalyticsCount: (
+    workspaceSlug: string,
+    params?: TProjectAnalyticsCountParams
+  ) => Promise<TProjectAnalyticsCount[]>;
+  // favorites actions
+  addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+  removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+  // project-view action
+  updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
+  // CRUD actions
+  createProject: (workspaceSlug: string, data: Partial<TProject>) => Promise<TProject>;
+  updateProject: (workspaceSlug: string, projectId: string, data: Partial<TProject>) => Promise<TProject>;
+  deleteProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  // archive actions
+  archiveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  restoreProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+}
+
+export class ProjectStore implements IProjectStore {
+  // observables
+  isUpdatingProject: boolean = false;
+  loader: TLoader = "init-loader";
+  fetchStatus: TFetchStatus = undefined;
+  projectMap: Record<string, TProject> = {};
+  projectAnalyticsCountMap: Record<string, TProjectAnalyticsCount> = {};
+  openCollapsibleSection: ProjectOverviewCollapsible[] = ["milestones"];
+  lastCollapsibleAction: ProjectOverviewCollapsible | null = null;
+
+  // root store
+  rootStore: CoreRootStore;
+  // service
+  projectService;
+  projectArchiveService;
+  issueLabelService;
+  issueService;
+  stateService;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      isUpdatingProject: observable,
+      loader: observable.ref,
+      fetchStatus: observable.ref,
+      projectMap: observable,
+      projectAnalyticsCountMap: observable,
+      openCollapsibleSection: observable.ref,
+      lastCollapsibleAction: observable.ref,
+      // computed
+      isInitializingProjects: computed,
+      filteredProjectIds: computed,
+      workspaceProjectIds: computed,
+      archivedProjectIds: computed,
+      totalProjectIds: computed,
+      currentProjectDetails: computed,
+      joinedProjectIds: computed,
+      favoriteProjectIds: computed,
+      // helper actions
+      processProjectAfterCreation: action,
+      // fetch actions
+      fetchPartialProjects: action,
+      fetchProjects: action,
+      fetchProjectDetails: action,
+      fetchProjectAnalyticsCount: action,
+      // favorites actions
+      addProjectToFavorites: action,
+      removeProjectFromFavorites: action,
+      // project-view action
+      updateProjectView: action,
+      // CRUD actions
+      createProject: action,
+      updateProject: action,
+      // collapsible actions
+      setOpenCollapsibleSection: action,
+      setLastCollapsibleAction: action,
+      toggleOpenCollapsibleSection: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // services
+    this.projectService = new ProjectService();
+    this.projectArchiveService = new ProjectArchiveService();
+    this.issueService = new IssueService();
+    this.issueLabelService = new IssueLabelService();
+    this.stateService = new ProjectStateService();
+  }
+
+  /**
+   * @description returns true if projects are still initializing
+   */
+  get isInitializingProjects() {
+    return this.loader === "init-loader";
+  }
+
+  /**
+   * @description returns filtered projects based on filters and search query
+   */
+  get filteredProjectIds() {
+    const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    const {
+      currentWorkspaceDisplayFilters: displayFilters,
+      currentWorkspaceFilters: filters,
+      searchQuery,
+    } = this.rootStore.projectRoot.projectFilter;
+    if (!workspaceDetails || !displayFilters || !filters) return;
+    let workspaceProjects = Object.values(this.projectMap).filter(
+      (p) =>
+        p.workspace === workspaceDetails.id &&
+        (p.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          p.identifier.toLowerCase().includes(searchQuery.toLowerCase())) &&
+        shouldFilterProject(p, displayFilters, filters)
+    );
+    workspaceProjects = orderProjects(workspaceProjects, displayFilters.order_by);
+    return workspaceProjects.map((p) => p.id);
+  }
+
+  /**
+   * Returns project IDs belong to the current workspace
+   */
+  get workspaceProjectIds() {
+    const workspaceDetails = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!workspaceDetails) return;
+    const workspaceProjects = Object.values(this.projectMap).filter(
+      (p) => p.workspace === workspaceDetails.id && !p.archived_at
+    );
+    const projectIds = workspaceProjects.map((p) => p.id);
+    return projectIds ?? null;
+  }
+
+  /**
+   * Returns archived project IDs belong to current workspace.
+   */
+  get archivedProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return;
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "archived_at");
+
+    const projectIds = projects
+      .filter((project) => project.workspace === currentWorkspace.id && !!project.archived_at)
+      .map((project) => project.id);
+    return projectIds;
+  }
+
+  /**
+   * Returns total project IDs belong to the current workspace
+   */
+  // workspaceProjectIds + archivedProjectIds
+  get totalProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return;
+
+    const workspaceProjects = this.workspaceProjectIds ?? [];
+    const archivedProjects = this.archivedProjectIds ?? [];
+    return [...workspaceProjects, ...archivedProjects];
+  }
+
+  /**
+   * Returns current project details
+   */
+  get currentProjectDetails() {
+    if (!this.rootStore.router.projectId) return;
+    return this.projectMap?.[this.rootStore.router.projectId];
+  }
+
+  /**
+   * Returns joined project IDs belong to the current workspace
+   */
+  get joinedProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return [];
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "sort_order");
+
+    const projectIds = projects
+      .filter((project) => project.workspace === currentWorkspace.id && !!project.member_role && !project.archived_at)
+      .map((project) => project.id);
+    return projectIds;
+  }
+
+  /**
+   * Returns favorite project IDs belong to the current workspace
+   */
+  get favoriteProjectIds() {
+    const currentWorkspace = this.rootStore.workspaceRoot.currentWorkspace;
+    if (!currentWorkspace) return [];
+
+    let projects = Object.values(this.projectMap ?? {});
+    projects = sortBy(projects, "created_at");
+
+    const projectIds = projects
+      .filter(
+        (project) =>
+          project.workspace === currentWorkspace.id &&
+          !!project.member_role &&
+          project.is_favorite &&
+          !project.archived_at
+      )
+      .map((project) => project.id);
+    return projectIds;
+  }
+
+  setOpenCollapsibleSection = (section: ProjectOverviewCollapsible[]) => {
+    this.openCollapsibleSection = section;
+    if (this.lastCollapsibleAction) this.lastCollapsibleAction = null;
+  };
+
+  setLastCollapsibleAction = (section: ProjectOverviewCollapsible) => {
+    this.openCollapsibleSection = [...this.openCollapsibleSection, section];
+  };
+
+  toggleOpenCollapsibleSection = (section: ProjectOverviewCollapsible) => {
+    if (this.openCollapsibleSection && this.openCollapsibleSection.includes(section)) {
+      this.openCollapsibleSection = this.openCollapsibleSection.filter((s) => s !== section);
+    } else {
+      this.openCollapsibleSection = [...this.openCollapsibleSection, section];
+    }
+  };
+
+  /**
+   * @description process project after creation
+   * @param workspaceSlug
+   * @param data
+   */
+  processProjectAfterCreation = (workspaceSlug: string, data: TProject) => {
+    runInAction(() => {
+      set(this.projectMap, [data.id], data);
+      // updating the user project role in workspaceProjectsPermissions
+      set(this.rootStore.user.permission.workspaceProjectsPermissions, [workspaceSlug, data.id], data.member_role);
+    });
+  };
+
+  /**
+   * get Workspace projects partial data using workspace slug
+   * @param workspaceSlug
+   * @returns Promise<TPartialProject[]>
+   *
+   */
+  fetchPartialProjects = async (workspaceSlug: string) => {
+    try {
+      this.loader = "init-loader";
+      const projectsResponse = await this.projectService.getProjectsLite(workspaceSlug);
+      runInAction(() => {
+        projectsResponse.forEach((project) => {
+          update(this.projectMap, [project.id], (p) => ({ ...p, ...project }));
+        });
+        this.loader = "loaded";
+        if (!this.fetchStatus) this.fetchStatus = "partial";
+      });
+      return projectsResponse;
+    } catch (error) {
+      console.log("Failed to fetch project from workspace store");
+      this.loader = "loaded";
+      throw error;
+    }
+  };
+
+  /**
+   * get Workspace projects using workspace slug
+   * @param workspaceSlug
+   * @returns Promise<TProject[]>
+   *
+   */
+  fetchProjects = async (workspaceSlug: string) => {
+    try {
+      if (this.workspaceProjectIds && this.workspaceProjectIds.length > 0) {
+        this.loader = "mutation";
+      } else {
+        this.loader = "init-loader";
+      }
+      const projectsResponse = await this.projectService.getProjects(workspaceSlug);
+      runInAction(() => {
+        projectsResponse.forEach((project) => {
+          update(this.projectMap, [project.id], (p) => ({ ...p, ...project }));
+        });
+        this.loader = "loaded";
+        this.fetchStatus = "complete";
+      });
+      return projectsResponse;
+    } catch (error) {
+      console.log("Failed to fetch project from workspace store");
+      this.loader = "loaded";
+      throw error;
+    }
+  };
+
+  /**
+   * Fetches project details using workspace slug and project id
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<TProject>
+   */
+  fetchProjectDetails = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.getProject(workspaceSlug, projectId);
+      runInAction(() => {
+        update(this.projectMap, [projectId], (p) => ({ ...p, ...response }));
+      });
+      return response;
+    } catch (error) {
+      console.log("Error while fetching project details", error);
+      throw error;
+    }
+  };
+
+  /**
+   * Fetches project analytics count using workspace slug and project id
+   * @param workspaceSlug
+   * @param params TProjectAnalyticsCountParams
+   * @returns Promise<TProjectAnalyticsCount[]>
+   */
+  fetchProjectAnalyticsCount = async (
+    workspaceSlug: string,
+    params?: TProjectAnalyticsCountParams
+  ): Promise<TProjectAnalyticsCount[]> => {
+    try {
+      const response = await this.projectService.getProjectAnalyticsCount(workspaceSlug, params);
+      runInAction(() => {
+        for (const analyticsData of response) {
+          set(this.projectAnalyticsCountMap, [analyticsData.id], analyticsData);
+        }
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to fetch project analytics count", error);
+      throw error;
+    }
+  };
+
+  /**
+   * Returns project details using project id
+   * @param projectId
+   * @returns TProject | null
+   */
+  getProjectById = computedFn((projectId: string | undefined | null) => {
+    const projectInfo = this.projectMap[projectId ?? ""] || undefined;
+    return projectInfo;
+  });
+
+  /**
+   * Returns project details using project identifier
+   * @param projectIdentifier
+   * @returns TProject | undefined
+   */
+  getProjectByIdentifier = computedFn((projectIdentifier: string) =>
+    Object.values(this.projectMap).find((project) => project.identifier === projectIdentifier)
+  );
+
+  /**
+   * Returns project lite using project id
+   * This method is used just for type safety
+   * @param projectId
+   * @returns TPartialProject | null
+   */
+  getPartialProjectById = computedFn((projectId: string | undefined | null) => {
+    const projectInfo = this.projectMap[projectId ?? ""] || undefined;
+    return projectInfo;
+  });
+
+  /**
+   * Returns project identifier using project id
+   * @param projectId
+   * @returns string
+   */
+  getProjectIdentifierById = computedFn((projectId: string | undefined | null) => {
+    const projectInfo = this.projectMap?.[projectId ?? ""];
+    return projectInfo?.identifier;
+  });
+
+  /**
+   * Returns project analytics count using project id
+   * @param projectId
+   * @returns TProjectAnalyticsCount[]
+   */
+  getProjectAnalyticsCountById = computedFn((projectId: string | undefined | null) => {
+    if (!projectId) return undefined;
+    return this.projectAnalyticsCountMap?.[projectId];
+  });
+
+  /**
+   * Adds project to favorites and updates project favorite status in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  addProjectToFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const currentProject = this.getProjectById(projectId);
+      if (currentProject.is_favorite) return;
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], true);
+      });
+      const response = await this.rootStore.favorite.addFavorite(workspaceSlug.toString(), {
+        entity_type: "project",
+        entity_identifier: projectId,
+        project_id: projectId,
+        entity_data: { name: this.projectMap[projectId].name || "" },
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], false);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Removes project from favorites and updates project favorite status in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  removeProjectFromFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const currentProject = this.getProjectById(projectId);
+      if (!currentProject.is_favorite) return;
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], false);
+      });
+      const response = await this.rootStore.favorite.removeFavoriteEntity(workspaceSlug.toString(), projectId);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      runInAction(() => {
+        set(this.projectMap, [projectId, "is_favorite"], true);
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Updates the project view
+   * @param workspaceSlug
+   * @param projectId
+   * @param viewProps
+   * @returns
+   */
+  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: { sort_order: number }) => {
+    const currentProjectSortOrder = this.getProjectById(projectId)?.sort_order;
+    try {
+      runInAction(() => {
+        set(this.projectMap, [projectId, "sort_order"], viewProps?.sort_order);
+      });
+      const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        set(this.projectMap, [projectId, "sort_order"], currentProjectSortOrder);
+      });
+      console.log("Failed to update sort order of the projects");
+      throw error;
+    }
+  };
+
+  /**
+   * Creates a project in the workspace and adds it to the store
+   * @param workspaceSlug
+   * @param data
+   * @returns Promise<TProject>
+   */
+  createProject = async (workspaceSlug: string, data: any) => {
+    try {
+      const response = await this.projectService.createProject(workspaceSlug, data);
+      this.processProjectAfterCreation(workspaceSlug, response);
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      throw error;
+    }
+  };
+
+  /**
+   * Updates a details of a project and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @param data
+   * @returns Promise<TProject>
+   */
+  updateProject = async (workspaceSlug: string, projectId: string, data: Partial<TProject>) => {
+    const projectDetails = cloneDeep(this.getProjectById(projectId));
+    try {
+      runInAction(() => {
+        set(this.projectMap, [projectId], { ...projectDetails, ...data });
+        this.isUpdatingProject = true;
+      });
+      const response = await this.projectService.updateProject(workspaceSlug, projectId, data);
+      runInAction(() => {
+        this.isUpdatingProject = false;
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      runInAction(() => {
+        set(this.projectMap, [projectId], projectDetails);
+        this.isUpdatingProject = false;
+      });
+      throw error;
+    }
+  };
+
+  /**
+   * Deletes a project from specific workspace and deletes it from the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  deleteProject = async (workspaceSlug: string, projectId: string) => {
+    try {
+      if (!this.projectMap?.[projectId]) return;
+      await this.projectService.deleteProject(workspaceSlug, projectId);
+      runInAction(() => {
+        delete this.projectMap[projectId];
+        if (this.rootStore.favorite.entityMap[projectId]) this.rootStore.favorite.removeFavoriteFromStore(projectId);
+        delete this.rootStore.user.permission.workspaceProjectsPermissions[workspaceSlug][projectId];
+      });
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+      throw error;
+    }
+  };
+
+  /**
+   * Archives a project from specific workspace and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  archiveProject = async (workspaceSlug: string, projectId: string) => {
+    await this.projectArchiveService
+      .archiveProject(workspaceSlug, projectId)
+      .then((response) => {
+        runInAction(() => {
+          set(this.projectMap, [projectId, "archived_at"], response.archived_at);
+          this.rootStore.favorite.removeFavoriteFromStore(projectId);
+        });
+      })
+      .catch((error) => {
+        console.log("Failed to archive project from project store");
+        throw error;
+      });
+  };
+
+  /**
+   * Restores a project from specific workspace and updates it in the store
+   * @param workspaceSlug
+   * @param projectId
+   * @returns Promise<void>
+   */
+  restoreProject = async (workspaceSlug: string, projectId: string) => {
+    await this.projectArchiveService
+      .restoreProject(workspaceSlug, projectId)
+      .then(() => {
+        runInAction(() => {
+          set(this.projectMap, [projectId, "archived_at"], null);
+        });
+      })
+      .catch((error) => {
+        console.log("Failed to restore project from project store");
+        throw error;
+      });
+  };
+}

apps/web/core/store/project/project_filter.store.ts

@@ -0,0 +1,180 @@
+import { set } from "lodash-es";
+import { action, computed, observable, makeObservable, runInAction, reaction } from "mobx";
+import { computedFn } from "mobx-utils";
+// types
+import type { TProjectDisplayFilters, TProjectFilters, TProjectAppliedDisplayFilterKeys } from "@plane/types";
+// store
+import type { CoreRootStore } from "../root.store";
+
+export interface IProjectFilterStore {
+  // observables
+  displayFilters: Record<string, TProjectDisplayFilters>;
+  filters: Record<string, TProjectFilters>;
+  searchQuery: string;
+  // computed
+  currentWorkspaceDisplayFilters: TProjectDisplayFilters | undefined;
+  currentWorkspaceAppliedDisplayFilters: TProjectAppliedDisplayFilterKeys[] | undefined;
+  currentWorkspaceFilters: TProjectFilters | undefined;
+  // computed functions
+  getDisplayFiltersByWorkspaceSlug: (workspaceSlug: string) => TProjectDisplayFilters | undefined;
+  getFiltersByWorkspaceSlug: (workspaceSlug: string) => TProjectFilters | undefined;
+  // actions
+  updateDisplayFilters: (workspaceSlug: string, displayFilters: TProjectDisplayFilters) => void;
+  updateFilters: (workspaceSlug: string, filters: TProjectFilters) => void;
+  updateSearchQuery: (query: string) => void;
+  clearAllFilters: (workspaceSlug: string) => void;
+  clearAllAppliedDisplayFilters: (workspaceSlug: string) => void;
+}
+
+export class ProjectFilterStore implements IProjectFilterStore {
+  // observables
+  displayFilters: Record<string, TProjectDisplayFilters> = {};
+  filters: Record<string, TProjectFilters> = {};
+  searchQuery: string = "";
+  // root store
+  rootStore: CoreRootStore;
+
+  constructor(_rootStore: CoreRootStore) {
+    makeObservable(this, {
+      // observables
+      displayFilters: observable,
+      filters: observable,
+      searchQuery: observable.ref,
+      // computed
+      currentWorkspaceDisplayFilters: computed,
+      currentWorkspaceAppliedDisplayFilters: computed,
+      currentWorkspaceFilters: computed,
+      // actions
+      updateDisplayFilters: action,
+      updateFilters: action,
+      updateSearchQuery: action,
+      clearAllFilters: action,
+      clearAllAppliedDisplayFilters: action,
+    });
+    // root store
+    this.rootStore = _rootStore;
+    // initialize display filters of the current workspace
+    reaction(
+      () => this.rootStore.router.workspaceSlug,
+      (workspaceSlug) => {
+        if (!workspaceSlug) return;
+        this.initWorkspaceFilters(workspaceSlug);
+        this.searchQuery = "";
+      }
+    );
+  }
+
+  /**
+   * @description get display filters of the current workspace
+   */
+  get currentWorkspaceDisplayFilters() {
+    const workspaceSlug = this.rootStore.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    return this.displayFilters[workspaceSlug];
+  }
+
+  /**
+   * @description get project state applied display filter of the current workspace
+   * @returns {TProjectAppliedDisplayFilterKeys[] | undefined} // An array of keys of applied display filters
+   */
+  // TODO: Figure out a better approach for this
+  get currentWorkspaceAppliedDisplayFilters() {
+    const workspaceSlug = this.rootStore.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    const displayFilters = this.displayFilters[workspaceSlug];
+    return Object.keys(displayFilters).filter(
+      (key): key is TProjectAppliedDisplayFilterKeys =>
+        ["my_projects", "archived_projects"].includes(key) && !!displayFilters[key as keyof TProjectDisplayFilters]
+    );
+  }
+
+  /**
+   * @description get filters of the current workspace
+   */
+  get currentWorkspaceFilters() {
+    const workspaceSlug = this.rootStore.router.workspaceSlug;
+    if (!workspaceSlug) return;
+    return this.filters[workspaceSlug];
+  }
+
+  /**
+   * @description get display filters of a workspace by workspaceSlug
+   * @param {string} workspaceSlug
+   */
+  getDisplayFiltersByWorkspaceSlug = computedFn((workspaceSlug: string) => this.displayFilters[workspaceSlug]);
+
+  /**
+   * @description get filters of a workspace by workspaceSlug
+   * @param {string} workspaceSlug
+   */
+  getFiltersByWorkspaceSlug = computedFn((workspaceSlug: string) => this.filters[workspaceSlug]);
+
+  /**
+   * @description initialize display filters and filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  initWorkspaceFilters = (workspaceSlug: string) => {
+    const displayFilters = this.getDisplayFiltersByWorkspaceSlug(workspaceSlug);
+    runInAction(() => {
+      this.displayFilters[workspaceSlug] = {
+        order_by: displayFilters?.order_by || "created_at",
+      };
+      this.filters[workspaceSlug] = this.filters[workspaceSlug] ?? {};
+    });
+  };
+
+  /**
+   * @description update display filters of a workspace
+   * @param {string} workspaceSlug
+   * @param {TProjectDisplayFilters} displayFilters
+   */
+  updateDisplayFilters = (workspaceSlug: string, displayFilters: TProjectDisplayFilters) => {
+    runInAction(() => {
+      Object.keys(displayFilters).forEach((key) => {
+        set(this.displayFilters, [workspaceSlug, key], displayFilters[key as keyof TProjectDisplayFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update filters of a workspace
+   * @param {string} workspaceSlug
+   * @param {TProjectFilters} filters
+   */
+  updateFilters = (workspaceSlug: string, filters: TProjectFilters) => {
+    runInAction(() => {
+      Object.keys(filters).forEach((key) => {
+        set(this.filters, [workspaceSlug, key], filters[key as keyof TProjectFilters]);
+      });
+    });
+  };
+
+  /**
+   * @description update search query
+   * @param {string} query
+   */
+  updateSearchQuery = (query: string) => (this.searchQuery = query);
+
+  /**
+   * @description clear all filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  clearAllFilters = (workspaceSlug: string) => {
+    runInAction(() => {
+      this.filters[workspaceSlug] = {};
+    });
+  };
+
+  /**
+   * @description clear project display filters of a workspace
+   * @param {string} workspaceSlug
+   */
+  clearAllAppliedDisplayFilters = (workspaceSlug: string) => {
+    runInAction(() => {
+      if (!this.currentWorkspaceAppliedDisplayFilters) return;
+      this.currentWorkspaceAppliedDisplayFilters.forEach((key) => {
+        set(this.displayFilters, [workspaceSlug, key], false);
+      });
+    });
+  };
+}