chore: implemented autorun for inbox issues (#2470)

* fix: inbox issues not loading

* chore: implemented autorun for inbox issues

* chore: don't revalidate inbox list
This commit is contained in:
Aaryan Khandelwal 2023-10-18 13:56:19 +05:30 committed by GitHub
parent 3197dd484c
commit baa2621fe2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 50 additions and 20 deletions

View File

@ -157,16 +157,14 @@ export const ProjectIssuesHeader: FC = observer(() => {
}
/>
</FiltersDropdown>
{projectId && inboxStore.isInboxEnabled(projectId.toString()) && (
{projectId && inboxStore.isInboxEnabled && inboxDetails && (
<Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxStore.getInboxId(projectId.toString())}`}>
<a>
<Button variant="neutral-primary" size="sm" className="relative">
Inbox
{inboxDetails && (
<span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
{inboxDetails.pending_issue_count}
</span>
)}
<span className="absolute -top-1.5 -right-1.5 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
{inboxDetails.pending_issue_count}
</span>
</Button>
</a>
</Link>

View File

@ -55,7 +55,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
: "border-custom-border-200"
}`}
>
<PriorityIcon priority={issue.priority ?? null} className="text-sm" />
<PriorityIcon priority={issue.priority ?? null} className="h-3.5 w-3.5" />
</div>
</Tooltip>
<Tooltip

View File

@ -18,11 +18,18 @@ interface IProjectAuthWrapper {
export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = 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<IProjectAuthWrapper> = 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) {

View File

@ -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
);

View File

@ -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<IInbox[]>;
fetchInboxDetails: (workspaceSlug: string, projectId: string, inboxId: string) => Promise<IInbox>;
// 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];

View File

@ -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) => {