[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.

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(
+  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
   if (loader === "init-loading")

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);
+                if (currentTab != option?.key) {
+                  handleCurrentTab(option?.key);
                   router.push(`/${workspaceSlug}/projects/${projectId}/inbox?currentTab=${option?.key}`);
+                }
               }}
             >
               <div>{option?.label}</div>
@@ -126,15 +128,15 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                 />
               </div>
             )}
+              <div ref={setElementRef}>
                 {inboxIssuePaginationInfo?.next_page_results && (
-              <div ref={elementRef}>
                 <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>
         )}
       </div>
     </div>

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]);
 };

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>

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",