thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: optimised issue loaders and added enum for issue status and current tab (#4164)

Browse Source
This commit is contained in:
guru_sainath 2024-04-10 19:55:16 +05:30 committed by GitHub
parent 7aa1d750ea
commit cfbc1a91af
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 131 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
packages/types/src/inbox.d.ts vendored
View File

@ -2,9 +2,22 @@ import { TPaginationInfo } from "./common";
import { TIssuePriorities } from "./issues";
import { TIssue } from "./issues/base";
export type TInboxIssueCurrentTab = "open" | "closed";
enum EInboxIssueCurrentTab {
OPEN = "open",
CLOSED = "closed",
}
export type TInboxIssueStatus = -2 | -1 | 0 | 1 | 2;
enum EInboxIssueStatus {
PENDING = -2,
DECLINED = -1,
SNOOZED = 0,
ACCEPTED = 1,
DUPLICATE = 2,
}
export type TInboxIssueCurrentTab = EInboxIssueCurrentTab;
export type TInboxIssueStatus = EInboxIssueStatus;
// filters
export type TInboxIssueFilterMemberKeys = "assignee" | "created_by";

13
web/components/inbox/content/inbox-issue-header.tsx
View File

@ -16,6 +16,7 @@ import { IssueUpdateStatus } from "@/components/issues";
// constants
import { EUserProjectRoles } from "@/constants/project";
// helpers
import { EInboxIssueStatus } from "@/helpers/inbox.helper";
import { copyUrlToClipboard } from "@/helpers/string.helper";
// hooks
import { useUser, useProjectInbox, useProject } from "@/hooks/store";
@ -60,27 +61,27 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
const issueLink = `${workspaceSlug}/projects/${issue?.project_id}/issues/${currentInboxIssueId}`;
const handleInboxIssueAccept = async () => {
inboxIssue?.updateInboxIssueStatus(1);
await inboxIssue?.updateInboxIssueStatus(EInboxIssueStatus.ACCEPTED);
setAcceptIssueModal(false);
};
const handleInboxIssueDecline = async () => {
inboxIssue?.updateInboxIssueStatus(-1);
await inboxIssue?.updateInboxIssueStatus(EInboxIssueStatus.DECLINED);
setDeclineIssueModal(false);
};
const handleInboxIssueDuplicate = (issueId: string) => {
inboxIssue?.updateInboxIssueDuplicateTo(issueId);
const handleInboxIssueDuplicate = async (issueId: string) => {
await inboxIssue?.updateInboxIssueDuplicateTo(issueId);
};
const handleInboxSIssueSnooze = async (date: Date) => {
inboxIssue?.updateInboxIssueSnoozeTill(date);
await inboxIssue?.updateInboxIssueSnoozeTill(date);
setIsSnoozeDateModalOpen(false);
};
const handleInboxIssueDelete = async () => {
if (!inboxIssue || !currentInboxIssueId) return;
deleteInboxIssue(workspaceSlug, projectId, currentInboxIssueId).finally(() => {
await deleteInboxIssue(workspaceSlug, projectId, currentInboxIssueId).finally(() => {
router.push(`/${workspaceSlug}/projects/${projectId}/inbox`);
});
};

3
web/components/inbox/modals/create-issue-modal.tsx
View File

@ -52,7 +52,7 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
const workspaceStore = useWorkspace();
const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
// store hooks
const { createInboxIssue, handleCurrentTab } = useProjectInbox();
const { createInboxIssue } = useProjectInbox();
const {
config: { envConfig },
} = useApplication();
@ -80,7 +80,6 @@ export const CreateInboxIssueModal: React.FC<Props> = observer((props) => {
.then((res) => {
if (!createMore) {
router.push(`/${workspaceSlug}/projects/${projectId}/inbox/?currentTab=open&inboxIssueId=${res?.issue?.id}`);
handleCurrentTab("open");
handleClose();
} else {
reset(defaultValues);

7
web/components/inbox/root.tsx
View File

@ -25,8 +25,11 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
useSWR(
inboxAccessible && workspaceSlug && projectId ? `PROJECT_INBOX_ISSUES_${workspaceSlug}_${projectId}` : null,
() => {
inboxAccessible && workspaceSlug && projectId && fetchInboxIssues(workspaceSlug.toString(), projectId.toString());
async () => {
inboxAccessible &&
workspaceSlug &&
projectId &&
(await fetchInboxIssues(workspaceSlug.toString(), projectId.toString()));
},
{ revalidateOnFocus: false, revalidateIfStale: false }
);

15
web/components/inbox/sidebar/inbox-list-item.tsx
View File

@ -1,4 +1,4 @@
import { FC, MouseEvent, useEffect } from "react";
import { FC, MouseEvent } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { useRouter } from "next/router";
@ -32,19 +32,6 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
const { isMobile } = usePlatformOS();
const issue = inboxIssue.issue;
useEffect(() => {
if (issue.id === inboxIssueId) {
setTimeout(() => {
const issueItemCard = document.getElementById(`inbox-issue-list-item-${issue.id}`);
if (issueItemCard)
issueItemCard.scrollIntoView({
behavior: "smooth",
block: "center",
});
}, 200);
}
}, [inboxIssueId, issue.id]);
const handleIssueRedirection = (event: MouseEvent, currentIssueId: string | undefined) => {
if (inboxIssueId === currentIssueId) event.preventDefault();
};

1
web/components/inbox/sidebar/inbox-list.tsx
View File

@ -20,7 +20,6 @@ export const InboxIssueList: FC<InboxIssueListProps> = observer((props) => {
{inboxIssues.map((inboxIssue) => (
<Fragment key={inboxIssue.id}>
<InboxIssueListItem
key={inboxIssue.id}
workspaceSlug={workspaceSlug}
projectId={projectId}
projectIdentifier={projectIdentifier}

9
web/components/inbox/sidebar/root.tsx
View File

@ -11,6 +11,7 @@ import { InboxSidebarLoader } from "@/components/ui";
import { EmptyStateType } from "@/constants/empty-state";
// helpers
import { cn } from "@/helpers/common.helper";
import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
// hooks
import { useProject, useProjectInbox } from "@/hooks/store";
import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
@ -22,11 +23,11 @@ type IInboxSidebarProps = {
const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
{
key: "open",
key: EInboxIssueCurrentTab.OPEN,
label: "Open",
},
{
key: "closed",
key: EInboxIssueCurrentTab.CLOSED,
label: "Closed",
},
];
@ -99,7 +100,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
<InboxIssueAppliedFilters />
{isLoading === "filter-loading" && !inboxIssuePaginationInfo?.next_page_results ? (
{isLoading != undefined && isLoading === "filter-loading" && !inboxIssuePaginationInfo?.next_page_results ? (
<InboxSidebarLoader />
) : (
<div
@ -119,7 +120,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
type={
getAppliedFiltersCount > 0
? EmptyStateType.INBOX_SIDEBAR_FILTER_EMPTY_STATE
: currentTab === "open"
: currentTab === EInboxIssueCurrentTab.OPEN
? EmptyStateType.INBOX_SIDEBAR_OPEN_TAB
: EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB
}

11
web/constants/inbox.tsx
View File

@ -4,6 +4,7 @@ import { AlertTriangle, CheckCircle2, Clock, Copy, LucideIcon, XCircle } from "l
import { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys, TInboxIssueStatus } from "@plane/types";
// helpers
import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
import { EInboxIssueStatus } from "@/helpers/inbox.helper";
export const INBOX_STATUS: {
key: string;
@ -16,7 +17,7 @@ export const INBOX_STATUS: {
}[] = [
{
key: "pending",
status: -2,
status: EInboxIssueStatus.PENDING,
icon: AlertTriangle,
title: "Pending",
description: () => `Pending`,
@ -25,7 +26,7 @@ export const INBOX_STATUS: {
},
{
key: "declined",
status: -1,
status: EInboxIssueStatus.DECLINED,
icon: XCircle,
title: "Declined",
description: () => `Declined`,
@ -34,7 +35,7 @@ export const INBOX_STATUS: {
},
{
key: "snoozed",
status: 0,
status: EInboxIssueStatus.SNOOZED,
icon: Clock,
title: "Snoozed",
description: (snoozedTillDate: Date = new Date()) => `${findHowManyDaysLeft(snoozedTillDate)} days to go`,
@ -43,7 +44,7 @@ export const INBOX_STATUS: {
},
{
key: "accepted",
status: 1,
status: EInboxIssueStatus.ACCEPTED,
icon: CheckCircle2,
title: "Accepted",
description: () => `Accepted`,
@ -52,7 +53,7 @@ export const INBOX_STATUS: {
},
{
key: "duplicate",
status: 2,
status: EInboxIssueStatus.DUPLICATE,
icon: Copy,
title: "Duplicate",
description: () => `Duplicate`,

13
web/helpers/inbox.helper.ts
View File

@ -1,6 +1,19 @@
import { subDays } from "date-fns";
import { renderFormattedPayloadDate } from "./date-time.helper";
export enum EInboxIssueCurrentTab {
OPEN = "open",
CLOSED = "closed",
}
export enum EInboxIssueStatus {
PENDING = -2,
DECLINED = -1,
SNOOZED = 0,
ACCEPTED = 1,
DUPLICATE = 2,
}
export enum EPastDurationFilters {
TODAY = "today",
YESTERDAY = "yesterday",

5
web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx
View File

@ -8,6 +8,8 @@ import { ProjectInboxHeader } from "@/components/headers";
import { InboxIssueRoot } from "@/components/inbox";
// constants
import { EmptyStateType } from "@/constants/empty-state";
// helpers
import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
// hooks
import { useProject, useProjectInbox } from "@/hooks/store";
// layouts
@ -40,7 +42,8 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : "Plane - Inbox";
useEffect(() => {
if (navigationTab && currentTab != navigationTab) handleCurrentTab(navigationTab === "open" ? "open" : "closed");
if (navigationTab && currentTab != navigationTab)
handleCurrentTab(navigationTab === "open" ? EInboxIssueCurrentTab.OPEN : EInboxIssueCurrentTab.CLOSED);
}, [currentTab, navigationTab, handleCurrentTab]);
return (

10
web/store/inbox/inbox-issue.store.ts
View File

@ -1,6 +1,8 @@
import set from "lodash/set";
import { makeObservable, observable, runInAction, action } from "mobx";
import { TIssue, TInboxIssue, TInboxIssueStatus, TInboxDuplicateIssueDetails } from "@plane/types";
// helpers
import { EInboxIssueStatus } from "@/helpers/inbox.helper";
// services
import { InboxIssueService } from "@/services/inbox";
// root store
@ -26,7 +28,7 @@ export class InboxIssueStore implements IInboxIssueStore {
// observables
isLoading: boolean = false;
id: string;
status: TInboxIssueStatus = -2;
status: TInboxIssueStatus = EInboxIssueStatus.PENDING;
issue: Partial<TIssue> = {};
snoozed_till: Date | undefined;
duplicate_to: string | undefined;
@ -82,7 +84,8 @@ export class InboxIssueStore implements IInboxIssueStore {
};
updateInboxIssueDuplicateTo = async (issueId: string) => {
const inboxStatus = 2;
const inboxStatus = EInboxIssueStatus.DUPLICATE;
const previousData: Partial<TInboxIssue> = {
status: this.status,
duplicate_to: this.duplicate_to,
@ -108,7 +111,8 @@ export class InboxIssueStore implements IInboxIssueStore {
};
updateInboxIssueSnoozeTill = async (date: Date) => {
const inboxStatus = 0;
const inboxStatus = EInboxIssueStatus.SNOOZED;
const previousData: Partial<TInboxIssue> = {
status: this.status,
snoozed_till: this.snoozed_till,

83
web/store/inbox/project-inbox.store.ts
View File

@ -1,5 +1,7 @@
import isEmpty from "lodash/isEmpty";
import omit from "lodash/omit";
import orderBy from "lodash/orderBy";
import reverse from "lodash/reverse";
import set from "lodash/set";
import { action, computed, makeObservable, observable, runInAction } from "mobx";
import { computedFn } from "mobx-utils";
@ -13,19 +15,26 @@ import {
TInboxIssueSortingOrderByQueryParam,
} from "@plane/types";
// helpers
import { EPastDurationFilters, getCustomDates } from "@/helpers/inbox.helper";
import { EInboxIssueCurrentTab, EInboxIssueStatus, EPastDurationFilters, getCustomDates } from "@/helpers/inbox.helper";
// services
import { InboxIssueService } from "@/services/inbox";
// root store
import { IInboxIssueStore, InboxIssueStore } from "@/store/inbox/inbox-issue.store";
import { RootStore } from "@/store/root.store";
type TLoader = "init-loading" | "filter-loading" | "pagination-loading" | "issue-loading" | undefined;
type TLoader =
| "init-loading"
| "mutation-loading"
| "filter-loading"
| "pagination-loading"
| "issue-loading"
| undefined;
export interface IProjectInboxStore {
currentTab: TInboxIssueCurrentTab;
isLoading: TLoader;
error: { message: string; status: "init-error" | "pagination-error" } | undefined;
currentInboxProjectId: string;
inboxFilters: Partial<TInboxIssueFilter>;
inboxSorting: Partial<TInboxIssueSorting>;
inboxIssuePaginationInfo: TInboxIssuePaginationInfo | undefined;
@ -35,6 +44,7 @@ export interface IProjectInboxStore {
inboxIssuesArray: IInboxIssueStore[];
// helper actions
getIssueInboxByIssueId: (issueId: string) => IInboxIssueStore | undefined;
inboxIssueSorting: (issues: IInboxIssueStore[]) => IInboxIssueStore[];
inboxIssueQueryParams: (
inboxFilters: Partial<TInboxIssueFilter>,
inboxSorting: Partial<TInboxIssueSorting>,
@ -60,11 +70,12 @@ export class ProjectInboxStore implements IProjectInboxStore {
// constants
PER_PAGE_COUNT = 10;
// observables
currentTab: TInboxIssueCurrentTab = "open";
isLoading: TLoader = undefined;
currentTab: TInboxIssueCurrentTab = EInboxIssueCurrentTab.OPEN;
isLoading: TLoader = "init-loading";
error: { message: string; status: "init-error" | "pagination-error" } | undefined = undefined;
currentInboxProjectId: string = "";
inboxFilters: Partial<TInboxIssueFilter> = {
status: [-2],
status: [EInboxIssueStatus.PENDING],
};
inboxSorting: Partial<TInboxIssueSorting> = {
order_by: "issue__created_at",
@ -79,6 +90,8 @@ export class ProjectInboxStore implements IProjectInboxStore {
makeObservable(this, {
currentTab: observable.ref,
isLoading: observable.ref,
error: observable,
currentInboxProjectId: observable.ref,
inboxFilters: observable,
inboxSorting: observable,
inboxIssuePaginationInfo: observable,
@ -111,13 +124,40 @@ export class ProjectInboxStore implements IProjectInboxStore {
}
get inboxIssuesArray() {
return Object.values(this.inboxIssues || {}).filter((inbox) =>
(this.currentTab === "open" ? [-2, 0] : [-1, 1, 2]).includes(inbox.status)
return this.inboxIssueSorting(
Object.values(this.inboxIssues || {}).filter((inbox) =>
(this.currentTab === EInboxIssueCurrentTab.OPEN
? [EInboxIssueStatus.PENDING, EInboxIssueStatus.SNOOZED]
: [EInboxIssueStatus.ACCEPTED, EInboxIssueStatus.DECLINED, EInboxIssueStatus.DUPLICATE]
).includes(inbox.status)
)
);
}
getIssueInboxByIssueId = computedFn((issueId: string) => this.inboxIssues?.[issueId] || undefined);
// helpers
inboxIssueSorting = (issues: IInboxIssueStore[]) => {
console.log("issues", issues);
let inboxIssues: IInboxIssueStore[] = [];
if (this.inboxSorting?.order_by && this.inboxSorting?.sort_by) {
switch (this.inboxSorting.order_by) {
case "issue__created_at":
if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(issues, ["issue", "created_at"]);
else inboxIssues = reverse(orderBy(issues, ["issue", "created_at"]));
case "issue__updated_at":
if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(issues, ["issue", "updated_at"]);
else inboxIssues = reverse(orderBy(issues, ["issue", "updated_at"]));
case "issue__sequence_id":
if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(issues, ["issue", "sequence_id"]);
else inboxIssues = reverse(orderBy(issues, ["issue", "sequence_id"]));
default:
inboxIssues = orderBy(issues, ["issue", "created_at"]);
}
}
return inboxIssues;
};
inboxIssueQueryParams = (
inboxFilters: Partial<TInboxIssueFilter>,
inboxSorting: Partial<TInboxIssueSorting>,
@ -177,6 +217,8 @@ export class ProjectInboxStore implements IProjectInboxStore {
set(this, "inboxFilters", undefined);
set(this, ["inboxSorting", "order_by"], "issue__created_at");
set(this, ["inboxSorting", "sort_by"], "desc");
set(this, ["inboxIssues"], {});
set(this, ["inboxIssuePaginationInfo"], undefined);
if (tab === "closed") set(this, ["inboxFilters", "status"], [-1, 1, 2]);
else set(this, ["inboxFilters", "status"], [-2]);
const { workspaceSlug, projectId } = this.store.app.router;
@ -185,12 +227,16 @@ export class ProjectInboxStore implements IProjectInboxStore {
handleInboxIssueFilters = <T extends keyof TInboxIssueFilter>(key: T, value: TInboxIssueFilter[T]) => {
set(this.inboxFilters, key, value);
set(this, ["inboxIssues"], {});
set(this, ["inboxIssuePaginationInfo"], undefined);
const { workspaceSlug, projectId } = this.store.app.router;
if (workspaceSlug && projectId) this.fetchInboxIssues(workspaceSlug, projectId, "filter-loading");
};
handleInboxIssueSorting = <T extends keyof TInboxIssueSorting>(key: T, value: TInboxIssueSorting[T]) => {
set(this.inboxSorting, key, value);
set(this, ["inboxIssues"], {});
set(this, ["inboxIssuePaginationInfo"], undefined);
const { workspaceSlug, projectId } = this.store.app.router;
if (workspaceSlug && projectId) this.fetchInboxIssues(workspaceSlug, projectId, "filter-loading");
};
@ -202,10 +248,14 @@ export class ProjectInboxStore implements IProjectInboxStore {
*/
fetchInboxIssues = async (workspaceSlug: string, projectId: string, loadingType: TLoader = undefined) => {
try {
if (this.currentInboxProjectId != projectId) {
set(this, ["currentInboxProjectId"], projectId);
set(this, ["inboxIssues"], {});
set(this, ["inboxIssuePaginationInfo"], undefined);
}
if (Object.keys(this.inboxIssues).length === 0) this.isLoading = "init-loading";
else this.isLoading = "mutation-loading";
if (loadingType) this.isLoading = loadingType;
else if (Object.keys(this.inboxIssues).length === 0) this.isLoading = "init-loading";
set(this, ["inboxIssues"], {});
set(this, ["inboxIssuePaginationInfo"], undefined);
const queryParams = this.inboxIssueQueryParams(
this.inboxFilters,
@ -247,9 +297,10 @@ export class ProjectInboxStore implements IProjectInboxStore {
fetchInboxPaginationIssues = async (workspaceSlug: string, projectId: string) => {
try {
if (
!this.inboxIssuePaginationInfo?.total_results ||
(this.inboxIssuePaginationInfo?.total_results &&
this.inboxIssuesArray.length < this.inboxIssuePaginationInfo?.total_results)
this.inboxIssuePaginationInfo &&
(!this.inboxIssuePaginationInfo?.total_results ||
(this.inboxIssuePaginationInfo?.total_results &&
this.inboxIssuesArray.length < this.inboxIssuePaginationInfo?.total_results))
) {
this.isLoading = "pagination-loading";
@ -299,15 +350,15 @@ export class ProjectInboxStore implements IProjectInboxStore {
const issueId = inboxIssue?.issue?.id || undefined;
if (inboxIssue && issueId) {
runInAction(() => {
set(this.inboxIssues, [issueId], new InboxIssueStore(workspaceSlug, projectId, inboxIssue, this.store));
});
// fetching reactions
await this.store.issue.issueDetail.fetchReactions(workspaceSlug, projectId, issueId);
// fetching activity
await this.store.issue.issueDetail.fetchActivities(workspaceSlug, projectId, issueId);
// fetching comments
await this.store.issue.issueDetail.fetchComments(workspaceSlug, projectId, issueId);
runInAction(() => {
set(this.inboxIssues, [issueId], new InboxIssueStore(workspaceSlug, projectId, inboxIssue, this.store));
});
this.isLoading = undefined;
}
} catch {