[WEB-4094]chore: workspace notifications refactor

packages/types/src/issues/issue.d.ts

@@ -1,4 +1,4 @@
-import { EIssueServiceType } from "@plane/constants";
+import { EIssueServiceType, EIssuesStoreType } from "@plane/constants";
 import { TIssuePriorities } from "../issues";
 import { TIssueAttachment } from "./issue_attachment";
 import { TIssueLink } from "./issue_link";
@@ -181,3 +181,10 @@ export type TPublicIssuesResponse = {
   extra_stats: null;
   results: TPublicIssueResponseResults;
 };
+
+export interface IWorkItemPeekOverview {
+  embedIssue?: boolean;
+  embedRemoveCurrentNotification?: () => void;
+  is_draft?: boolean;
+  storeType?: EIssuesStoreType;
+}

web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx

@@ -1,121 +1,30 @@
 "use client";
 
-import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import useSWR from "swr";
 // plane imports
-import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // components
-import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
-import { SimpleEmptyState } from "@/components/empty-state";
-import { InboxContentRoot } from "@/components/inbox";
-import { IssuePeekOverview } from "@/components/issues";
+import { NotificationsRoot } from "@/components/workspace-notifications";
 // hooks
-import { useIssueDetail, useUserPermissions, useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
-import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
-import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
+import { useWorkspace } from "@/hooks/store";
 
 const WorkspaceDashboardPage = observer(() => {
   const { workspaceSlug } = useParams();
   // plane hooks
   const { t } = useTranslation();
   // hooks
   const { currentWorkspace } = useWorkspace();
-  const {
-    currentSelectedNotificationId,
-    setCurrentSelectedNotificationId,
-    notificationLiteByNotificationId,
-    notificationIdsByWorkspaceId,
-    getNotifications,
-  } = useWorkspaceNotifications();
-  const { fetchUserProjectInfo } = useUserPermissions();
-  const { setPeekIssue } = useIssueDetail();
   // derived values
   const pageTitle = currentWorkspace?.name
     ? t("notification.page_label", { workspace: currentWorkspace?.name })
     : undefined;
-  const { workspace_slug, project_id, issue_id, is_inbox_issue } =
-    notificationLiteByNotificationId(currentSelectedNotificationId);
-  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/intake/issue-detail" });
-
-  // fetching workspace work item properties
-  useWorkspaceIssueProperties(workspaceSlug);
-
-  // fetch workspace notifications
-  const notificationMutation =
-    currentWorkspace && notificationIdsByWorkspaceId(currentWorkspace.id)
-      ? ENotificationLoader.MUTATION_LOADER
-      : ENotificationLoader.INIT_LOADER;
-  const notificationLoader =
-    currentWorkspace && notificationIdsByWorkspaceId(currentWorkspace.id)
-      ? ENotificationQueryParamType.CURRENT
-      : ENotificationQueryParamType.INIT;
-  useSWR(
-    currentWorkspace?.slug ? `WORKSPACE_NOTIFICATION` : null,
-    currentWorkspace?.slug
-      ? () => getNotifications(currentWorkspace?.slug, notificationMutation, notificationLoader)
-      : null
-  );
-
-  // fetching user project member info
-  const { isLoading: projectMemberInfoLoader } = useSWR(
-    workspace_slug && project_id && is_inbox_issue
-      ? `PROJECT_MEMBER_PERMISSION_INFO_${workspace_slug}_${project_id}`
-      : null,
-    workspace_slug && project_id && is_inbox_issue ? () => fetchUserProjectInfo(workspace_slug, project_id) : null
-  );
-
-  const embedRemoveCurrentNotification = useCallback(
-    () => setCurrentSelectedNotificationId(undefined),
-    [setCurrentSelectedNotificationId]
-  );
-
-  // clearing up the selected notifications when unmounting the page
-  useEffect(
-    () => () => {
-      setCurrentSelectedNotificationId(undefined);
-      setPeekIssue(undefined);
-    },
-    [setCurrentSelectedNotificationId, setPeekIssue]
-  );
 
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="w-full h-full overflow-hidden overflow-y-auto">
-        {!currentSelectedNotificationId ? (
-          <div className="w-full h-screen flex justify-center items-center">
-            <SimpleEmptyState title={t("notification.empty_state.detail.title")} assetPath={resolvedPath} />
-          </div>
-        ) : (
-          <>
-            {is_inbox_issue === true && workspace_slug && project_id && issue_id ? (
-              <>
-                {projectMemberInfoLoader ? (
-                  <div className="w-full h-full flex justify-center items-center">
-                    <LogoSpinner />
-                  </div>
-                ) : (
-                  <InboxContentRoot
-                    setIsMobileSidebar={() => {}}
-                    isMobileSidebar={false}
-                    workspaceSlug={workspace_slug}
-                    projectId={project_id}
-                    inboxIssueId={issue_id}
-                    isNotificationEmbed
-                    embedRemoveCurrentNotification={embedRemoveCurrentNotification}
-                  />
-                )}
-              </>
-            ) : (
-              <IssuePeekOverview embedIssue embedRemoveCurrentNotification={embedRemoveCurrentNotification} />
-            )}
-          </>
-        )}
-      </div>
+      <NotificationsRoot workspaceSlug={workspaceSlug?.toString()} />
     </>
   );
 });

web/ce/components/workspace-notifications/index.ts

@@ -1 +1,2 @@
 export * from "./notification-card/root";
+export * from "./list-root";

web/ce/components/workspace-notifications/list-root.tsx

@@ -0,0 +1,8 @@
+import { NotificationCardListRoot } from "./notification-card/root";
+
+export type TNotificationListRoot = {
+  workspaceSlug: string;
+  workspaceId: string;
+};
+
+export const NotificationListRoot = (props: TNotificationListRoot) => <NotificationCardListRoot {...props} />;

web/ce/hooks/use-notification-preview.tsx

@@ -0,0 +1,25 @@
+import { EIssueServiceType } from "@plane/constants";
+import { IWorkItemPeekOverview } from "@plane/types";
+import { IssuePeekOverview } from "@/components/issues";
+import { useIssueDetail } from "@/hooks/store";
+import { TPeekIssue } from "@/store/issue/issue-details/root.store";
+
+export type TNotificationPreview = {
+  isWorkItem: boolean;
+  PeekOverviewComponent: React.ComponentType<IWorkItemPeekOverview>;
+  setPeekWorkItem: (peekIssue: TPeekIssue | undefined) => void;
+};
+
+/**
+ * This function returns if the current active notification is related to work item or an epic.
+ * @returns isWorkItem: boolean, peekOverviewComponent: IWorkItemPeekOverview, setPeekWorkItem
+ */
+export const useNotificationPreview = (): TNotificationPreview => {
+  const { peekIssue, setPeekIssue } = useIssueDetail(EIssueServiceType.ISSUES);
+
+  return {
+    isWorkItem: Boolean(peekIssue),
+    PeekOverviewComponent: IssuePeekOverview,
+    setPeekWorkItem: setPeekIssue,
+  };
+};

web/core/components/issues/issue-detail/subscription.tsx

@@ -5,7 +5,7 @@ import isNil from "lodash/isNil";
 import { observer } from "mobx-react";
 import { Bell, BellOff } from "lucide-react";
 // plane-i18n
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, EIssueServiceType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // UI
 import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
@@ -16,17 +16,18 @@ export type TIssueSubscription = {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
+  serviceType?: EIssueServiceType;
 };
 
 export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
-  const { workspaceSlug, projectId, issueId } = props;
+  const { workspaceSlug, projectId, issueId, serviceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // hooks
   const {
     subscription: { getSubscriptionByIssueId },
     createSubscription,
     removeSubscription,
-  } = useIssueDetail();
+  } = useIssueDetail(serviceType);
   // state
   const [loading, setLoading] = useState(false);
   // hooks
@@ -53,12 +54,12 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
           : t("issue.subscription.actions.subscribed"),
       });
       setLoading(false);
-    } catch (error) {
+    } catch {
       setLoading(false);
       setToast({
         type: TOAST_TYPE.ERROR,
         title: t("toast.error"),
-        message: t("commons.error.message"),
+        message: t("common.error.message"),
       });
     }
   };
@@ -78,7 +79,7 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
         variant="outline-primary"
         className="hover:!bg-custom-primary-100/20"
         onClick={handleSubscription}
-        disabled={!isEditable}
+        disabled={!isEditable || loading}
       >
         {loading ? (
           <span>

web/core/components/issues/peek-overview/root.tsx

@@ -14,7 +14,7 @@ import {
   EUserPermissionsLevel,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { TIssue } from "@plane/types";
+import { TIssue, IWorkItemPeekOverview } from "@plane/types";
 // plane ui
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // components
@@ -24,14 +24,8 @@ import { IssueView, TIssueOperations } from "@/components/issues";
 import { useEventTracker, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 
-interface IIssuePeekOverview {
-  embedIssue?: boolean;
-  embedRemoveCurrentNotification?: () => void;
-  is_draft?: boolean;
-  storeType?: EIssuesStoreType;
-}
 
-export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
+export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) => {
   const {
     embedIssue = false,
     embedRemoveCurrentNotification,