fix performance, styling

This commit is contained in:
Tom (plebeius.eth)
2024-06-26 21:27:28 +02:00
parent 5835a087c9
commit dc6ea9e982
3 changed files with 27 additions and 25 deletions
+2 -2
View File
@@ -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'}
+2 -2
View File
@@ -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'}
+23 -21
View File
@@ -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 };
};