diff --git a/package.json b/package.json index 1e8359c5..6fee9988 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "mock-require": "3.0.3", "postcss": "8.4.21", "react": "18.2.0", + "react-confirm-alert": "^3.0.6", "react-content-loader": "6.2.1", "react-dom": "18.2.0", "react-draggable": "4.4.5", diff --git a/src/components/EditModal.jsx b/src/components/EditModal.jsx new file mode 100644 index 00000000..e92220ba --- /dev/null +++ b/src/components/EditModal.jsx @@ -0,0 +1,67 @@ +import React, { useEffect, useRef, useState } from 'react'; +import { StyledModal } from './styled/ReplyModal.styled'; +import useGeneralStore from '../hooks/stores/useGeneralStore'; +import Modal from 'react-modal'; +import Draggable from 'react-draggable'; + + +const EditModal = ({ isOpen, closeModal, originalCommentContent }) => { + const { + selectedStyle, + } = useGeneralStore(state => state); + + const nodeRef = useRef(null); + const commentRef = useRef(); + + const [isMobile, setIsMobile] = useState(window.innerWidth <= 480); + + + useEffect(() => { + const handleResize = () => setIsMobile(window.innerWidth <= 480); + window.addEventListener('resize', handleResize); + + // Cleanup function + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [setIsMobile]); + + + + return ( + + +
+
+ Edit Comment +
+
+
+