diff --git a/ui/component/commentCreate/index.js b/ui/component/commentCreate/index.js index cda850b38..80793559b 100644 --- a/ui/component/commentCreate/index.js +++ b/ui/component/commentCreate/index.js @@ -1,14 +1,17 @@ import { connect } from 'react-redux'; - import { doCommentCreate, makeSelectClaimForUri } from 'lbry-redux'; +import { doOpenModal } from 'redux/actions/app'; import { CommentCreate } from './view'; +import { selectUserVerifiedEmail } from 'lbryinc'; const select = (state, props) => ({ + commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, claim: makeSelectClaimForUri(props.uri)(state), }); const perform = dispatch => ({ createComment: (comment, claimId, channel) => dispatch(doCommentCreate(comment, claimId, channel)), + openModal: (modal, props) => dispatch(doOpenModal(modal, props)), }); export default connect( diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index 67175ac93..5f7f6e89a 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -5,15 +5,19 @@ import { FormField, Form } from 'component/common/form'; import Button from 'component/button'; import ChannelSection from 'component/selectChannel'; import usePersistedState from 'effects/use-persisted-state'; +import * as MODALS from 'constants/modal_types'; +import I18nMessage from '../i18nMessage/view'; type Props = { + commentingEnabled: boolean, uri: string, claim: StreamClaim, + openModal: (id: string, { onCommentAcknowledge: () => void }) => void, createComment: (string, string, string) => void, }; export function CommentCreate(props: Props) { - const { createComment, claim } = props; + const { commentingEnabled, createComment, claim, openModal } = props; const { claim_id: claimId } = claim; const [commentValue, setCommentValue] = usePersistedState(`comment-${claimId}`, ''); const [commentAck, setCommentAck] = usePersistedState('comment-acknowledge', false); @@ -28,10 +32,16 @@ export function CommentCreate(props: Props) { setChannel(channel); } - function handleCommentAck(event) { + function handleCommentAck() { setCommentAck(true); } + function onTextareaFocus() { + if (!commentAck) { + openModal(MODALS.COMMENT_ACKNOWEDGEMENT, { onCommentAcknowledge: handleCommentAck }); + } + } + function handleSubmit() { if (channel !== CHANNEL_NEW && commentValue.length) createComment(commentValue, claimId, channel); setCommentValue(''); @@ -39,58 +49,35 @@ export function CommentCreate(props: Props) { useEffect(() => setCharCount(commentValue.length), [commentValue]); + if (!commentingEnabled) { + return ( + }}> + Please %sign_in_link% to comment. + + ); + } + return ( -
- {commentAck !== true && ( -
-

{__('A few things to know before participating in the comment alpha:')}

- -
- )} - {commentAck === true && ( -
- - -
-
- - )} -
+
+ + +