From 6c653a1b7f9d2e531b00c21fb756d0e78de8de9f Mon Sep 17 00:00:00 2001 From: Tom Date: Thu, 18 May 2023 22:32:32 +0200 Subject: [PATCH] add moderation to thread view --- src/components/views/Thread.jsx | 139 ++++++++++++++++++++++++++++++-- 1 file changed, 132 insertions(+), 7 deletions(-) diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index f3a323a7..4db46360 100644 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { Helmet } from 'react-helmet-async'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { Tooltip } from 'react-tooltip'; -import { useAccount, useAccountComments, useComment, usePublishComment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useAccountComments, useComment, usePublishComment, usePublishCommentEdit, useSubplebbit } 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'; @@ -25,6 +25,7 @@ import useClickForm from '../../hooks/useClickForm'; import useError from '../../hooks/useError'; import useStateString from '../../hooks/useStateString'; import packageJson from '../../../package.json' +import useSuccess from '../../hooks/useSuccess'; const {version} = packageJson @@ -60,13 +61,19 @@ const Thread = () => { const [triggerPublishComment, setTriggerPublishComment] = useState(false); const [errorMessage, setErrorMessage] = useState(null); + const [successMessage, setSuccessMessage] = useState(null); const [isReplyOpen, setIsReplyOpen] = useState(false); const [prevScrollPos, setPrevScrollPos] = useState(0); const [visible, setVisible] = useState(true); const [rotatedStates, setRotatedStates] = useState({}); const [isImageSearchOpen, setIsImageSearchOpen] = useState(false); + const [isModerator, setIsModerator] = useState(false); + const [isModToolsOpen, setIsModToolsOpen] = useState(false); + const [commentCid, setCommentCid] = useState(null); useError(errorMessage, [errorMessage]); + useSuccess(successMessage, [successMessage]); + const comment = useComment({commentCid: selectedThread}); const { subplebbitAddress, threadCid } = useParams(); const subplebbit = useSubplebbit({subplebbitAddress: comment.subplebbitAddress}); @@ -77,6 +84,26 @@ const Thread = () => { const commentMediaInfo = getCommentMediaInfo(comment); const fallbackImgUrl = "assets/filedeleted-res.gif"; + + 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 + })); + }; + useEffect(() => { window.scrollTo(0, 0); @@ -160,9 +187,12 @@ const Thread = () => { const onChallengeVerification = (challengeVerification) => { if (challengeVerification.challengeSuccess === true) { - console.log('challenge success'); - } - else if (challengeVerification.challengeSuccess === false) { + if (challengeVerification.publication?.cid !== undefined) { + console.log('challenge success'); + } else { + setSuccessMessage('Challenge Success'); + } + } else if (challengeVerification.challengeSuccess === false) { setErrorMessage('challenge failed', {reason: challengeVerification.reason, errors: challengeVerification.errors}); } }; @@ -296,6 +326,70 @@ const Thread = () => { }); }; + + 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]); + // mobile navbar board select functionality const handleSelectChange = (event) => { const selected = event.target.value; @@ -659,7 +753,7 @@ const Thread = () => { style={{ display: rotatedStates[comment.cid] ? 'block' : 'none' }}>