centralized captcha modal

src/App.js

@@ -1,18 +1,19 @@
 import React, { useEffect } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
+import styled, { createGlobalStyle } from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+import 'react-tooltip/dist/react-tooltip.css';
+import 'react-toastify/dist/ReactToastify.css';
 import useGeneralStore from './hooks/stores/useGeneralStore';
 import Home from './components/views/Home';
 import Board from './components/views/Board';
 import Thread from './components/views/Thread';
 import Catalog from './components/views/Catalog';
 import NotFound from './components/views/NotFound';
-import styled, { createGlobalStyle } from 'styled-components';
-import 'react-tooltip/dist/react-tooltip.css';
-import 'react-toastify/dist/ReactToastify.css';
-import preloadImages from './utils/preloadImages';
-import { ToastContainer } from 'react-toastify';
+import CaptchaModal from './components/CaptchaModal';
 import { importAll } from './components/ImageBanner';
+import preloadImages from './utils/preloadImages';
 
 
 const GlobalStyle = createGlobalStyle`
@@ -52,8 +53,9 @@ export default function App() {
   const { 
     bodyStyle, setBodyStyle,
     setDefaultSubplebbits,
+    isCaptchaOpen, setIsCaptchaOpen,
     setIsSettingsOpen,
-    setSelectedStyle,
+    selectedStyle, setSelectedStyle,
     setShowPostForm,
     setShowPostFormLink,
   } = useGeneralStore(state => state);
@@ -157,9 +159,9 @@ export default function App() {
       <meta name="theme-color" content="#ffffff" />
     </Helmet>
     <GlobalStyle 
-    background={bodyStyle.background} 
-    color={bodyStyle.color} 
-    fontFamily={bodyStyle.fontFamily}
+      background={bodyStyle.background} 
+      color={bodyStyle.color} 
+      fontFamily={bodyStyle.fontFamily}
     />
       <Routes>
         <Route exact path='/' element={<Home setBodyStyle={setBodyStyle} />} />
@@ -178,5 +180,10 @@ export default function App() {
         <Route path='*' element={<NotFound setBodyStyle={setBodyStyle} />} />
       </Routes>
       <StyledContainer />
+      <CaptchaModal 
+        selectedStyle={selectedStyle}
+        isOpen={isCaptchaOpen} 
+        closeModal={() => setIsCaptchaOpen(false)} 
+      />
   </div>
 )}

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}

src/hooks/stores/useGeneralStore.js

@@ -20,6 +20,9 @@ const useGeneralStore = create((set) => ({
   defaultSubplebbits: [],
   setDefaultSubplebbits: (subplebbits) => set({ defaultSubplebbits: subplebbits }),
 
+  isCaptchaOpen: false,
+  setIsCaptchaOpen: (isOpen) => set({ isCaptchaOpen: isOpen }),
+
   isSettingsOpen: false,
   setIsSettingsOpen: (isOpen) => set({ isSettingsOpen: isOpen }),