fix performance, styling

src/hooks/use-reply-modal.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState } from 'react';
 import useIsMobile from './use-is-mobile';
 import useSelectedTextStore from '../stores/use-selected-text-store';
 
@@ -7,33 +7,35 @@ const useReplyModal = () => {
   const [activeCid, setActiveCid] = useState<string | null>(null);
   const { resetSelectedText, setSelectedText } = useSelectedTextStore();
 
-  // on mobile, the position is absolute instead of fixed, so we need to calculate the top position
+  // on mobile, the css position is absolute instead of fixed, so we need to calculate the top position
   const isMobile = useIsMobile();
   const [scrollY, setScrollY] = useState<number>(0);
 
-  const closeModal = useCallback(() => {
+  const closeModal = () => {
     resetSelectedText();
     setActiveCid(null);
     setShowReplyModal(false);
-  }, [resetSelectedText]);
+  };
 
-  const openReplyModal = useCallback(
-    (cid: string) => {
-      let text = document.getSelection()?.toString();
-      text && setSelectedText(`>${text}\n`);
-      if (isMobile) {
-        const currentScrollY = window.scrollY;
-        setScrollY(currentScrollY);
-      }
-      if (activeCid && activeCid !== cid) {
-        return;
-      } else if (!activeCid) {
-        setActiveCid(cid);
-        setShowReplyModal(true);
-      }
-    },
-    [activeCid, isMobile, setSelectedText],
-  );
+  const getSelectedText = () => {
+    let text = document.getSelection()?.toString();
+    text && setSelectedText(`>${text}\n`);
+  };
+
+  const openReplyModal = (cid: string) => {
+    getSelectedText();
+
+    if (isMobile) {
+      const currentScrollY = window.scrollY;
+      setScrollY(currentScrollY);
+    }
+
+    if (activeCid && activeCid !== cid) {
+      return;
+    }
+    setActiveCid(cid);
+    setShowReplyModal(true);
+  };
 
   return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal };
 };