Function ImageModal

client/src/components/ImageModal.tsx:14–210

({
    dialogState,
    setDialogState,
})

}

const ImageModal: React.FC<ImageModalProps> = ({
    dialogState,
    setDialogState,
}) => {
    const [isCopied, setIsCopied] = useState(false)

    const [isDownloaded, setIsDownloaded] = useState(false)

    const { imgSrc, open, prompt } = dialogState

    const modalRef = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (open) {
            document.body.style.overflow = 'hidden'
            document.addEventListener('click', handleClickOutside)
        } else {
            document.body.style.overflow = 'unset'
            document.removeEventListener('click', handleClickOutside)
        }

        return () => {
            document.body.style.overflow = 'unset'
            document.removeEventListener('click', handleClickOutside)
            setIsCopied(false)
            setIsDownloaded(false)
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [open])

    const clearModalContent = () => {
        setTimeout(() => {
            setDialogState({
                ...dialogState,
                open: false,
                imgSrc: '',
                prompt: '',
            })
        }, 500)
    }

    const handleClickOutside = (event: MouseEvent) => {
        if (
            modalRef.current &&
            !modalRef.current.contains(event.target as Node)
        ) {
            setDialogState({
                ...dialogState,
                open: false,
            })
            clearModalContent()
        }
    }

    const handleClose = () => {
        setDialogState({ ...dialogState, open: false })
        clearModalContent()
    }