From dc6ea9e9822a5cb42c3b4871df5baf7525974b98 Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Wed, 26 Jun 2024 21:27:28 +0200
Subject: [PATCH] fix performance, styling

---
 src/components/post-desktop/post-desktop.tsx |  4 +-
 src/components/post-mobile/post-mobile.tsx   |  4 +-
 src/hooks/use-reply-modal.ts                 | 44 ++++++++++----------
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 46e98413..43f14bc4 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/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 } })}
-              {reason && <> {t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })}</>}
+              {t('comment_edited_at_timestamp', { timestamp: getFormattedDate(edit?.timestamp), interpolation: { escapeValue: false } })}{' '}
+              {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} </>}
               {showOriginal ? (
                 <Trans
                   i18nKey={'click_here_to_hide_original'}
diff --git a/src/components/post-mobile/post-mobile.tsx b/src/components/post-mobile/post-mobile.tsx
index 7112493a..215b8929 100644
--- a/src/components/post-mobile/post-mobile.tsx
+++ b/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 } })}
-                {reason && <> {t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })}</>}
+                {t('comment_edited_at_timestamp', { timestamp: getFormattedDate(edit?.timestamp), interpolation: { escapeValue: false } })}{' '}
+                {reason && <>{t('reason_reason', { reason: reason, interpolation: { escapeValue: false } })} </>}
                 {showOriginal ? (
                   <Trans
                     i18nKey={'click_here_to_hide_original'}
diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts
index 3dc66472..81d3220b 100644
--- a/src/hooks/use-reply-modal.ts
+++ b/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 };
 };