diff --git a/src/App.js b/src/App.js index 09c92402..6314fb62 100644 --- a/src/App.js +++ b/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() { } /> @@ -178,5 +180,10 @@ export default function App() { } /> + setIsCaptchaOpen(false)} + /> )} \ No newline at end of file diff --git a/src/components/CaptchaModal.jsx b/src/components/CaptchaModal.jsx index 295705cc..2e23a18b 100644 --- a/src/components/CaptchaModal.jsx +++ b/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 ( 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"} - closeModal()} title="close" /> + setIsCaptchaOpen(false)} title="close" /> {pendingComment.displayName ? ( diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 3d632b1e..d907d2eb 100644 --- a/src/components/views/Board.jsx +++ b/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 ( - setIsCaptchaOpen(false)} /> { 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 ( - setIsCaptchaOpen(false)} - captchaImage={captchaImage} /> { 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 ( - setIsCaptchaOpen(false)} - captchaImage={captchaImage} /> ({ defaultSubplebbits: [], setDefaultSubplebbits: (subplebbits) => set({ defaultSubplebbits: subplebbits }), + isCaptchaOpen: false, + setIsCaptchaOpen: (isOpen) => set({ isCaptchaOpen: isOpen }), + isSettingsOpen: false, setIsSettingsOpen: (isOpen) => set({ isSettingsOpen: isOpen }),