use-reply-modal.ts
1 import { useCallback, useState } from 'react'; 2 import useIsMobile from './use-is-mobile'; 3 import useSelectedTextStore from '../stores/use-selected-text-store'; 4 5 const useReplyModal = () => { 6 const [showReplyModal, setShowReplyModal] = useState(false); 7 const [activeCid, setActiveCid] = useState<string | null>(null); 8 const [threadCid, setThreadCid] = useState<string | null>(null); 9 const [subplebbitAddress, setSubplebbitAddress] = useState<string | null>(null); 10 const { resetSelectedText, setSelectedText } = useSelectedTextStore(); 11 12 // on mobile, the css position is absolute instead of fixed, so we need to calculate the top position 13 const isMobile = useIsMobile(); 14 const [scrollY, setScrollY] = useState<number>(0); 15 16 const closeModal = useCallback(() => { 17 resetSelectedText(); 18 setActiveCid(null); 19 setShowReplyModal(false); 20 }, [resetSelectedText, setActiveCid, setShowReplyModal]); 21 22 const getSelectedText = () => { 23 let text = document.getSelection()?.toString(); 24 text && setSelectedText(`>${text}\n`); 25 }; 26 27 const openReplyModal = (parentCid: string, postCid: string, subplebbitAddress: string) => { 28 getSelectedText(); 29 30 if (isMobile) { 31 const currentScrollY = window.scrollY; 32 setScrollY(currentScrollY); 33 } 34 35 if (activeCid && activeCid !== parentCid) { 36 return; 37 } 38 setActiveCid(parentCid); 39 setThreadCid(postCid); 40 setShowReplyModal(true); 41 setSubplebbitAddress(subplebbitAddress); 42 }; 43 44 return { activeCid, threadCid, closeModal, openReplyModal, scrollY, showReplyModal, subplebbitAddress }; 45 }; 46 47 export default useReplyModal;