[WEB-1481] fix: multiple API calls in inbox issues on closed issues t…

…ab. (#4691) * fix: multiple API calls on scroll and closed issues tab. * fix: pagination loader on initial load.
makeplane · Jun 10, 2024 · 42b1a1a · 42b1a1a
1 parent c9fdf45
commit 42b1a1a
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 31 deletions.
diff --git 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")

diff --git 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>

diff --git 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]);
 };
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/index.tsx
@@ -0,0 +1,73 @@
+import { ReactElement } from "react";
+import { observer } from "mobx-react";
+import { useRouter } from "next/router";
+// components
+import { PageHead } from "@/components/core";
+import { EmptyState } from "@/components/empty-state";
+import { ProjectInboxHeader } from "@/components/headers";
+import { InboxIssueRoot } from "@/components/inbox";
+// constants
+import { EmptyStateType } from "@/constants/empty-state";
+// helpers
+import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
+// hooks
+import { useProject } from "@/hooks/store";
+// layouts
+import { AppLayout } from "@/layouts/app-layout";
+// types
+import { NextPageWithLayout } from "@/lib/types";
+
+const ProjectInboxPage: NextPageWithLayout = observer(() => {
+  /// router
+  const router = useRouter();
+  const { workspaceSlug, projectId, currentTab: navigationTab, inboxIssueId } = router.query;
+  // hooks
+  const { currentProjectDetails } = useProject();
+
+  // No access to inbox
+  if (currentProjectDetails?.inbox_view === false)
+    return (
+      <div className="flex items-center justify-center h-full w-full">
+        <EmptyState
+          type={EmptyStateType.DISABLED_PROJECT_INBOX}
+          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        />
+      </div>
+    );
+
+  // 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 (
+    <div className="flex h-full flex-col">
+      <PageHead title={pageTitle} />
+      <div className="w-full h-full overflow-hidden">
+        <InboxIssueRoot
+          workspaceSlug={workspaceSlug.toString()}
+          projectId={projectId.toString()}
+          inboxIssueId={inboxIssueId?.toString() || undefined}
+          inboxAccessible={currentProjectDetails?.inbox_view || false}
+          navigationTab={currentNavigationTab}
+        />
+      </div>
+    </div>
+  );
+});
+
+ProjectInboxPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AppLayout header={<ProjectInboxHeader />} withProjectWrapper>
+      {page}
+    </AppLayout>
+  );
+};
+
+export default ProjectInboxPage;
diff --git 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",