[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.
2024-06-14 14:31:34 +00:00 · 2024-06-04 13:18:25 +05:30 · 2024-06-04 13:18:25 +05:30 · 77b73dc032
commit 77b73dc032
parent 20acb0dd17
5 changed files with 38 additions and 39 deletions
--- a/web/components/inbox/root.tsx
+++ b/web/components/inbox/root.tsx
@ -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")
--- a/web/components/inbox/sidebar/root.tsx
+++ b/web/components/inbox/sidebar/root.tsx
@ -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>
--- a/web/hooks/use-intersection-observer.tsx
+++ b/web/hooks/use-intersection-observer.tsx
@ -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]);
 };
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx
@ -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>
--- a/web/store/inbox/project-inbox.store.ts
+++ b/web/store/inbox/project-inbox.store.ts
@ -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",