From a5107f075cb497d9dfa02e69b3bcd7425f061e3b Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 25 Aug 2020 15:54:06 -0400 Subject: [PATCH] wip with channel prompts on comments --- ui/component/channelEdit/view.jsx | 4 ++- ui/component/commentCreate/view.jsx | 18 +++++++++-- ui/component/commentsReplies/index.js | 8 +++-- ui/component/commentsReplies/view.jsx | 46 ++++++++++++++++++--------- ui/component/inviteNew/view.jsx | 17 ++++++---- ui/page/channelNew/index.js | 8 +++-- ui/page/channelNew/view.jsx | 31 ++++++++++++++---- ui/scss/component/_comments.scss | 1 + ui/scss/init/_gui.scss | 5 +++ 9 files changed, 101 insertions(+), 37 deletions(-) diff --git a/ui/component/channelEdit/view.jsx b/ui/component/channelEdit/view.jsx index c23124a11..e3ba4fa8b 100644 --- a/ui/component/channelEdit/view.jsx +++ b/ui/component/channelEdit/view.jsx @@ -2,6 +2,7 @@ import * as MODALS from 'constants/modal_types'; import * as ICONS from 'constants/icons'; import React from 'react'; +import classnames from 'classnames'; import { FormField } from 'component/common/form'; import Button from 'component/button'; import TagsSearch from 'component/tagsSearch'; @@ -70,6 +71,7 @@ function ChannelForm(props: Props) { createError, clearChannelErrors, openModal, + disabled, } = props; const [nameError, setNameError] = React.useState(undefined); const [bidError, setBidError] = React.useState(''); @@ -180,7 +182,7 @@ function ChannelForm(props: Props) { // TODO clear and bail after submit return ( <> -
+
+
+ ); + } + return (
({ myChannels: selectMyChannelClaims(state), @@ -12,4 +12,6 @@ const select = (state, props) => ({ commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, }); -export default connect(select, null)(CommentsReplies); +export default connect(select, { + doToast, +})(CommentsReplies); diff --git a/ui/component/commentsReplies/view.jsx b/ui/component/commentsReplies/view.jsx index a4bc7119a..b38cfb53f 100644 --- a/ui/component/commentsReplies/view.jsx +++ b/ui/component/commentsReplies/view.jsx @@ -1,9 +1,12 @@ // @flow +import { SITE_NAME } from 'config'; +import * as ICONS from 'constants/icons'; +import * as PAGES from 'constants/pages'; import React from 'react'; import Comment from 'component/comment'; import Button from 'component/button'; -import * as ICONS from 'constants/icons'; import CommentCreate from 'component/commentCreate'; +import { useHistory } from 'react-router'; type Props = { comments: Array, @@ -13,31 +16,35 @@ type Props = { linkedComment?: Comment, parentId: string, commentingEnabled: boolean, + doToast: ({ message: string }) => void, }; function CommentsReplies(props: Props) { - const { uri, comments, claimIsMine, myChannels, linkedComment, parentId, commentingEnabled } = props; + const { uri, comments, claimIsMine, myChannels, linkedComment, parentId, commentingEnabled, doToast } = props; + const { + push, + location: { pathname }, + } = useHistory(); const [isReplying, setReplying] = React.useState(false); const [isExpanded, setExpanded] = React.useState(false); const [start, setStart] = React.useState(0); const [end, setEnd] = React.useState(9); const sortedComments = comments ? [...comments].reverse() : []; const numberOfComments = comments ? comments.length : 0; + const linkedCommentId = linkedComment ? linkedComment.comment_id : ''; + const commentsIndexOfLInked = comments && sortedComments.findIndex(e => e.comment_id === linkedCommentId); + const hasChannels = myChannels && myChannels.length > 0; - const showMore = () => { + function showMore() { if (start > 0) { setStart(0); } else { setEnd(numberOfComments); } - }; - - const linkedCommentId = linkedComment ? linkedComment.comment_id : ''; - - const commentsIndexOfLInked = comments && sortedComments.findIndex(e => e.comment_id === linkedCommentId); + } // todo: implement comment_list --mine in SDK so redux can grab with selectCommentIsMine - const isMyComment = (channelId: string) => { + function isMyComment(channelId: string) { if (myChannels != null && channelId != null) { for (let i = 0; i < myChannels.length; i++) { if (myChannels[i].claim_id === channelId) { @@ -46,16 +53,25 @@ function CommentsReplies(props: Props) { } } return false; - }; + } - const handleCommentDone = () => { + function handleCommentDone() { if (!isExpanded) { setExpanded(true); setStart(numberOfComments || 0); } setEnd(numberOfComments + 1); setReplying(false); - }; + } + + function handleCommentReply() { + if (!hasChannels) { + push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`); + doToast({ message: __('A channel is required to comment on %SITE_NAME%', { SITE_NAME }) }); + } else { + setReplying(!isReplying); + } + } React.useEffect(() => { if ( @@ -75,13 +91,13 @@ function CommentsReplies(props: Props) { const displayedComments = sortedComments.slice(start, end); return ( -
  • +
  • +
    • + + )} + + push(redirectUrl || `/$/${PAGES.CHANNELS}`)} /> ); } -export default withRouter(ChannelNew); +export default ChannelNew; diff --git a/ui/scss/component/_comments.scss b/ui/scss/component/_comments.scss index 486f43c60..4f27dbf52 100644 --- a/ui/scss/component/_comments.scss +++ b/ui/scss/component/_comments.scss @@ -4,6 +4,7 @@ $thumbnailWidthSmall: 2rem; .comments { list-style-type: none; font-size: var(--font-small); + margin-top: var(--spacing-l); } .comments--replies { diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index 426932ea4..17fbf3dcc 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -301,6 +301,11 @@ textarea { background-color: var(--color-primary-alt); } +.notice-message--above-content { + @extend .notice-message; + margin-bottom: var(--spacing-l); +} + .privacy-img { height: 10rem; }