fix issue pagination cursor logic (#4857)

This commit is contained in:
rahulramesha
2024-06-18 17:45:24 +05:30
committed by GitHub
parent c8736f13ec
commit 8500c63205
3 changed files with 21 additions and 19 deletions

View File

@@ -8,6 +8,7 @@ import { Loader } from "@plane/ui";
import { IGanttBlock, IBlockUpdateData } from "@/components/gantt-chart/types";
//hooks
import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
import { useIssuesStore } from "@/hooks/use-issue-layout-store";
import { TSelectionHelper } from "@/hooks/use-multiple-select";
import { GanttDnDHOC } from "../gantt-dnd-HOC";
import { handleOrderChange } from "../utils";
@@ -41,9 +42,20 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
selectionHelpers,
} = props;
const {
issues: { getIssueLoader },
} = useIssuesStore();
const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
useIntersectionObserver(ganttContainerRef, intersectionElement, loadMoreBlocks, "50% 0% 50% 0%");
const isPaginating = !!getIssueLoader();
useIntersectionObserver(
ganttContainerRef,
isPaginating ? null : intersectionElement,
loadMoreBlocks,
"50% 0% 50% 0%"
);
const handleOnDrop = (
draggingBlockId: string | undefined,

View File

@@ -17,7 +17,6 @@ import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
import { useProject, useProjectInbox } from "@/hooks/store";
import { useAppRouter } from "@/hooks/use-app-router";
import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
import { useIssuesStore } from "@/hooks/use-issue-layout-store";
type IInboxSidebarProps = {
workspaceSlug: string;
@@ -52,9 +51,6 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
fetchInboxPaginationIssues,
getAppliedFiltersCount,
} = useProjectInbox();
const {
issues: { getIssueLoader },
} = useIssuesStore();
const router = useAppRouter();
@@ -63,10 +59,8 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
fetchInboxPaginationIssues(workspaceSlug.toString(), projectId.toString());
}, [workspaceSlug, projectId, fetchInboxPaginationIssues]);
const isPaginating = !!getIssueLoader();
// page observer
useIntersectionObserver(containerRef, isPaginating ? null : elementRef, fetchNextPages, "20%");
useIntersectionObserver(containerRef, elementRef, fetchNextPages, "20%");
return (
<div className="bg-custom-background-100 flex-shrink-0 w-full h-full border-r border-custom-border-300 ">

View File

@@ -299,23 +299,19 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
getIssueIds = (groupId?: string, subGroupId?: string) => {
const groupedIssueIds = this.groupedIssueIds;
const displayFilters = this.issueFilterStore?.issueFilters?.displayFilters;
if (!displayFilters || !groupedIssueIds) return undefined;
if (!groupedIssueIds) return undefined;
const subGroupBy = displayFilters?.sub_group_by;
const groupBy = displayFilters?.group_by;
const allIssues = groupedIssueIds[ALL_ISSUES];
if (!groupBy && !subGroupBy && allIssues && Array.isArray(allIssues)) {
const allIssues = groupedIssueIds[ALL_ISSUES] ?? [];
if (!this.groupBy && !this.subGroupBy && allIssues && Array.isArray(allIssues)) {
return allIssues as string[];
}
if (groupBy && groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) {
return groupedIssueIds[groupId] as string[];
if (this.groupBy && groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) {
return (groupedIssueIds[groupId] ?? []) as string[];
}
if (groupBy && subGroupBy && groupId && subGroupId) {
return (groupedIssueIds as TSubGroupedIssues)?.[groupId]?.[subGroupId] as string[];
if (this.groupBy && this.subGroupBy && groupId && subGroupId) {
return ((groupedIssueIds as TSubGroupedIssues)[groupId]?.[subGroupId] ?? []) as string[];
}
return undefined;