binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

28
web/components/inbox/root.tsx
View file

@ -1,6 +1,5 @@
import { FC, useState } from "react";
import { FC, useEffect, useState } from "react";
import { observer } from "mobx-react";
import useSWR from "swr";
import { Inbox, PanelLeft } from "lucide-react";
// components
import { EmptyState } from "@/components/empty-state";
@ -10,6 +9,7 @@ import { InboxLayoutLoader } from "@/components/ui";
import { EmptyStateType } from "@/constants/empty-state";
// helpers
import { cn } from "@/helpers/common.helper";
import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
// hooks
import { useProjectInbox } from "@/hooks/store";
@ -18,25 +18,25 @@ type TInboxIssueRoot = {
projectId: string;
inboxIssueId: string | undefined;
inboxAccessible: boolean;
navigationTab?: EInboxIssueCurrentTab | undefined;
};
export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
const { workspaceSlug, projectId, inboxIssueId, inboxAccessible } = props;
const { workspaceSlug, projectId, inboxIssueId, inboxAccessible, navigationTab } = props;
// states
const [isMobileSidebar, setIsMobileSidebar] = useState(true);
// hooks
const { loader, error, fetchInboxIssues } = useProjectInbox();
const { loader, error, currentTab, handleCurrentTab, fetchInboxIssues } = useProjectInbox();
useSWR(
inboxAccessible && workspaceSlug && projectId ? `PROJECT_INBOX_ISSUES_${workspaceSlug}_${projectId}` : null,
async () => {
inboxAccessible &&
workspaceSlug &&
projectId &&
(await fetchInboxIssues(workspaceSlug.toString(), projectId.toString()));
},
{ revalidateOnFocus: false, revalidateIfStale: false }
);
useEffect(() => {
if (!inboxAccessible || !workspaceSlug || !projectId) return;
if (navigationTab && navigationTab !== currentTab) {
handleCurrentTab(navigationTab);
} else {
fetchInboxIssues(workspaceSlug.toString(), projectId.toString());
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [inboxAccessible, workspaceSlug, projectId]);
// loader
if (loader === "init-loading")

16
web/components/inbox/sidebar/root.tsx
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>