From bba10d70736d8912fb537a559084d224bb2139a4 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Sat, 15 Jun 2024 11:07:04 +0530 Subject: [PATCH] [WEB-1603] fix: load more issues when issues are deleted (#4830) * fix load more issues when issues are deleted * fix build --- web/core/components/inbox/sidebar/root.tsx | 8 +++++- .../issue-layouts/kanban/kanban-group.tsx | 11 +++++--- .../issues/issue-layouts/list/list-group.tsx | 4 +-- .../spreadsheet/spreadsheet-table.tsx | 9 ++++++- web/core/store/issue/archived/issue.store.ts | 2 +- web/core/store/issue/cycle/issue.store.ts | 2 +- web/core/store/issue/draft/issue.store.ts | 2 +- .../store/issue/helpers/base-issues.store.ts | 25 ++++++++++++++++--- web/core/store/issue/module/issue.store.ts | 2 +- web/core/store/issue/profile/issue.store.ts | 2 +- .../store/issue/project-views/issue.store.ts | 2 +- web/core/store/issue/project/issue.store.ts | 2 +- web/core/store/issue/workspace/issue.store.ts | 2 +- 13 files changed, 55 insertions(+), 18 deletions(-) diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx index 3e858771f5..3356bfa99a 100644 --- a/web/core/components/inbox/sidebar/root.tsx +++ b/web/core/components/inbox/sidebar/root.tsx @@ -17,6 +17,7 @@ import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper"; // hooks import { useProject, useProjectInbox } from "@/hooks/store"; import { useIntersectionObserver } from "@/hooks/use-intersection-observer"; +import { useIssuesStore } from "@/hooks/use-issue-layout-store"; type IInboxSidebarProps = { workspaceSlug: string; @@ -51,6 +52,9 @@ export const InboxSidebar: FC = observer((props) => { fetchInboxPaginationIssues, getAppliedFiltersCount, } = useProjectInbox(); + const { + issues: { getIssueLoader }, + } = useIssuesStore(); const router = useRouter(); @@ -59,8 +63,10 @@ export const InboxSidebar: FC = observer((props) => { fetchInboxPaginationIssues(workspaceSlug.toString(), projectId.toString()); }, [workspaceSlug, projectId, fetchInboxPaginationIssues]); + const isPaginating = !!getIssueLoader(); + // page observer - useIntersectionObserver(containerRef, elementRef, fetchNextPages, "20%"); + useIntersectionObserver(containerRef, isPaginating ? null : elementRef, fetchNextPages, "20%"); return (
diff --git a/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx index e9365b34f1..3fa00f0a3b 100644 --- a/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx +++ b/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx @@ -91,9 +91,15 @@ export const KanbanGroup = observer((props: IKanbanGroup) => { loadMoreIssues(groupId, sub_group_id === "null"? undefined: sub_group_id) }, [loadMoreIssues, groupId, sub_group_id]) - useIntersectionObserver(containerRef, intersectionElement, loadMoreIssuesInThisGroup, `0% 100% 100% 100%`); - const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false); + const isPaginating = !!getIssueLoader(groupId); + useIntersectionObserver( + containerRef, + isPaginating ? null : intersectionElement, + loadMoreIssuesInThisGroup, + `0% 100% 100% 100%` + ); + const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false); // Enable Kanban Columns as Drop Targets useEffect(() => { @@ -216,7 +222,6 @@ export const KanbanGroup = observer((props: IKanbanGroup) => { const nextPageResults = getPaginationData(groupId, sub_group_id)?.nextPageResults; - const isPaginating = !!getIssueLoader(groupId, sub_group_id); const loadMore = isPaginating ? ( diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index 3f3852fdf9..0bca2a712e 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -98,12 +98,12 @@ export const ListGroup = observer((props: Props) => { const [intersectionElement, setIntersectionElement] = useState(null); - useIntersectionObserver(containerRef, intersectionElement, loadMoreIssues, `50% 0% 50% 0%`); - const groupIssueCount = getGroupIssueCount(group.id, undefined, false) ?? 0; const nextPageResults = getPaginationData(group.id, undefined)?.nextPageResults; const isPaginating = !!getIssueLoader(group.id); + useIntersectionObserver(containerRef, isPaginating ? null : intersectionElement, loadMoreIssues, `50% 0% 50% 0%`); + const shouldLoadMore = nextPageResults === undefined && groupIssueCount !== undefined && groupIssueIds ? groupIssueIds.length < groupIssueCount diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx index a639957f04..dc74fe48b9 100644 --- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx +++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx @@ -5,6 +5,7 @@ import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssue } from "@pl import { SpreadsheetIssueRowLoader } from "@/components/ui/loader"; //hooks import { useIntersectionObserver } from "@/hooks/use-intersection-observer"; +import { useIssuesStore } from "@/hooks/use-issue-layout-store"; import { TSelectionHelper } from "@/hooks/use-multiple-select"; import { useTableKeyboardNavigation } from "@/hooks/use-table-keyboard-navigation"; // components @@ -52,6 +53,10 @@ export const SpreadsheetTable = observer((props: Props) => { const isScrolled = useRef(false); const [intersectionElement, setIntersectionElement] = useState(null); + const { + issues: { getIssueLoader }, + } = useIssuesStore(); + const handleScroll = useCallback(() => { if (!containerRef.current) return; const scrollLeft = containerRef.current.scrollLeft; @@ -85,7 +90,9 @@ export const SpreadsheetTable = observer((props: Props) => { }; }, [handleScroll, containerRef]); - useIntersectionObserver(containerRef, intersectionElement, loadMoreIssues, `50% 0% 50% 0%`); + const isPaginating = !!getIssueLoader(); + + useIntersectionObserver(containerRef, isPaginating ? null : intersectionElement, loadMoreIssues, `50% 0% 50% 0%`); const handleKeyBoardNavigation = useTableKeyboardNavigation(); diff --git a/web/core/store/issue/archived/issue.store.ts b/web/core/store/issue/archived/issue.store.ts index 2b90bd6096..e4322d6657 100644 --- a/web/core/store/issue/archived/issue.store.ts +++ b/web/core/store/issue/archived/issue.store.ts @@ -131,7 +131,7 @@ export class ArchivedIssues extends BaseIssuesStore implements IArchivedIssues { // get params from stored pagination options const params = this.issueFilterStore?.getFilterParams( this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId ); diff --git a/web/core/store/issue/cycle/issue.store.ts b/web/core/store/issue/cycle/issue.store.ts index 263a2a2beb..61d2cfe44d 100644 --- a/web/core/store/issue/cycle/issue.store.ts +++ b/web/core/store/issue/cycle/issue.store.ts @@ -205,7 +205,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues { // get params from stored pagination options const params = this.issueFilterStore?.getFilterParams( this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId ); diff --git a/web/core/store/issue/draft/issue.store.ts b/web/core/store/issue/draft/issue.store.ts index db1ea1e9b8..5d4a6e88f0 100644 --- a/web/core/store/issue/draft/issue.store.ts +++ b/web/core/store/issue/draft/issue.store.ts @@ -129,7 +129,7 @@ export class DraftIssues extends BaseIssuesStore implements IDraftIssues { // get params from stored pagination options const params = this.issueFilterStore?.getFilterParams( this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId ); diff --git a/web/core/store/issue/helpers/base-issues.store.ts b/web/core/store/issue/helpers/base-issues.store.ts index f5e74184a6..2cc39d4f12 100644 --- a/web/core/store/issue/helpers/base-issues.store.ts +++ b/web/core/store/issue/helpers/base-issues.store.ts @@ -305,8 +305,9 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore { const subGroupBy = displayFilters?.sub_group_by; const groupBy = displayFilters?.group_by; - if (!groupBy && !subGroupBy && Array.isArray(groupedIssueIds)) { - return groupedIssueIds as string[]; + const allIssues = groupedIssueIds[ALL_ISSUES]; + if (!groupBy && !subGroupBy && allIssues && Array.isArray(allIssues)) { + return allIssues as string[]; } if (groupBy && groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) { @@ -314,7 +315,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore { } if (groupBy && subGroupBy && groupId && subGroupId) { - return (groupedIssueIds as TSubGroupedIssues)?.[subGroupId]?.[groupId] as string[]; + return (groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[subGroupId] as string[]; } return undefined; @@ -421,6 +422,24 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore { } ); + /** + * Gets the next page cursor based on number of issues currently available + * @param groupId groupId for the cursor + * @param subGroupId subgroupId for cursor + * @returns next page cursor or undefined + */ + getNextCursor = (groupId: string | undefined, subGroupId: string | undefined): string | undefined => { + const groupedIssues = this.getIssueIds(groupId, subGroupId) ?? []; + const currentIssueCount = groupedIssues.length; + + if (!this.paginationOptions) return; + + const { perPageCount } = this.paginationOptions; + const nextPage = Math.floor(currentIssueCount / perPageCount); + + return `${perPageCount}:${nextPage}:0`; + }; + /** * This Method is called after fetching the first paginated issues * diff --git a/web/core/store/issue/module/issue.store.ts b/web/core/store/issue/module/issue.store.ts index 617302af63..c3b9fa967a 100644 --- a/web/core/store/issue/module/issue.store.ts +++ b/web/core/store/issue/module/issue.store.ts @@ -160,7 +160,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues { // get params from stored pagination options const params = this.issueFilterStore?.getFilterParams( this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId ); diff --git a/web/core/store/issue/profile/issue.store.ts b/web/core/store/issue/profile/issue.store.ts index 1a7e2127db..3bfd3dc0ea 100644 --- a/web/core/store/issue/profile/issue.store.ts +++ b/web/core/store/issue/profile/issue.store.ts @@ -167,7 +167,7 @@ export class ProfileIssues extends BaseIssuesStore implements IProfileIssues { // get params from stored pagination options let params = this.issueFilterStore?.getFilterParams( this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId ); diff --git a/web/core/store/issue/project-views/issue.store.ts b/web/core/store/issue/project-views/issue.store.ts index cf7c337885..1d2d7f0c9f 100644 --- a/web/core/store/issue/project-views/issue.store.ts +++ b/web/core/store/issue/project-views/issue.store.ts @@ -127,7 +127,7 @@ export class ProjectViewIssues extends BaseIssuesStore implements IProjectViewIs // get params from stored pagination options const params = this.issueFilterStore?.getFilterParams( this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId ); diff --git a/web/core/store/issue/project/issue.store.ts b/web/core/store/issue/project/issue.store.ts index 0136fe907c..27a6962535 100644 --- a/web/core/store/issue/project/issue.store.ts +++ b/web/core/store/issue/project/issue.store.ts @@ -130,7 +130,7 @@ export class ProjectIssues extends BaseIssuesStore implements IProjectIssues { // get params from stored pagination options const params = this.issueFilterStore?.getFilterParams( this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId ); diff --git a/web/core/store/issue/workspace/issue.store.ts b/web/core/store/issue/workspace/issue.store.ts index 12d3a71528..24415a9b7c 100644 --- a/web/core/store/issue/workspace/issue.store.ts +++ b/web/core/store/issue/workspace/issue.store.ts @@ -130,7 +130,7 @@ export class WorkspaceIssues extends BaseIssuesStore implements IWorkspaceIssues const params = this.issueFilterStore?.getFilterParams( viewId, this.paginationOptions, - cursorObject?.nextCursor, + this.getNextCursor(groupId, subGroupId), groupId, subGroupId );