diff --git a/src/App.js b/src/App.js index fa6ff6f1..89adb640 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,6 @@ import Board from './components/Board'; import Thread from './components/Thread'; import Catalog from './components/Catalog'; import NotFound from './components/NotFound'; -import CaptchaModal from './components/CaptchaModal'; import { createGlobalStyle } from 'styled-components'; import 'react-tooltip/dist/react-tooltip.css'; import preloadImages from './utils/preloadImages'; @@ -41,8 +40,7 @@ export default function App() { color: "maroon", fontFamily: "Helvetica, Arial, sans-serif" }); - const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); - + const [captchaResponse, setCaptchaResponse] = useState(''); const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`); @@ -51,12 +49,6 @@ export default function App() { }, []); - const handleCaptchaClose = () => { - setIsCaptchaOpen(false); - }; - - - return (
@@ -72,7 +64,7 @@ export default function App() { color={bodyStyle.color} fontFamily={bodyStyle.fontFamily} /> - + } /> }> @@ -87,6 +79,5 @@ export default function App() { } /> -
)} \ No newline at end of file diff --git a/src/components/Board.jsx b/src/components/Board.jsx index cbdfa0cd..a2f82657 100644 --- a/src/components/Board.jsx +++ b/src/components/Board.jsx @@ -3,6 +3,7 @@ import { Link, useNavigate, useParams, useLocation } from 'react-router-dom'; import { BoardContext } from '../App'; import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled'; import ImageBanner from './ImageBanner'; +import CaptchaModal from './CaptchaModal'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; @@ -12,13 +13,15 @@ import renderComments from '../utils/renderComments'; const Board = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, setIsCaptchaOpen } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext); const [showPostFormLink, setShowPostFormLink] = useState(true); const [showPostForm, setShowPostForm] = useState(false); const [name, setName] = useState(''); const [subject, setSubject] = useState(''); const [comment, setComment] = useState(''); const { publishComment } = useAccountsActions(); + const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); + const [captchaImage, setCaptchaImage] = useState(''); const navigate = useNavigate(); const location = useLocation(); const [prevScrollPos, setPrevScrollPos] = useState(0); @@ -28,7 +31,6 @@ const Board = ({ setBodyStyle }) => { const [selectedFeed, setSelectedFeed] = useState(feed); const renderedFeed = selectedFeed.slice(0, endIndex); const { subplebbitAddress } = useParams(); - // const [cookies, setCookie] = useCookies(['selectedStyle']); // temporary title from JSON, gets subplebbitAddress from URL @@ -178,26 +180,19 @@ const Board = ({ setBodyStyle }) => { challengeImg.src = imageSource; challengeImg.onload = () => { - const inputEl = document.getElementById('t-resp'); - const cntEl = document.getElementById('t-cnt'); - cntEl.appendChild(challengeImg); - inputEl.focus(); + setIsCaptchaOpen(true); + setCaptchaImage(imageSource); const handleKeyDown = (event) => { if (event.key === 'Enter') { - const challengeResponse = inputEl.value; - inputEl.value = ''; - - if (cntEl.contains(challengeImg)) { - cntEl.removeChild(challengeImg); - } - + setCaptchaImage(''); + resolve(captchaResponse); + setIsCaptchaOpen(false); document.removeEventListener('keydown', handleKeyDown); - - resolve(challengeResponse); } }; - + + setCaptchaResponse(''); document.addEventListener('keydown', handleKeyDown); }; @@ -250,7 +245,7 @@ const Board = ({ setBodyStyle }) => { const handleClickThread = (thread) => { setSelectedThread(thread); - } + }; const handlePublishComment = async () => { @@ -283,6 +278,10 @@ const Board = ({ setBodyStyle }) => { } } + const handleCaptchaClose = () => { + setIsCaptchaOpen(false); + }; + const handleStyleChange = (event) => { switch (event.target.value) { @@ -375,6 +374,10 @@ const Board = ({ setBodyStyle }) => { return ( + <> {defaultSubplebbits.map(subplebbit => ( @@ -469,11 +472,6 @@ const Board = ({ setBodyStyle }) => { - - - - - diff --git a/src/components/CaptchaModal.jsx b/src/components/CaptchaModal.jsx index c5ce8017..e3052c87 100644 --- a/src/components/CaptchaModal.jsx +++ b/src/components/CaptchaModal.jsx @@ -1,12 +1,13 @@ -import React from 'react'; +import React, { useState, useContext } from 'react'; import Modal from 'react-modal'; import styled from 'styled-components'; +import { BoardContext } from '../App'; const StyledModal = styled(Modal)` @media (min-width: 480px) { .modal-content { width: 450px; - height: 350px; + height: 300px; } } @@ -52,7 +53,7 @@ const StyledModal = styled(Modal)` } input { - margin-top: 20px; + margin-top: 30px; width: 70%; padding: 2px; border: 1px solid #ccc; @@ -60,12 +61,6 @@ const StyledModal = styled(Modal)` border: 1px solid #777; outline: none; } - - button.submit { - margin-top: 20px; - padding: 3px 15px; - border-radius: 3px; - } `; const customOverlayStyles = { @@ -74,11 +69,17 @@ const customOverlayStyles = { } }; -const CaptchaModal = ({ isOpen, closeModal }) => { +const CaptchaModal = ({ isOpen, closeModal, captchaImage }) => { + const { captchaResponse, setCaptchaResponse } = useContext(BoardContext); + const handleCloseModal = () => { closeModal(); }; + const handleChallengeResponse = (event) => { + setCaptchaResponse(event.target.value); + }; + return ( {
Verification
- captcha - - + captcha +
); diff --git a/src/components/Catalog.jsx b/src/components/Catalog.jsx index 5dfb0db0..3142a7d9 100644 --- a/src/components/Catalog.jsx +++ b/src/components/Catalog.jsx @@ -6,22 +6,25 @@ import { Threads } from './styles/Catalog.styled'; import { BoardContext } from '../App'; import { useFeed, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; +import CaptchaModal from './CaptchaModal'; import InfiniteScroll from 'react-infinite-scroller'; const Catalog = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, setIsCaptchaOpen } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext); const [showPostFormLink, setShowPostFormLink] = useState(true); const [showPostForm, setShowPostForm] = useState(false); const [name, setName] = useState(''); const [subject, setSubject] = useState(''); const [comment, setComment] = useState(''); + const { publishComment } = useAccountsActions(); + const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); + const [captchaImage, setCaptchaImage] = useState(''); const navigate = useNavigate(); const location = useLocation(); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); - const { publishComment } = useAccountsActions(); const { feed, hasMore, loadMore } = useFeed([`${selectedAddress}`], 'new'); const { subplebbitAddress } = useParams(); @@ -158,26 +161,19 @@ const Catalog = ({ setBodyStyle }) => { challengeImg.src = imageSource; challengeImg.onload = () => { - const inputEl = document.getElementById('t-resp'); - const cntEl = document.getElementById('t-cnt'); - cntEl.appendChild(challengeImg); - inputEl.focus(); + setIsCaptchaOpen(true); + setCaptchaImage(imageSource); const handleKeyDown = (event) => { if (event.key === 'Enter') { - const challengeResponse = inputEl.value; - inputEl.value = ''; - - if (cntEl.contains(challengeImg)) { - cntEl.removeChild(challengeImg); - } - + setCaptchaImage(''); + resolve(captchaResponse); + setIsCaptchaOpen(false); document.removeEventListener('keydown', handleKeyDown); - - resolve(challengeResponse); } }; - + + setCaptchaResponse(''); document.addEventListener('keydown', handleKeyDown); }; @@ -244,6 +240,10 @@ const Catalog = ({ setBodyStyle }) => { } }; + const handleCaptchaClose = () => { + setIsCaptchaOpen(false); + }; + const handleStyleChange = (event) => { switch (event.target.value) { @@ -336,6 +336,10 @@ const Catalog = ({ setBodyStyle }) => { return ( + <> {defaultSubplebbits.map(subplebbit => ( @@ -430,11 +434,6 @@ const Catalog = ({ setBodyStyle }) => { - - - - - diff --git a/src/components/Thread.jsx b/src/components/Thread.jsx index 81817b5c..177d5537 100644 --- a/src/components/Thread.jsx +++ b/src/components/Thread.jsx @@ -5,6 +5,7 @@ import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled'; import { BoardContext } from '../App'; import { useComment, useAccountsActions } from '@plebbit/plebbit-react-hooks'; import ImageBanner from './ImageBanner'; +import CaptchaModal from './CaptchaModal'; import { Tooltip } from 'react-tooltip'; import getDate from '../utils/getDate'; import renderThreadComments from '../utils/renderThreadComments'; @@ -12,13 +13,15 @@ import renderThreadComments from '../utils/renderThreadComments'; const Thread = ({ setBodyStyle }) => { const [defaultSubplebbits, setDefaultSubplebbits] = useState([]); - const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, setIsCaptchaOpen } = useContext(BoardContext); + const { selectedTitle, setSelectedTitle, selectedAddress, setSelectedAddress, selectedThread, setSelectedThread, selectedStyle, setSelectedStyle, captchaResponse, setCaptchaResponse } = useContext(BoardContext); const [showPostFormLink, setShowPostFormLink] = useState(true); const [showPostForm, setShowPostForm] = useState(false); const [name, setName] = useState(''); const [subject, setSubject] = useState(''); const [commentContent, setCommentContent] = useState(''); const { publishComment } = useAccountsActions(); + const [isCaptchaOpen, setIsCaptchaOpen] = useState(false); + const [captchaImage, setCaptchaImage] = useState(''); const navigate = useNavigate(); const location = useLocation(); const [prevScrollPos, setPrevScrollPos] = useState(0); @@ -153,26 +156,19 @@ const Thread = ({ setBodyStyle }) => { challengeImg.src = imageSource; challengeImg.onload = () => { - const inputEl = document.getElementById('t-resp'); - const cntEl = document.getElementById('t-cnt'); - cntEl.appendChild(challengeImg); - inputEl.focus(); + setIsCaptchaOpen(true); + setCaptchaImage(imageSource); const handleKeyDown = (event) => { if (event.key === 'Enter') { - const challengeResponse = inputEl.value; - inputEl.value = ''; - - if (cntEl.contains(challengeImg)) { - cntEl.removeChild(challengeImg); - } - + setCaptchaImage(''); + resolve(captchaResponse); + setIsCaptchaOpen(false); document.removeEventListener('keydown', handleKeyDown); - - resolve(challengeResponse); } }; - + + setCaptchaResponse(''); document.addEventListener('keydown', handleKeyDown); }; @@ -254,6 +250,10 @@ const Thread = ({ setBodyStyle }) => { } } + const handleCaptchaClose = () => { + setIsCaptchaOpen(false); + }; + const handleStyleChange = (event) => { switch (event.target.value) { @@ -346,6 +346,10 @@ const Thread = ({ setBodyStyle }) => { return ( + <> {defaultSubplebbits.map(subplebbit => ( @@ -457,11 +461,6 @@ const Thread = ({ setBodyStyle }) => { - - - - -