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 handleQuoteClick from '../../utils/handleQuoteClick'; 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, setSelectedParentCid, setSelectedShortCid, 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 onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { setSuccessMessage('Challenge success.', {publishedCid: challengeVerification.publication?.cid}); console.log("challenge success", challengeVerification.publication?.cid, challengeVerification) navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`); } else if (challengeVerification.challengeSuccess === false) { setErrorMessage('Challenge failed.', {reason: challengeVerification.reason, errors: challengeVerification.errors}); console.log("challenge failed", challengeVerification.reason, challengeVerification.errors) setErrorMessage("Error: You seem to have mistyped the CAPTCHA. Please try again."); } }; const onChallenge = async (challenges, comment) => { setPendingComment(comment); let challengeAnswers = []; try { challengeAnswers = await getChallengeAnswersFromUser(challenges) } catch (error) { setErrorMessage(error); } if (challengeAnswers) { await comment.publishChallengeAnswers(challengeAnswers) } }; const [publishCommentOptions, setPublishCommentOptions] = useState({ subplebbitAddress: selectedAddress, onChallenge, onChallengeVerification, onError: (error) => { setErrorMessage(error); }, }); const { publishComment, index } = usePublishComment(publishCommentOptions); useEffect(() => { if (index !== undefined) { navigate(`/profile/c/${index}`); setSuccessMessage('Comment pending with index ' + index + '.'); } }, [index]); const resetFields = () => { nameRef.current.value = ''; subjectRef.current.value = ''; commentRef.current.value = ''; linkRef.current.value = ''; }; 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 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 = async (event) => { if (event.key === 'Enter') { const currentCaptchaResponse = useGeneralStore.getState().captchaResponse; resolve(currentCaptchaResponse); 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}`); }; 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