diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 09f533bc..fbf88639 100644 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; import { Virtuoso } from 'react-virtuoso'; -import { useAccount, useAccountComments, useFeed, usePublishComment, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useAccountComments, useFeed, usePublishComment, usePublishCommentEdit, useSubplebbit, useSubscribe } from '@plebbit/plebbit-react-hooks'; import { flattenCommentsPages } from '@plebbit/plebbit-react-hooks/dist/lib/utils' import { debounce } from 'lodash'; import useGeneralStore from '../../hooks/stores/useGeneralStore'; @@ -73,14 +73,38 @@ const Board = () => { const [selectedFeed, setSelectedFeed] = useState(feed); const [rotatedStates, setRotatedStates] = useState({}); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); + const [isModerator, setIsModerator] = useState(false); + const [isModToolsOpen, setIsModToolsOpen] = useState(false); + const [commentCid, setCommentCid] = useState(null); const [errorMessage, setErrorMessage] = useState(null); - const [successMessage] = useState(null); + const [successMessage, setSuccessMessage] = useState(null); useError(errorMessage, [errorMessage]); useSuccess(successMessage, [successMessage]); + useEffect(() => { + if (subplebbit.roles !== undefined) { + const role = subplebbit.roles[account.address]?.role; + + if (role === 'moderator' || 'admin' || 'owner') { + setIsModerator(true); + } else { + setIsModerator(false); + } + } + }, [account?.address, subplebbit.roles]); + + + const handleOptionClick = (threadCid) => { + setRotatedStates(prevState => ({ + ...prevState, + [threadCid]: false + })); + }; + + const errorString = useMemo(() => { if (subplebbit?.state === 'failed') { let errorString = 'Failed fetching board "' + selectedAddress + '".'; @@ -191,8 +215,12 @@ const Board = () => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`); - console.log('challenge success'); + if (challengeVerification.publication?.cid !== undefined) { + navigate(`/p/${selectedAddress}/c/${challengeVerification.publication?.cid}`); + console.log('challenge success'); + } else { + setSuccessMessage('Challenge Success'); + } } else if (challengeVerification.challengeSuccess === false) { setErrorMessage('Challenge Failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); @@ -326,6 +354,70 @@ const Board = () => { }); }; + const [publishCommentEditOptions, setPublishCommentEditOptions] = useState({ + commentCid: commentCid, + subplebbitAddress: selectedAddress, + onChallenge, + onChallengeVerification, + onError: (error) => { + setErrorMessage(error); + }, + }); + + + const {error, publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions); + + useEffect(() => { + if (error) { + setErrorMessage(error); + } + }, [error]); + + + const handleModToolClick = (tool, commentCid, currentState) => { + setCommentCid(commentCid); + handleOptionClick(commentCid); + + switch (tool) { + case 'Pin': + case 'Unpin': + setPublishCommentEditOptions(prevOptions => ({ + ...prevOptions, + pinned: !currentState.pinned, + })); + break; + case 'Close': + case 'Reopen': + setPublishCommentEditOptions(prevOptions => ({ + ...prevOptions, + locked: !currentState.locked, + })); + break; + case 'Delete': + setPublishCommentEditOptions(prevOptions => ({ + ...prevOptions, + removed: true, + })); + break; + default: + break; + } + }; + + + useEffect(() => { + setPublishCommentEditOptions((prevOptions) => ({ + ...prevOptions, + commentCid: commentCid, + })); + }, [commentCid]); + + + useEffect(() => { + publishCommentEdit(); + }, [publishCommentEditOptions]); + + // desktop navbar board select functionality const handleClickTitle = (title, address) => { setSelectedTitle(title); @@ -703,8 +795,8 @@ const Board = () => {