plane/web/store/project/project_state.store.ts

274 lines
8.5 KiB
TypeScript
Raw Normal View History

import { observable, action, makeObservable, runInAction } from "mobx";
// types
import { RootStore } from "../root";
import { IState } from "types";
// services
import { ProjectService, ProjectStateService } from "services/project";
import { groupBy, orderArrayBy } from "helpers/array.helper";
import { orderStateGroups } from "helpers/state.helper";
export interface IProjectStateStore {
loader: boolean;
error: any | null;
// states
createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
updateState: (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => Promise<IState>;
deleteState: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
markStateAsDefault: (workspaceSlug: string, projectId: string, stateId: string) => Promise<void>;
moveStatePosition: (
workspaceSlug: string,
projectId: string,
stateId: string,
direction: "up" | "down",
groupIndex: number
) => Promise<void>;
}
export class ProjectStateStore implements IProjectStateStore {
loader: boolean = false;
error: any | null = null;
// root store
rootStore;
// service
projectService;
stateService;
constructor(_rootStore: RootStore) {
makeObservable(this, {
// observable
loader: observable,
error: observable,
// states
createState: action,
updateState: action,
deleteState: action,
markStateAsDefault: action,
moveStatePosition: action,
});
this.rootStore = _rootStore;
this.projectService = new ProjectService();
this.stateService = new ProjectStateService();
}
createState = async (workspaceSlug: string, projectId: string, data: Partial<IState>) => {
try {
const response = await this.stateService.createState(
workspaceSlug,
projectId,
data,
this.rootStore.user.currentUser!
);
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: {
...this.rootStore.project.states?.[projectId],
[response.group]: [...(this.rootStore.project.states?.[projectId]?.[response.group] || []), response],
},
};
});
return response;
} catch (error) {
console.log("Failed to create state from project store");
throw error;
}
};
updateState = async (workspaceSlug: string, projectId: string, stateId: string, data: Partial<IState>) => {
const originalStates = this.rootStore.project.states || {};
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: {
...this.rootStore.project.states?.[projectId],
[data.group as string]: (this.rootStore.project.states?.[projectId]?.[data.group as string] || []).map(
(state) => (state.id === stateId ? { ...state, ...data } : state)
),
},
};
});
try {
const response = await this.stateService.patchState(
workspaceSlug,
projectId,
stateId,
data,
this.rootStore.user.currentUser!
);
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: {
...this.rootStore.project.states?.[projectId],
[response.group]: (this.rootStore.project.states?.[projectId]?.[response.group] || []).map((state) =>
state.id === stateId ? { ...state, ...response } : state
),
},
};
});
return response;
} catch (error) {
console.log("Failed to update state from project store");
runInAction(() => {
this.rootStore.project.states = originalStates;
});
throw error;
}
};
deleteState = async (workspaceSlug: string, projectId: string, stateId: string) => {
const originalStates = this.rootStore.project.projectStates;
try {
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: {
...this.rootStore.project.states?.[projectId],
[originalStates?.[0]?.group || ""]: (
this.rootStore.project.states?.[projectId]?.[originalStates?.[0]?.group || ""] || []
).filter((state) => state.id !== stateId),
},
};
});
// deleting using api
await this.stateService.deleteState(workspaceSlug, projectId, stateId, this.rootStore.user.currentUser!);
} catch (error) {
console.log("Failed to delete state from project store");
// reverting back to original label list
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: {
...this.rootStore.project.states?.[projectId],
[originalStates?.[0]?.group || ""]: originalStates || [],
},
};
});
}
};
markStateAsDefault = async (workspaceSlug: string, projectId: string, stateId: string) => {
const states = this.rootStore.project.projectStates;
const currentDefaultState = states?.find((state) => state.default);
let newStateList =
states?.map((state) => {
if (state.id === stateId) return { ...state, default: true };
if (state.id === currentDefaultState?.id) return { ...state, default: false };
return state;
}) ?? [];
newStateList = orderArrayBy(newStateList, "sequence", "ascending");
const newOrderedStateGroups = orderStateGroups(groupBy(newStateList, "group"));
const oldOrderedStateGroup = this.rootStore.project.states?.[projectId] || {}; // for reverting back to old state group if api fails
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: newOrderedStateGroups || {},
};
});
// updating using api
try {
this.stateService.patchState(
workspaceSlug,
projectId,
stateId,
{ default: true },
this.rootStore.user.currentUser!
);
if (currentDefaultState)
this.stateService.patchState(
workspaceSlug,
projectId,
currentDefaultState.id,
{ default: false },
this.rootStore.user.currentUser!
);
} catch (err) {
console.log("Failed to mark state as default");
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: oldOrderedStateGroup,
};
});
}
};
moveStatePosition = async (
workspaceSlug: string,
projectId: string,
stateId: string,
direction: "up" | "down",
groupIndex: number
) => {
const SEQUENCE_GAP = 15000;
let newSequence = SEQUENCE_GAP;
const states = this.rootStore.project.projectStates || [];
const groupedStates = groupBy(states || [], "group");
const selectedState = states?.find((state) => state.id === stateId);
const groupStates = states?.filter((state) => state.group === selectedState?.group);
const groupLength = groupStates.length;
if (direction === "up") {
if (groupIndex === 1) newSequence = groupStates[0].sequence - SEQUENCE_GAP;
else newSequence = (groupStates[groupIndex - 2].sequence + groupStates[groupIndex - 1].sequence) / 2;
} else {
if (groupIndex === groupLength - 2) newSequence = groupStates[groupLength - 1].sequence + SEQUENCE_GAP;
else newSequence = (groupStates[groupIndex + 2].sequence + groupStates[groupIndex + 1].sequence) / 2;
}
const newStateList = states?.map((state) => {
if (state.id === stateId) return { ...state, sequence: newSequence };
return state;
});
const newOrderedStateGroups = orderStateGroups(
groupBy(orderArrayBy(newStateList, "sequence", "ascending"), "group")
);
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: newOrderedStateGroups || {},
};
});
// updating using api
try {
await this.stateService.patchState(
workspaceSlug,
projectId,
stateId,
{ sequence: newSequence },
this.rootStore.user.currentUser!
);
} catch (err) {
console.log("Failed to move state position");
// reverting back to old state group if api fails
runInAction(() => {
this.rootStore.project.states = {
...this.rootStore.project.states,
[projectId]: groupedStates,
};
});
}
};
}