centralized captcha modal

src/components/CaptchaModal.jsx

@@ -5,12 +5,13 @@ import Modal from 'react-modal';
 import Draggable from 'react-draggable';
 
 
-const CaptchaModal = ({ isOpen, closeModal }) => {
+const CaptchaModal = () => {
   const { 
     challengesArray,
     pendingComment,
     selectedStyle,
     setCaptchaResponse,
+    isCaptchaOpen, setIsCaptchaOpen
    } = useGeneralStore(state => state);
 
   const [imageSources, setImageSources] = useState([]);
@@ -39,14 +40,14 @@ const CaptchaModal = ({ isOpen, closeModal }) => {
     if (event.key === "Enter") {
       event.preventDefault();
       setCaptchaResponse(responseRef.current.value);
-      closeModal();
+      setIsCaptchaOpen(false);
     }
   };
 
   return (
     <StyledModal
-    isOpen={isOpen}
-    onRequestClose={closeModal}
+    isOpen={isCaptchaOpen}
+    onRequestClose={() => setIsCaptchaOpen(false)}
     contentLabel="Captcha Modal"
     shouldCloseOnEsc={false}
     shouldCloseOnOverlayClick={false}
@@ -58,7 +59,7 @@ const CaptchaModal = ({ isOpen, closeModal }) => {
             {pendingComment.parentCid ? 
             ("Challenges for Reply c/" + pendingComment.cid) : 
             "Challenges for New Thread"}
-            <button className="icon" onClick={() => closeModal()} title="close" />
+            <button className="icon" onClick={() => setIsCaptchaOpen(false)} title="close" />
           </div>
           <div id="form">
             {pendingComment.displayName ? (

src/components/views/Board.jsx

@@ -6,7 +6,6 @@ import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from '../styled/Board.styled';
-import CaptchaModal from '../CaptchaModal';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
@@ -26,6 +25,7 @@ const Board = () => {
     captchaResponse, setCaptchaResponse,
     setChallengesArray,
     defaultSubplebbits,
+    setIsCaptchaOpen,
     isSettingsOpen, setIsSettingsOpen,
     setPendingComment,
     selectedAddress, setSelectedAddress,
@@ -33,7 +33,7 @@ const Board = () => {
     setSelectedThread,
     selectedTitle, setSelectedTitle,
     showPostForm,
-    showPostFormLink
+    showPostFormLink,
   } = useGeneralStore(state => state);
 
   const nameRef = useRef();
@@ -41,7 +41,6 @@ const Board = () => {
   const commentRef = useRef();
   const linkRef = useRef();
 
-  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -107,9 +106,9 @@ const Board = () => {
 
 
   const onChallenge = async (challenges, comment) => {
-    
     setPendingComment(comment);
     let challengeAnswers = [];
+    
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
@@ -208,10 +207,6 @@ const Board = () => {
 
   return (
     <Container>
-      <CaptchaModal 
-      selectedStyle={selectedStyle}
-      isOpen={isCaptchaOpen} 
-      closeModal={() => setIsCaptchaOpen(false)} />
       <ReplyModal 
       selectedStyle={selectedStyle}
       isOpen={isReplyOpen}

src/components/views/Catalog.jsx

@@ -7,7 +7,6 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from '../styled/Board.styled';
 import { Threads } from '../styled/Catalog.styled';
 import { TopBar } from '../styled/Thread.styled';
-import CaptchaModal from '../CaptchaModal';
 import CatalogLoader from '../CatalogLoader';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
@@ -23,13 +22,14 @@ const Catalog = () => {
   const {
     captchaResponse, setCaptchaResponse,
     defaultSubplebbits,
+    setIsCaptchaOpen,
     isSettingsOpen, setIsSettingsOpen,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     setSelectedThread,
     selectedTitle, setSelectedTitle,
     showPostForm,
-    showPostFormLink
+    showPostFormLink,
   } = useGeneralStore(state => state);
 
   const nameRef = useRef();
@@ -37,7 +37,6 @@ const Catalog = () => {
   const commentRef = useRef();
   const linkRef = useRef();
 
-  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -92,8 +91,8 @@ const Catalog = () => {
 
 
   const onChallenge = async (challenges, comment) => {
-    // console.log("onChallenge:", challenges, comment);
     let challengeAnswers = [];
+
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
@@ -171,10 +170,6 @@ const Catalog = () => {
 
   return (
     <Container>
-      <CaptchaModal 
-      isOpen={isCaptchaOpen} 
-      closeModal={() => setIsCaptchaOpen(false)} 
-      captchaImage={captchaImage} />
       <SettingsModal
       selectedStyle={selectedStyle}
       isOpen={isSettingsOpen}

src/components/views/Thread.jsx

@@ -6,7 +6,6 @@ import { debounce } from 'lodash';
 import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from '../styled/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from '../styled/Thread.styled';
-import CaptchaModal from '../CaptchaModal';
 import ImageBanner from '../ImageBanner';
 import Post from '../Post';
 import PostLoader from '../PostLoader';
@@ -25,20 +24,20 @@ const Thread = () => {
   const {
     captchaResponse, setCaptchaResponse,
     defaultSubplebbits,
+    setIsCaptchaOpen,
     isSettingsOpen, setIsSettingsOpen,
     selectedAddress, setSelectedAddress,
     selectedStyle,
     selectedThread, setSelectedThread,
     selectedTitle, setSelectedTitle,
     showPostForm,
-    showPostFormLink
+    showPostFormLink,
   } = useGeneralStore(state => state);
 
   const nameRef = useRef();
   const commentRef = useRef();
   const linkRef = useRef();
 
-  const [isCaptchaOpen, setIsCaptchaOpen] = useState(false);
   const [isReplyOpen, setIsReplyOpen] = useState(false);
   const [captchaImage, setCaptchaImage] = useState('');
   const navigate = useNavigate();
@@ -57,10 +56,6 @@ const Thread = () => {
   useSuccess(successMessage, [successMessage]);
 
 
-  // useEffect(() => {
-  //   console.log(comment);
-  // }, [comment]);
-
   // temporary title from JSON, gets subplebbitAddress and threadCid from URL
   useEffect(() => {
     setSelectedAddress(subplebbitAddress);
@@ -97,8 +92,8 @@ const Thread = () => {
 
 
   const onChallenge = async (challenges, comment) => {
-    // console.log("onChallenge:", challenges, comment);
     let challengeAnswers = [];
+
     try {
       challengeAnswers = await getChallengeAnswersFromUser(challenges)
     }
@@ -187,10 +182,6 @@ const Thread = () => {
 
   return (
     <Container>
-      <CaptchaModal 
-      isOpen={isCaptchaOpen} 
-      closeModal={() => setIsCaptchaOpen(false)} 
-      captchaImage={captchaImage} />
       <ReplyModal 
       selectedStyle={selectedStyle}
       isOpen={isReplyOpen}