github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[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
Show Stats 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>

12
web/hooks/use-intersection-observer.tsx
View File

@ -9,12 +9,12 @@ export type UseIntersectionObserverProps = {
export const useIntersectionObserver = (
containerRef: RefObject<HTMLDivElement>,
elementRef: RefObject<HTMLDivElement>,
elementRef: HTMLDivElement | null,
callback: () => void,
rootMargin?: string
) => {
useEffect(() => {
if (elementRef.current) {
if (elementRef) {
const observer = new IntersectionObserver(
(entries) => {
if (entries[entries.length - 1].isIntersecting) {
@ -26,16 +26,16 @@ export const useIntersectionObserver = (
rootMargin,
}
);
observer.observe(elementRef.current);
observer.observe(elementRef);
return () => {
if (elementRef.current) {
if (elementRef) {
// eslint-disable-next-line react-hooks/exhaustive-deps
observer.unobserve(elementRef.current);
observer.unobserve(elementRef);
}
};
}
// while removing the current from the refs, the observer is not not working as expected
// fix this eslint warning with caution
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [rootMargin, callback, elementRef.current, containerRef.current]);
}, [rootMargin, callback, elementRef, containerRef.current]);
};

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

@ -1,4 +1,4 @@
import { ReactElement, useEffect } from "react";
import { ReactElement } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// components
@ -11,7 +11,7 @@ import { EmptyStateType } from "@/constants/empty-state";
// helpers
import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
// hooks
import { useProject, useProjectInbox } from "@/hooks/store";
import { useProject } from "@/hooks/store";
// layouts
import { AppLayout } from "@/layouts/app-layout";
// types
@ -23,12 +23,6 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
const { workspaceSlug, projectId, currentTab: navigationTab, inboxIssueId } = router.query;
// hooks
const { currentProjectDetails } = useProject();
const { currentTab, handleCurrentTab } = useProjectInbox();
useEffect(() => {
if (navigationTab && currentTab != navigationTab)
handleCurrentTab(navigationTab === "open" ? EInboxIssueCurrentTab.OPEN : EInboxIssueCurrentTab.CLOSED);
}, [currentTab, navigationTab, handleCurrentTab]);
// No access to inbox
if (currentProjectDetails?.inbox_view === false)
@ -44,6 +38,12 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
// derived values
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : "Plane - Inbox";
const currentNavigationTab = navigationTab
? navigationTab === "open"
? EInboxIssueCurrentTab.OPEN
: EInboxIssueCurrentTab.CLOSED
: undefined;
if (!workspaceSlug || !projectId) return <></>;
return (
@ -55,6 +55,7 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
projectId={projectId.toString()}
inboxIssueId={inboxIssueId?.toString() || undefined}
inboxAccessible={currentProjectDetails?.inbox_view || false}
navigationTab={currentNavigationTab}
/>
</div>
</div>

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

@ -321,8 +321,6 @@ export class ProjectInboxStore implements IProjectInboxStore {
(this.inboxIssuePaginationInfo?.total_results &&
this.inboxIssueIds.length < this.inboxIssuePaginationInfo?.total_results))
) {
this.loader = "pagination-loading";
const queryParams = this.inboxIssueQueryParams(
this.inboxFilters,
this.inboxSorting,
@ -332,7 +330,6 @@ export class ProjectInboxStore implements IProjectInboxStore {
const { results, ...paginationInfo } = await this.inboxIssueService.list(workspaceSlug, projectId, queryParams);
runInAction(() => {
this.loader = undefined;
set(this, "inboxIssuePaginationInfo", paginationInfo);
if (results && results.length > 0) {
const issueIds = results.map((value) => value?.issue?.id);
@ -343,7 +340,6 @@ export class ProjectInboxStore implements IProjectInboxStore {
} else set(this, ["inboxIssuePaginationInfo", "next_page_results"], false);
} catch (error) {
console.error("Error fetching the inbox issues", error);
this.loader = undefined;
this.error = {
message: "Error fetching the paginated inbox issues please try again later.",
status: "pagination-error",