From 6201f0091f9329865c2ef2888ea86d029f30b5cb Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 21 Nov 2024 18:01:44 -0800
Subject: [PATCH] Stop propagation on alt tag dialog

---
 src/components/feedback/altTag/AltTag.tsx  | 29 +++++++++-------------
 src/lib/hooks/bsky/feed/usePublishPost.tsx | 13 +++++-----
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/feedback/altTag/AltTag.tsx b/src/components/feedback/altTag/AltTag.tsx
index 9b630225..a7ba67b4 100644
--- a/src/components/feedback/altTag/AltTag.tsx
+++ b/src/components/feedback/altTag/AltTag.tsx
@@ -14,40 +14,35 @@ export default function AltTag(props: Props) {
   const [showAlt, setShowAlt] = useState(false);
   const { copy, copied } = useClipboard({ copiedTimeout: 3500 });
 
-  const handleShowAlt = () => {
-    setShowAlt(!showAlt);
-  };
-
-  const handleCloseAlt = () => {
-    setShowAlt(false);
-  };
-
   return (
     <>
       <Button
         onClick={(e) => {
           e.stopPropagation();
           e.preventDefault();
-          handleShowAlt();
+          setShowAlt((prev) => !prev);
         }}
         className="text-skin-secondary bg-skin-secondary hover:bg-skin-muted hover:text-skin-base absolute bottom-1.5 left-1.5 rounded-md px-2 py-0.5 text-xs font-semibold border border-skin-base"
       >
         ALT
       </Button>
 
-      <Dialog.Root open={showAlt} onOpenChange={handleCloseAlt}>
+      <Dialog.Root
+        open={showAlt}
+        onOpenChange={() => setShowAlt((prev) => !prev)}
+      >
         <Dialog.Portal>
-          <Dialog.Overlay className="animate-fade animate-duration-200 bg-skin-overlay-muted fixed inset-0 z-50" />
+          <Dialog.Overlay
+            className="animate-fade animate-duration-200 bg-skin-overlay-muted fixed inset-0 z-50"
+            onClick={(e) => {
+              e.stopPropagation();
+              setShowAlt(false);
+            }}
+          />
           <div className="fixed inset-0 z-50 flex items-center justify-center">
             <Dialog.Content
               onClick={(e) => {
                 e.stopPropagation();
-                e.preventDefault();
-              }}
-              onPointerDownOutside={(e) => {
-                e.stopPropagation();
-                e.preventDefault();
-                handleCloseAlt();
               }}
               className="m-3.5"
             >
diff --git a/src/lib/hooks/bsky/feed/usePublishPost.tsx b/src/lib/hooks/bsky/feed/usePublishPost.tsx
index 43bf29e0..5ab4cd87 100644
--- a/src/lib/hooks/bsky/feed/usePublishPost.tsx
+++ b/src/lib/hooks/bsky/feed/usePublishPost.tsx
@@ -12,7 +12,7 @@ import {
   ComAtprotoLabelDefs,
   RichText,
 } from "@atproto/api";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { detectLanguage, jsonToText } from "@/lib/utils/text";
 import { compressImage } from "@/lib/utils/image";
 import { JSONContent } from "@tiptap/react";
@@ -45,7 +45,6 @@ export default function usePublishPost(props: Props) {
     label,
     threadGate,
   } = props;
-  const queryClient = useQueryClient();
   const MAX_POST_LENGTH = 300;
 
   return useMutation({
@@ -65,7 +64,7 @@ export default function usePublishPost(props: Props) {
 
       if (richText.graphemeLength > MAX_POST_LENGTH) {
         throw new Error(
-          "Post length exceeds the maximum length of 300 characters",
+          "Post length exceeds the maximum length of 300 characters"
         );
       }
 
@@ -140,7 +139,7 @@ export default function usePublishPost(props: Props) {
               new Uint8Array(await blob.arrayBuffer()),
               {
                 encoding: blob.type,
-              },
+              }
             );
 
             embedImages.images.push({
@@ -202,13 +201,13 @@ export default function usePublishPost(props: Props) {
               try {
                 const image = await fetch(linkCard.image);
                 const blob = await compressImage(
-                  (await image.blob()) as UploadImage,
+                  (await image.blob()) as UploadImage
                 );
                 const uploaded = await agent.uploadBlob(
                   new Uint8Array(await blob.arrayBuffer()),
                   {
                     encoding: blob.type,
-                  },
+                  }
                 );
                 embedExternal.external.thumb = uploaded.data.blob;
               } catch (e) {
@@ -258,7 +257,7 @@ export default function usePublishPost(props: Props) {
 
         await agent.api.app.bsky.feed.threadgate.create(
           { repo: agent.session!.did, rkey: submittedPost.rkey },
-          { post: result.uri, createdAt: new Date().toISOString(), allow },
+          { post: result.uri, createdAt: new Date().toISOString(), allow }
         );
       }
     },