diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx index 910e18a52..25a2addaf 100644 --- a/web/components/headers/project-issues.tsx +++ b/web/components/headers/project-issues.tsx @@ -157,16 +157,14 @@ export const ProjectIssuesHeader: FC = observer(() => { } /> - {projectId && inboxStore.isInboxEnabled(projectId.toString()) && ( + {projectId && inboxStore.isInboxEnabled && inboxDetails && ( diff --git a/web/components/inbox/issue-card.tsx b/web/components/inbox/issue-card.tsx index edaed1cd5..223ef6821 100644 --- a/web/components/inbox/issue-card.tsx +++ b/web/components/inbox/issue-card.tsx @@ -55,7 +55,7 @@ export const InboxIssueCard: React.FC = (props) => { : "border-custom-border-200" }`} > - + = observer((props) => { const { children } = props; // store - const { user: userStore, project: projectStore } = useMobxStore(); + const { user: userStore, project: projectStore, inbox: inboxStore } = useMobxStore(); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; + // fetching project details + useSWR( + workspaceSlug && projectId ? `PROJECT_DETAILS_${workspaceSlug.toString()}_${projectId.toString()}` : null, + workspaceSlug && projectId + ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString()) + : null + ); // fetching user project member information useSWR( workspaceSlug && projectId ? `PROJECT_MEMBERS_ME_${workspaceSlug}_${projectId}` : null, @@ -51,6 +58,17 @@ export const ProjectAuthWrapper: FC = observer((props) => { ? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null ); + // fetching project inboxes if inbox is enabled + useSWR( + workspaceSlug && projectId && inboxStore.isInboxEnabled ? `PROJECT_INBOXES_${workspaceSlug}_${projectId}` : null, + workspaceSlug && projectId && inboxStore.isInboxEnabled + ? () => inboxStore.fetchInboxesList(workspaceSlug.toString(), projectId.toString()) + : null, + { + revalidateOnFocus: false, + revalidateOnReconnect: false, + } + ); // check if the project member apis is loading if (!userStore.projectMemberInfo && userStore.hasPermissionToProject === null) { diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx index f08837e8c..f53d8f25c 100644 --- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx +++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx @@ -19,7 +19,7 @@ const ProjectInbox: NextPage = () => { const router = useRouter(); const { workspaceSlug, projectId, inboxId } = router.query; - const { inboxIssues: inboxIssuesStore, inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore(); + const { inboxFilters: inboxFiltersStore, project: projectStore } = useMobxStore(); const projectDetails = workspaceSlug && projectId @@ -27,12 +27,9 @@ const ProjectInbox: NextPage = () => { : undefined; useSWR( - workspaceSlug && projectId && inboxId ? `REVALIDATE_INBOX_${inboxId.toString()}` : null, + workspaceSlug && projectId && inboxId ? `INBOX_FILTERS_${inboxId.toString()}` : null, workspaceSlug && projectId && inboxId - ? async () => { - await inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString()); - await inboxIssuesStore.fetchInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString()); - } + ? () => inboxFiltersStore.fetchInboxFilters(workspaceSlug.toString(), projectId.toString(), inboxId.toString()) : null ); diff --git a/web/store/inbox/inbox.store.ts b/web/store/inbox/inbox.store.ts index 132a56f62..c1ca08609 100644 --- a/web/store/inbox/inbox.store.ts +++ b/web/store/inbox/inbox.store.ts @@ -1,4 +1,4 @@ -import { observable, action, makeObservable, runInAction } from "mobx"; +import { observable, action, makeObservable, runInAction, computed } from "mobx"; // types import { RootStore } from "../root"; // services @@ -24,11 +24,13 @@ export interface IInboxStore { // actions setInboxId: (inboxId: string) => void; - isInboxEnabled: (projectId: string) => boolean; getInboxId: (projectId: string) => string | null; fetchInboxesList: (workspaceSlug: string, projectId: string) => Promise; fetchInboxDetails: (workspaceSlug: string, projectId: string, inboxId: string) => Promise; + + // computed + isInboxEnabled: boolean; } export class InboxStore implements IInboxStore { @@ -68,21 +70,27 @@ export class InboxStore implements IInboxStore { setInboxId: action, fetchInboxesList: action, - isInboxEnabled: action, getInboxId: action, + + // computed + isInboxEnabled: computed, }); this.rootStore = _rootStore; this.inboxService = new InboxService(); } - isInboxEnabled = (projectId: string) => { + get isInboxEnabled() { + const projectId = this.rootStore.project.projectId; + + if (!projectId) return false; + const projectDetails = this.rootStore.project.project_details[projectId]; if (!projectDetails) return false; return projectDetails.inbox_view; - }; + } getInboxId = (projectId: string) => { const projectDetails = this.rootStore.project.project_details[projectId]; diff --git a/web/store/inbox/inbox_issues.store.ts b/web/store/inbox/inbox_issues.store.ts index f2a45e731..06c7997b2 100644 --- a/web/store/inbox/inbox_issues.store.ts +++ b/web/store/inbox/inbox_issues.store.ts @@ -1,4 +1,4 @@ -import { observable, action, makeObservable, runInAction } from "mobx"; +import { observable, action, makeObservable, runInAction, autorun } from "mobx"; // types import { RootStore } from "../root"; // services @@ -51,6 +51,15 @@ export class InboxIssuesStore implements IInboxIssuesStore { this.rootStore = _rootStore; this.inboxService = new InboxService(); + + autorun(() => { + const workspaceSlug = this.rootStore.workspace.workspaceSlug; + const projectId = this.rootStore.project.projectId; + const inboxId = this.rootStore.inbox.inboxId; + + if (workspaceSlug && projectId && inboxId && this.rootStore.inboxFilters.inboxFilters[inboxId]) + this.fetchInboxIssues(workspaceSlug, projectId, inboxId); + }); } fetchInboxIssues = async (workspaceSlug: string, projectId: string, inboxId: string) => {