[WEB-1481] fix: multiple API calls in inbox issues on closed issues tab. (#4691)

* fix: multiple API calls on scroll and closed issues tab.

* fix: pagination loader on initial load.
This commit is contained in:
Prateek Shourya 2024-06-04 13:18:25 +05:30 committed by GitHub
parent 20acb0dd17
commit 77b73dc032
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 38 additions and 39 deletions

View file

@ -1,4 +1,4 @@
import { FC, useCallback, useRef } from "react";
import { FC, useCallback, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { TInboxIssueCurrentTab } from "@plane/types";
@ -37,7 +37,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
const { workspaceSlug, projectId, setIsMobileSidebar } = props;
// ref
const containerRef = useRef<HTMLDivElement>(null);
const elementRef = useRef<HTMLDivElement>(null);
const [elementRef, setElementRef] = useState<HTMLDivElement | null>(null);
// store
const { currentProjectDetails } = useProject();
const {
@ -72,8 +72,10 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
currentTab === option?.key ? `text-custom-primary-100` : `hover:text-custom-text-200`
)}
onClick={() => {
if (currentTab != option?.key) handleCurrentTab(option?.key);
router.push(`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${option?.key}`);
if (currentTab != option?.key) {
handleCurrentTab(option?.key);
router.push(`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${option?.key}`);
}
}}
>
<div>{option?.label}</div>
@ -126,14 +128,14 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
/>
</div>
)}
{inboxIssuePaginationInfo?.next_page_results && (
<div ref={elementRef}>
<div ref={setElementRef}>
{inboxIssuePaginationInfo?.next_page_results && (
<Loader className="mx-auto w-full space-y-4 py-4 px-2">
<Loader.Item height="64px" width="w-100" />
<Loader.Item height="64px" width="w-100" />
</Loader>
)}
</div>
)}
</div>
)}
</div>