import React, { useState, useEffect, useRef, Fragment } from 'react'; import { Link, useNavigate, useParams } from 'react-router-dom'; import InfiniteScroll from 'react-infinite-scroller'; import { Tooltip } from 'react-tooltip'; 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 ImageBanner from '../ImageBanner'; import Post from '../Post'; import PostLoader from '../PostLoader'; import ReplyModal from '../ReplyModal'; import SettingsModal from '../SettingsModal'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; import handleStyleChange from '../../utils/handleStyleChange'; import renderComments from '../../utils/renderComments'; import useClickForm from '../../hooks/useClickForm'; import useError from '../../hooks/useError'; import useSuccess from '../../hooks/useSuccess'; const Board = () => { const { captchaResponse, setCaptchaResponse, setChallengesArray, defaultSubplebbits, setIsCaptchaOpen, isSettingsOpen, setIsSettingsOpen, setPendingComment, selectedAddress, setSelectedAddress, selectedStyle, setSelectedThread, selectedTitle, setSelectedTitle, showPostForm, showPostFormLink, } = useGeneralStore(state => state); const nameRef = useRef(); const subjectRef = useRef(); const commentRef = useRef(); const linkRef = useRef(); const [isReplyOpen, setIsReplyOpen] = useState(false); const navigate = useNavigate(); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'new'}); const [selectedFeed, setSelectedFeed] = useState(feed); const { subplebbitAddress } = useParams(); const [errorMessage, setErrorMessage] = useState(null); const [successMessage, setSuccessMessage] = useState(null); useError(errorMessage, [errorMessage]); useSuccess(successMessage, [successMessage]); // temporary title from JSON, gets subplebbitAddress from URL useEffect(() => { setSelectedAddress(subplebbitAddress); const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); if (selectedSubplebbit) { setSelectedTitle(selectedSubplebbit.title); } }, [subplebbitAddress, setSelectedAddress, setSelectedTitle, defaultSubplebbits]); // sets useFeed to address from URL useEffect(() => { setSelectedFeed(feed); }, [feed]); // mobile navbar scroll effect useEffect(() => { const debouncedHandleScroll = debounce(() => { const currentScrollPos = window.pageYOffset; setVisible(prevScrollPos > currentScrollPos || currentScrollPos < 10); setPrevScrollPos(currentScrollPos); }, 50); window.addEventListener('scroll', debouncedHandleScroll); return () => window.removeEventListener('scroll', debouncedHandleScroll); }, [prevScrollPos, visible]); const tryLoadMore = async () => { try { await loadMore(); } catch (e) { await new Promise(resolve => setTimeout(resolve, 1000)); } }; const onChallengeVerificationRef = useRef(); const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { setSuccessMessage('challenge success', {publishedCid: challengeVerification.publication.cid}); navigate(`/p/${selectedAddress}/c/${challengeVerification.publication.cid}`); } else if (challengeVerification.challengeSuccess === false) { setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again."); } }; onChallengeVerificationRef.current = onChallengeVerification; const onChallenge = async (challenges, comment) => { setPendingComment(comment); let challengeAnswers = []; navigate(`/p/${selectedAddress}/c/pending`) try { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { setErrorMessage(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) } } const resetFields = () => { nameRef.current.value = ''; subjectRef.current.value = ''; commentRef.current.value = ''; linkRef.current.value = ''; }; const [publishCommentOptions, setPublishCommentOptions] = useState({ subplebbitAddress: selectedAddress, onChallenge, onChallengeVerification: onChallengeVerificationRef.current, onError: (error) => { setErrorMessage(error); }, }); useEffect(() => { setPublishCommentOptions((prevPublishCommentOptions) => ({ ...prevPublishCommentOptions, subplebbitAddress: selectedAddress, onChallengeVerification: onChallengeVerificationRef.current, })); }, [selectedAddress]); const handleSubmit = async (event) => { event.preventDefault(); setPublishCommentOptions((prevPublishCommentOptions) => ({ ...prevPublishCommentOptions, displayName: nameRef.current.value || undefined, title: subjectRef.current.value || undefined, content: commentRef.current.value || undefined, link: linkRef.current.value || undefined, })); }; useEffect(() => { if (publishCommentOptions.content) { (async () => { await publishComment(); resetFields(); })(); } }, [publishCommentOptions]); const { publishComment } = usePublishComment(publishCommentOptions); const getChallengeAnswersFromUser = async (challenges) => { setChallengesArray(challenges); return new Promise((resolve, reject) => { const imageString = challenges?.challenges[0].challenge; const imageSource = `data:image/png;base64,${imageString}`; const challengeImg = new Image(); challengeImg.src = imageSource; challengeImg.onload = () => { setIsCaptchaOpen(true); const handleKeyDown = (event) => { if (event.key === 'Enter') { resolve(captchaResponse); setIsCaptchaOpen(false); document.removeEventListener('keydown', handleKeyDown); event.preventDefault(); } }; setCaptchaResponse(''); document.addEventListener('keydown', handleKeyDown); }; challengeImg.onerror = () => { reject(setErrorMessage('Could not load challenges')); }; }); }; // desktop navbar board select functionality const handleClickTitle = (title, address) => { setSelectedTitle(title); setSelectedAddress(address); setSelectedFeed(feed.filter(feed => feed.title === title)); }; // mobile navbar board select functionality const handleSelectChange = (event) => { const selected = event.target.value; const selectedTitle = defaultSubplebbits.find((subplebbit) => subplebbit.address === selected).title; setSelectedTitle(selectedTitle); setSelectedAddress(selected); navigate(`/p/${selected}`); }; // scroll to post when quote is clicked function handleQuoteClick(reply, event) { event.preventDefault(); const cid = reply.shortCid; const targetElement = [...document.querySelectorAll('.post-reply')] .find(el => el.innerHTML.includes(cid)); if (targetElement) { targetElement.scrollIntoView({ behavior: "instant" }); } }; return ( setIsReplyOpen(false)} /> setIsSettingsOpen(false)} /> <> {defaultSubplebbits.map(subplebbit => ( [ handleClickTitle(subplebbit.title, subplebbit.address)} >{subplebbit.title ? subplebbit.title : subplebbit.address} ]  ))} [ setIsSettingsOpen(true)}>Settings ] [ handleStyleChange({target: {value: "Yotsuba"}} )}>Home ]
Board  
setIsSettingsOpen(true)}>Settings   handleStyleChange({target: {value: "Yotsuba"}} )}>Home
 
 
<>
<>
{selectedTitle}
p/{selectedAddress}
[ event.target.style.cursor='pointer'}>Start a New Thread ]
event.target.style.cursor='pointer'}>Start a New Thread
Name Subject Comment