/ src / hooks / use-reply-modal.ts
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;