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 { observer } from "mobx-react";
import useSWR from "swr";
import { Inbox, PanelLeft } from "lucide-react"; import { Inbox, PanelLeft } from "lucide-react";
// components // components
import { EmptyState } from "@/components/empty-state"; import { EmptyState } from "@/components/empty-state";
@ -10,6 +9,7 @@ import { InboxLayoutLoader } from "@/components/ui";
import { EmptyStateType } from "@/constants/empty-state"; import { EmptyStateType } from "@/constants/empty-state";
// helpers // helpers
import { cn } from "@/helpers/common.helper"; import { cn } from "@/helpers/common.helper";
import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
// hooks // hooks
import { useProjectInbox } from "@/hooks/store"; import { useProjectInbox } from "@/hooks/store";
@ -18,25 +18,25 @@ type TInboxIssueRoot = {
projectId: string; projectId: string;
inboxIssueId: string | undefined; inboxIssueId: string | undefined;
inboxAccessible: boolean; inboxAccessible: boolean;
navigationTab?: EInboxIssueCurrentTab | undefined;
}; };
export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => { export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
const { workspaceSlug, projectId, inboxIssueId, inboxAccessible } = props; const { workspaceSlug, projectId, inboxIssueId, inboxAccessible, navigationTab } = props;
// states // states
const [isMobileSidebar, setIsMobileSidebar] = useState(true); const [isMobileSidebar, setIsMobileSidebar] = useState(true);
// hooks // hooks
const { loader, error, fetchInboxIssues } = useProjectInbox(); const { loader, error, currentTab, handleCurrentTab, fetchInboxIssues } = useProjectInbox();
useSWR( useEffect(() => {
inboxAccessible && workspaceSlug && projectId ? `PROJECT_INBOX_ISSUES_${workspaceSlug}_${projectId}` : null, if (!inboxAccessible || !workspaceSlug || !projectId) return;
async () => { if (navigationTab && navigationTab !== currentTab) {
inboxAccessible && handleCurrentTab(navigationTab);
workspaceSlug && } else {
projectId && fetchInboxIssues(workspaceSlug.toString(), projectId.toString());
(await fetchInboxIssues(workspaceSlug.toString(), projectId.toString())); }
}, // eslint-disable-next-line react-hooks/exhaustive-deps
{ revalidateOnFocus: false, revalidateIfStale: false } }, [inboxAccessible, workspaceSlug, projectId]);
);
// loader // loader
if (loader === "init-loading") 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 { observer } from "mobx-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { TInboxIssueCurrentTab } from "@plane/types"; import { TInboxIssueCurrentTab } from "@plane/types";
@ -37,7 +37,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
const { workspaceSlug, projectId, setIsMobileSidebar } = props; const { workspaceSlug, projectId, setIsMobileSidebar } = props;
// ref // ref
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const elementRef = useRef<HTMLDivElement>(null); const [elementRef, setElementRef] = useState<HTMLDivElement | null>(null);
// store // store
const { currentProjectDetails } = useProject(); const { currentProjectDetails } = useProject();
const { const {
@ -72,8 +72,10 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
currentTab === option?.key ? `text-custom-primary-100` : `hover:text-custom-text-200` currentTab === option?.key ? `text-custom-primary-100` : `hover:text-custom-text-200`
)} )}
onClick={() => { onClick={() => {
if (currentTab != option?.key) handleCurrentTab(option?.key); if (currentTab != option?.key) {
router.push(`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${option?.key}`); handleCurrentTab(option?.key);
router.push(`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${option?.key}`);
}
}} }}
> >
<div>{option?.label}</div> <div>{option?.label}</div>
@ -126,14 +128,14 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
/> />
</div> </div>
)} )}
{inboxIssuePaginationInfo?.next_page_results && ( <div ref={setElementRef}>
<div ref={elementRef}> {inboxIssuePaginationInfo?.next_page_results && (
<Loader className="mx-auto w-full space-y-4 py-4 px-2"> <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.Item height="64px" width="w-100" /> <Loader.Item height="64px" width="w-100" />
</Loader> </Loader>
)}
</div> </div>
)}
</div> </div>
)} )}
</div> </div>

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

@ -9,12 +9,12 @@ export type UseIntersectionObserverProps = {
export const useIntersectionObserver = ( export const useIntersectionObserver = (
containerRef: RefObject<HTMLDivElement>, containerRef: RefObject<HTMLDivElement>,
elementRef: RefObject<HTMLDivElement>, elementRef: HTMLDivElement | null,
callback: () => void, callback: () => void,
rootMargin?: string rootMargin?: string
) => { ) => {
useEffect(() => { useEffect(() => {
if (elementRef.current) { if (elementRef) {
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { (entries) => {
if (entries[entries.length - 1].isIntersecting) { if (entries[entries.length - 1].isIntersecting) {
@ -26,16 +26,16 @@ export const useIntersectionObserver = (
rootMargin, rootMargin,
} }
); );
observer.observe(elementRef.current); observer.observe(elementRef);
return () => { return () => {
if (elementRef.current) { if (elementRef) {
// eslint-disable-next-line react-hooks/exhaustive-deps // 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 // while removing the current from the refs, the observer is not not working as expected
// fix this eslint warning with caution // fix this eslint warning with caution
// eslint-disable-next-line react-hooks/exhaustive-deps // 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 { observer } from "mobx-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// components // components
@ -11,7 +11,7 @@ import { EmptyStateType } from "@/constants/empty-state";
// helpers // helpers
import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper"; import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
// hooks // hooks
import { useProject, useProjectInbox } from "@/hooks/store"; import { useProject } from "@/hooks/store";
// layouts // layouts
import { AppLayout } from "@/layouts/app-layout"; import { AppLayout } from "@/layouts/app-layout";
// types // types
@ -23,12 +23,6 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
const { workspaceSlug, projectId, currentTab: navigationTab, inboxIssueId } = router.query; const { workspaceSlug, projectId, currentTab: navigationTab, inboxIssueId } = router.query;
// hooks // hooks
const { currentProjectDetails } = useProject(); 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 // No access to inbox
if (currentProjectDetails?.inbox_view === false) if (currentProjectDetails?.inbox_view === false)
@ -44,6 +38,12 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
// derived values // derived values
const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : "Plane - Inbox"; const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Inbox` : "Plane - Inbox";
const currentNavigationTab = navigationTab
? navigationTab === "open"
? EInboxIssueCurrentTab.OPEN
: EInboxIssueCurrentTab.CLOSED
: undefined;
if (!workspaceSlug || !projectId) return <></>; if (!workspaceSlug || !projectId) return <></>;
return ( return (
@ -55,6 +55,7 @@ const ProjectInboxPage: NextPageWithLayout = observer(() => {
projectId={projectId.toString()} projectId={projectId.toString()}
inboxIssueId={inboxIssueId?.toString() || undefined} inboxIssueId={inboxIssueId?.toString() || undefined}
inboxAccessible={currentProjectDetails?.inbox_view || false} inboxAccessible={currentProjectDetails?.inbox_view || false}
navigationTab={currentNavigationTab}
/> />
</div> </div>
</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.inboxIssuePaginationInfo?.total_results &&
this.inboxIssueIds.length < this.inboxIssuePaginationInfo?.total_results)) this.inboxIssueIds.length < this.inboxIssuePaginationInfo?.total_results))
) { ) {
this.loader = "pagination-loading";
const queryParams = this.inboxIssueQueryParams( const queryParams = this.inboxIssueQueryParams(
this.inboxFilters, this.inboxFilters,
this.inboxSorting, this.inboxSorting,
@ -332,7 +330,6 @@ export class ProjectInboxStore implements IProjectInboxStore {
const { results, ...paginationInfo } = await this.inboxIssueService.list(workspaceSlug, projectId, queryParams); const { results, ...paginationInfo } = await this.inboxIssueService.list(workspaceSlug, projectId, queryParams);
runInAction(() => { runInAction(() => {
this.loader = undefined;
set(this, "inboxIssuePaginationInfo", paginationInfo); set(this, "inboxIssuePaginationInfo", paginationInfo);
if (results && results.length > 0) { if (results && results.length > 0) {
const issueIds = results.map((value) => value?.issue?.id); 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); } else set(this, ["inboxIssuePaginationInfo", "next_page_results"], false);
} catch (error) { } catch (error) {
console.error("Error fetching the inbox issues", error); console.error("Error fetching the inbox issues", error);
this.loader = undefined;
this.error = { this.error = {
message: "Error fetching the paginated inbox issues please try again later.", message: "Error fetching the paginated inbox issues please try again later.",
status: "pagination-error", status: "pagination-error",