refactor timeline store for code splitting (#5926)

web/ce/store/issue/issue-details/activity.store.ts

@@ -10,10 +10,10 @@ import { computedFn } from "mobx-utils";
 import { TIssueActivityComment, TIssueActivity, TIssueActivityMap, TIssueActivityIdMap } from "@plane/types";
 // plane web constants
 import { EActivityFilterType } from "@/plane-web/constants/issues";
-// plane web store types
-import { RootStore } from "@/plane-web/store/root.store";
 // services
 import { IssueActivityService } from "@/services/issue";
+// store
+import { CoreRootStore } from "@/store/root.store";
 
 export type TActivityLoader = "fetch" | "mutate" | undefined;
 
@@ -47,7 +47,7 @@ export class IssueActivityStore implements IIssueActivityStore {
   // services
   issueActivityService;
 
-  constructor(protected store: RootStore) {
+  constructor(protected store: CoreRootStore) {
     makeObservable(this, {
       // observables
       loader: observable.ref,

web/ce/store/root.store.ts

@@ -1,8 +1,13 @@
 // store
 import { CoreRootStore } from "@/store/root.store";
+import { ITimelineStore, TimeLineStore } from "./timeline";
 
 export class RootStore extends CoreRootStore {
+  timelineStore: ITimelineStore;
+
   constructor() {
     super();
+
+    this.timelineStore = new TimeLineStore(this);
   }
 }

web/ce/store/timeline/base-timeline.store.ts

@@ -15,7 +15,7 @@ import { RootStore } from "@/plane-web/store/root.store";
 type BlockData = {
   id: string;
   name: string;
-  sort_order: number;
+  sort_order: number | null;
   start_date: string | undefined | null;
   target_date: string | undefined | null;
 };
@@ -27,6 +27,7 @@ export interface IBaseTimelineStore {
   activeBlockId: string | null;
   renderView: any;
   isDragging: boolean;
+  isDependencyEnabled: boolean;
   //
   setBlockIds: (ids: string[]) => void;
   getBlockById: (blockId: string) => IGanttBlock;
@@ -60,6 +61,8 @@ export class BaseTimeLineStore implements IBaseTimelineStore {
 
   rootStore: RootStore;
 
+  isDependencyEnabled = false;
+
   constructor(_rootStore: RootStore) {
     makeObservable(this, {
       // observables
@@ -179,7 +182,7 @@ export class BaseTimeLineStore implements IBaseTimelineStore {
         data: blockData,
         id: blockData?.id,
         name: blockData.name,
-        sort_order: blockData?.sort_order,
+        sort_order: blockData?.sort_order ?? undefined,
         start_date: blockData?.start_date ?? undefined,
         target_date: blockData?.target_date ?? undefined,
       };

web/ce/store/timeline/index.ts

@@ -0,0 +1,23 @@
+import { RootStore } from "@/plane-web/store/root.store";
+import { IIssuesTimeLineStore, IssuesTimeLineStore } from "@/store/timeline/issues-timeline.store";
+import { IModulesTimeLineStore, ModulesTimeLineStore } from "@/store/timeline/modules-timeline.store";
+import { BaseTimeLineStore, IBaseTimelineStore } from "./base-timeline.store";
+
+export interface ITimelineStore {
+  issuesTimeLineStore: IIssuesTimeLineStore;
+  modulesTimeLineStore: IModulesTimeLineStore;
+  projectTimeLineStore: IBaseTimelineStore;
+}
+
+export class TimeLineStore implements ITimelineStore {
+  issuesTimeLineStore: IIssuesTimeLineStore;
+  modulesTimeLineStore: IModulesTimeLineStore;
+  projectTimeLineStore: IBaseTimelineStore;
+
+  constructor(rootStore: RootStore) {
+    this.issuesTimeLineStore = new IssuesTimeLineStore(rootStore);
+    this.modulesTimeLineStore = new ModulesTimeLineStore(rootStore);
+    // Dummy store
+    this.projectTimeLineStore = new BaseTimeLineStore(rootStore);
+  }
+}

web/core/components/gantt-chart/contexts/index.tsx

@@ -3,6 +3,7 @@ import { createContext, useContext } from "react";
 export enum ETimeLineTypeType {
   ISSUE = "ISSUE",
   MODULE = "MODULE",
+  PROJECT = "PROJECT",
 }
 
 export const TimeLineTypeContext = createContext<ETimeLineTypeType | undefined>(undefined);

web/core/components/gantt-chart/sidebar/utils.ts

@@ -16,17 +16,17 @@ export const handleOrderChange = (
   // return if dropped outside the list
   if (sourceBlockIndex === -1 || destinationBlockIndex === -1 || sourceBlockIndex === destinationBlockIndex) return;
 
-  let updatedSortOrder = getBlockById(blockIds[sourceBlockIndex])?.sort_order;
+  let updatedSortOrder = getBlockById(blockIds[sourceBlockIndex])?.sort_order ?? 0;
 
   // update the sort order to the lowest if dropped at the top
-  if (destinationBlockIndex === 0) updatedSortOrder = getBlockById(blockIds[0])?.sort_order - 1000;
+  if (destinationBlockIndex === 0) updatedSortOrder = (getBlockById(blockIds[0])?.sort_order ?? 0) - 1000;
   // update the sort order to the highest if dropped at the bottom
   else if (destinationBlockIndex === blockIds.length)
-    updatedSortOrder = getBlockById(blockIds[blockIds.length - 1])?.sort_order + 1000;
+    updatedSortOrder = (getBlockById(blockIds[blockIds.length - 1])?.sort_order ?? 0) + 1000;
   // update the sort order to the average of the two adjacent blocks if dropped in between
   else {
-    const destinationSortingOrder = getBlockById(blockIds[destinationBlockIndex])?.sort_order;
-    const relativeDestinationSortingOrder = getBlockById(blockIds[destinationBlockIndex - 1])?.sort_order;
+    const destinationSortingOrder = getBlockById(blockIds[destinationBlockIndex])?.sort_order ?? 0;
+    const relativeDestinationSortingOrder = getBlockById(blockIds[destinationBlockIndex - 1])?.sort_order ?? 0;
 
     updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
   }

web/core/components/gantt-chart/types/index.ts

@@ -6,7 +6,7 @@ export interface IGanttBlock {
     marginLeft: number;
     width: number;
   };
-  sort_order: number;
+  sort_order: number | undefined;
   start_date: string | undefined;
   target_date: string | undefined;
 }

web/core/hooks/use-timeline-chart.ts

@@ -1,8 +1,9 @@
 import { useContext } from "react";
-// mobx store
-// types
+// lib
 import { StoreContext } from "@/lib/store-context";
-import { IBaseTimelineStore } from "ee/store/timeline/base-timeline.store";
+// Plane-web
+import { IBaseTimelineStore } from "@/plane-web/store/timeline/base-timeline.store";
+//
 import { ETimeLineTypeType, useTimeLineType } from "../components/gantt-chart/contexts";
 
 export const useTimeLineChart = (timeLineType: ETimeLineTypeType): IBaseTimelineStore => {
@@ -13,7 +14,9 @@ export const useTimeLineChart = (timeLineType: ETimeLineTypeType): IBaseTimeline
     case ETimeLineTypeType.ISSUE:
       return context.timelineStore.issuesTimeLineStore;
     case ETimeLineTypeType.MODULE:
-      return context.timelineStore.modulesTimeLineStore;
+      return context.timelineStore.modulesTimeLineStore as IBaseTimelineStore;
+    case ETimeLineTypeType.PROJECT:
+      return context.timelineStore.projectTimeLineStore as IBaseTimelineStore;
   }
 };
 

web/core/store/issue/root.store.ts

@@ -1,10 +1,9 @@
 import isEmpty from "lodash/isEmpty";
 import { autorun, makeObservable, observable } from "mobx";
 import { ICycle, IIssueLabel, IModule, IProject, IState, IUserLite } from "@plane/types";
-// plane web root store
-import { RootStore } from "@/plane-web/store/root.store";
 // root store
 import { IWorkspaceMembership } from "@/store/member/workspace-member.store";
+import { CoreRootStore } from "../root.store";
 import { IStateStore, StateStore } from "../state.store";
 // issues data store
 import { IArchivedIssuesFilter, ArchivedIssuesFilter, IArchivedIssues, ArchivedIssues } from "./archived";
@@ -50,7 +49,7 @@ export interface IIssueRootStore {
   moduleMap: Record<string, IModule> | undefined;
   cycleMap: Record<string, ICycle> | undefined;
 
-  rootStore: RootStore;
+  rootStore: CoreRootStore;
 
   issues: IIssueStore;
 
@@ -108,7 +107,7 @@ export class IssueRootStore implements IIssueRootStore {
   moduleMap: Record<string, IModule> | undefined = undefined;
   cycleMap: Record<string, ICycle> | undefined = undefined;
 
-  rootStore: RootStore;
+  rootStore: CoreRootStore;
 
   issues: IIssueStore;
 
@@ -146,7 +145,7 @@ export class IssueRootStore implements IIssueRootStore {
   issueKanBanView: IIssueKanBanViewStore;
   issueCalendarView: ICalendarStore;
 
-  constructor(rootStore: RootStore) {
+  constructor(rootStore: CoreRootStore) {
     makeObservable(this, {
       workspaceSlug: observable.ref,
       projectId: observable.ref,

web/core/store/root.store.ts

@@ -23,7 +23,6 @@ import { IProjectViewStore, ProjectViewStore } from "./project-view.store";
 import { RouterStore, IRouterStore } from "./router.store";
 import { IStateStore, StateStore } from "./state.store";
 import { ThemeStore, IThemeStore } from "./theme.store";
-import { ITimelineStore, TimeLineStore } from "./timeline";
 import { ITransientStore, TransientStore } from "./transient.store";
 import { IUserStore, UserStore } from "./user";
 import { IWorkspaceRootStore, WorkspaceRootStore } from "./workspace";
@@ -57,7 +56,6 @@ export class CoreRootStore {
   workspaceNotification: IWorkspaceNotificationStore;
   favorite: IFavoriteStore;
   transient: ITransientStore;
-  timelineStore: ITimelineStore;
 
   constructor() {
     this.router = new RouterStore();
@@ -86,7 +84,6 @@ export class CoreRootStore {
     this.workspaceNotification = new WorkspaceNotificationStore(this);
     this.favorite = new FavoriteStore(this);
     this.transient = new TransientStore();
-    this.timelineStore = new TimeLineStore(this);
   }
 
   resetOnSignOut() {

web/core/store/timeline/index.ts

@@ -1,19 +0,0 @@
-import { CoreRootStore } from "@/store/root.store";
-//
-import { IIssuesTimeLineStore, IssuesTimeLineStore } from "./issues-timeline.store";
-import { IModulesTimeLineStore, ModulesTimeLineStore } from "./modules-timeline.store";
-
-export interface ITimelineStore {
-  issuesTimeLineStore: IIssuesTimeLineStore;
-  modulesTimeLineStore: IModulesTimeLineStore;
-}
-
-export class TimeLineStore implements ITimelineStore {
-  issuesTimeLineStore: IIssuesTimeLineStore;
-  modulesTimeLineStore: IModulesTimeLineStore;
-
-  constructor(rootStore: CoreRootStore) {
-    this.issuesTimeLineStore = new IssuesTimeLineStore(rootStore);
-    this.modulesTimeLineStore = new ModulesTimeLineStore(rootStore);
-  }
-}

web/core/store/timeline/issues-timeline.store.ts

@@ -8,13 +8,10 @@ export interface IIssuesTimeLineStore extends IBaseTimelineStore {
 }
 
 export class IssuesTimeLineStore extends BaseTimeLineStore implements IIssuesTimeLineStore {
-  isDependencyEnabled = true;
-
   constructor(_rootStore: RootStore) {
     super(_rootStore);
 
-    autorun((reaction) => {
-      reaction.trace();
+    autorun(() => {
       const getIssueById = this.rootStore.issue.issues.getIssueById;
       this.updateBlocks(getIssueById);
     });

web/core/store/timeline/modules-timeline.store.ts

@@ -8,13 +8,10 @@ export interface IModulesTimeLineStore extends IBaseTimelineStore {
 }
 
 export class ModulesTimeLineStore extends BaseTimeLineStore implements IModulesTimeLineStore {
-  isDependencyEnabled = false;
-
   constructor(_rootStore: RootStore) {
     super(_rootStore);
 
-    autorun((reaction) => {
-      reaction.trace();
+    autorun(() => {
       const getModuleById = this.rootStore.module.getModuleById;
       this.updateBlocks(getModuleById);
     });