UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: выделение action-set и упрощение mobile header внешнего контура

plane-src/apps/web/ce/components/projects/external-contours/subscription.tsx

@@ -16,16 +16,17 @@ import { IssueService } from "@/services/issue/issue.service";
 
 const issueService = new IssueService();
 
-type Props = {
+type TSubscriptionIdentity = {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
+};
+
+type Props = TSubscriptionIdentity & {
   buttonClassName?: string;
 };
 
-export const ExternalContourSubscription = observer(function ExternalContourSubscription(props: Props) {
-  const { workspaceSlug, projectId, issueId, buttonClassName } = props;
-  const { t } = useTranslation();
+export const useExternalContourSubscription = ({ workspaceSlug, projectId, issueId }: TSubscriptionIdentity) => {
   const [isSubscribed, setIsSubscribed] = useState<boolean | undefined>(undefined);
   const [loading, setLoading] = useState(false);
 
@@ -50,7 +51,7 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
     };
   }, [workspaceSlug, projectId, issueId]);
 
-  const handleSubscription = async () => {
+  const toggleSubscription = async () => {
     if (!workspaceSlug || !projectId || !issueId) return;
 
     const nextValue = !isSubscribed;
@@ -63,24 +64,34 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
       } else {
         await issueService.unsubscribeFromIssueNotifications(workspaceSlug, projectId, issueId);
       }
-
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: t("toast.success"),
-        message: nextValue ? t("issue.subscription.actions.subscribed") : t("issue.subscription.actions.unsubscribed"),
-      });
     } catch {
       setIsSubscribed(!nextValue);
-      setToast({
-        type: TOAST_TYPE.ERROR,
-        title: t("toast.error"),
-        message: t("common.error.message"),
-      });
+      throw new Error("subscription-toggle-failed");
     } finally {
       setLoading(false);
     }
   };
 
+  return {
+    isSubscribed,
+    loading,
+    toggleSubscription,
+  };
+};
+
+type TExternalContourSubscriptionButtonProps = {
+  isSubscribed: boolean | undefined;
+  loading: boolean;
+  onToggle: () => Promise<void>;
+  buttonClassName?: string;
+};
+
+export const ExternalContourSubscriptionButton = observer(function ExternalContourSubscriptionButton(
+  props: TExternalContourSubscriptionButtonProps
+) {
+  const { isSubscribed, loading, onToggle, buttonClassName } = props;
+  const { t } = useTranslation();
+
   if (isSubscribed === undefined) {
     return (
       <Loader>
@@ -94,7 +105,7 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
       prependIcon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
       variant="secondary"
       className={cn("hover:!bg-accent-primary/20", buttonClassName)}
-      onClick={handleSubscription}
+      onClick={() => void onToggle()}
       disabled={loading}
       size="lg"
     >
@@ -108,3 +119,40 @@ export const ExternalContourSubscription = observer(function ExternalContourSubs
     </Button>
   );
 });
+
+export const ExternalContourSubscription = observer(function ExternalContourSubscription(props: Props) {
+  const { workspaceSlug, projectId, issueId, buttonClassName } = props;
+  const { t } = useTranslation();
+  const { isSubscribed, loading, toggleSubscription } = useExternalContourSubscription({
+    workspaceSlug,
+    projectId,
+    issueId,
+  });
+
+  const handleToggle = async () => {
+    try {
+      const nextValue = !isSubscribed;
+      await toggleSubscription();
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("toast.success"),
+        message: nextValue ? t("issue.subscription.actions.subscribed") : t("issue.subscription.actions.unsubscribed"),
+      });
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: t("common.error.message"),
+      });
+    }
+  };
+
+  return (
+    <ExternalContourSubscriptionButton
+      isSubscribed={isSubscribed}
+      loading={loading}
+      onToggle={handleToggle}
+      buttonClassName={buttonClassName}
+    />
+  );
+});