fix performance, styling

src/components/post-desktop/post-desktop.tsx

@@ -197,8 +197,8 @@ const PostMessage = ({ post }: PostProps) => {
             <span className={styles.editedInfo}>
               {showOriginal && <Markdown content={original?.content} />}
               <br />
-              {t('comment_edited_at_timestamp', { timestamp: getFormattedDate(edit?.timestamp), interpolation: { escapeValue: false } })}
+              {t('comment_edited_at_timestamp', { timestamp: getFormattedDate(edit?.timestamp), interpolation: { escapeValue: false } })}{' '}
-              {reason && <> {t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })}</>}
+              {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} </>}
               {showOriginal ? (
                 <Trans
                   i18nKey={'click_here_to_hide_original'}

src/components/post-mobile/post-mobile.tsx

@@ -154,8 +154,8 @@ const PostMessageMobile = ({ post }: PostProps) => {
               <span className={styles.editedInfo}>
                 {showOriginal && <Markdown content={original?.content} />}
                 <br />
-                {t('comment_edited_at_timestamp', { timestamp: getFormattedDate(edit?.timestamp), interpolation: { escapeValue: false } })}
+                {t('comment_edited_at_timestamp', { timestamp: getFormattedDate(edit?.timestamp), interpolation: { escapeValue: false } })}{' '}
-                {reason && <> {t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })}</>}
+                {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} </>}
                 {showOriginal ? (
                   <Trans
                     i18nKey={'click_here_to_hide_original'}

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(
+  const getSelectedText = () => {
-    (cid: string) => {
+    let text = document.getSelection()?.toString();
-      let text = document.getSelection()?.toString();
+    text && setSelectedText(`>${text}\n`);
-      text && setSelectedText(`>${text}\n`);
+  };
-      if (isMobile) {
+
-        const currentScrollY = window.scrollY;
+  const openReplyModal = (cid: string) => {
-        setScrollY(currentScrollY);
+    getSelectedText();
-      }
+
-      if (activeCid && activeCid !== cid) {
+    if (isMobile) {
-        return;
+      const currentScrollY = window.scrollY;
-      } else if (!activeCid) {
+      setScrollY(currentScrollY);
-        setActiveCid(cid);
+    }
-        setShowReplyModal(true);
+
-      }
+    if (activeCid && activeCid !== cid) {
-    },
+      return;
-    [activeCid, isMobile, setSelectedText],
+    }
-  );
+    setActiveCid(cid);
+    setShowReplyModal(true);
+  };
 
   return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal };
 };