From db87125dc89eda82919d4b5eef7adee69fcc5270 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 9 Feb 2021 11:05:56 -0500 Subject: [PATCH] refactor 'active' channel usage across the app --- static/app-strings.json | 1 - ui/component/app/index.js | 21 ++- ui/component/app/view.jsx | 19 +- ui/component/channelSelector/index.js | 11 +- ui/component/channelSelector/view.jsx | 83 ++++++--- ui/component/comment/index.js | 47 ++--- ui/component/comment/view.jsx | 30 +-- ui/component/commentCreate/index.js | 14 +- ui/component/commentCreate/view.jsx | 32 +--- ui/component/commentReactions/index.js | 9 +- ui/component/commentReactions/view.jsx | 12 +- ui/component/commentsList/index.js | 4 +- ui/component/commentsList/view.jsx | 6 +- ui/component/common/icon-custom.jsx | 5 + ui/component/creatorAnalytics/index.js | 8 +- ui/component/creatorAnalytics/view.jsx | 28 ++- ui/component/header/index.js | 8 +- ui/component/header/view.jsx | 36 ++-- ui/component/inviteNew/view.jsx | 22 ++- ui/component/publishBid/bid-help-text.jsx | 38 ++++ ui/component/publishBid/index.js | 26 +++ ui/component/publishBid/view.jsx | 77 ++++++++ ui/component/publishFile/view.jsx | 15 +- ui/component/publishForm/index.js | 4 +- ui/component/publishForm/view.jsx | 57 ++---- ui/component/publishName/index.js | 20 +- ui/component/publishName/view.jsx | 146 ++++----------- ui/component/repostCreate/index.js | 4 + ui/component/repostCreate/view.jsx | 59 +++--- ui/component/selectChannel/index.js | 6 +- ui/component/selectChannel/view.jsx | 172 ++++++------------ ui/component/walletSendTip/index.js | 5 +- ui/component/walletSendTip/view.jsx | 46 ++--- ui/constants/action_types.js | 3 +- ui/constants/icons.js | 1 + ui/constants/modal_types.js | 1 - ui/modal/modalRepost/index.js | 34 ---- ui/modal/modalRepost/view.jsx | 212 ---------------------- ui/modal/modalRouter/view.jsx | 3 - ui/page/creatorDashboard/index.js | 5 +- ui/page/creatorDashboard/view.jsx | 57 +----- ui/redux/actions/app.js | 52 ++++++ ui/redux/actions/comments.js | 120 +++++------- ui/redux/reducers/app.js | 17 ++ ui/redux/reducers/comments.js | 6 - ui/redux/selectors/app.js | 35 ++++ ui/redux/selectors/comments.js | 2 - ui/scss/component/_channel.scss | 31 +++- ui/scss/component/_form-field.scss | 4 +- ui/scss/component/_icon.scss | 8 + ui/scss/component/_modal.scss | 4 + ui/scss/component/menu-button.scss | 1 - ui/store.js | 3 +- 53 files changed, 726 insertions(+), 944 deletions(-) create mode 100644 ui/component/publishBid/bid-help-text.jsx create mode 100644 ui/component/publishBid/index.js create mode 100644 ui/component/publishBid/view.jsx delete mode 100644 ui/modal/modalRepost/index.js delete mode 100644 ui/modal/modalRepost/view.jsx diff --git a/static/app-strings.json b/static/app-strings.json index 2bca68dff..a09421ed7 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -740,7 +740,6 @@ "Repost": "Repost", "Repost your favorite claims to help more people discover them!": "Repost your favorite claims to help more people discover them!", "Repost %title%": "Repost %title%", - "Channel to repost on": "Channel to repost on", "Advanced": "Advanced", "community name": "community name", "Change this to repost to a different %lbry_naming_link%.": "Change this to repost to a different %lbry_naming_link%.", diff --git a/ui/component/app/index.js b/ui/component/app/index.js index cb4a74f17..e135e30f2 100644 --- a/ui/component/app/index.js +++ b/ui/component/app/index.js @@ -5,17 +5,28 @@ import { selectGetSyncErrorMessage, selectSyncFatalError } from 'redux/selectors import { doFetchAccessToken, doUserSetReferrer } from 'redux/actions/user'; import { selectUser, selectAccessToken, selectUserVerifiedEmail } from 'redux/selectors/user'; import { selectUnclaimedRewards } from 'redux/selectors/rewards'; -import { doFetchChannelListMine, SETTINGS } from 'lbry-redux'; +import { doFetchChannelListMine, selectMyChannelUrls, SETTINGS } from 'lbry-redux'; import { makeSelectClientSetting, selectLanguage, selectLoadedLanguages, selectThemePath, } from 'redux/selectors/settings'; -import { selectIsUpgradeAvailable, selectAutoUpdateDownloaded, selectModal } from 'redux/selectors/app'; +import { + selectIsUpgradeAvailable, + selectAutoUpdateDownloaded, + selectModal, + selectActiveChannelId, +} from 'redux/selectors/app'; import { doGetWalletSyncPreference, doSetLanguage } from 'redux/actions/settings'; import { doSyncLoop } from 'redux/actions/sync'; -import { doDownloadUpgradeRequested, doSignIn, doGetAndPopulatePreferences } from 'redux/actions/app'; +import { + doDownloadUpgradeRequested, + doSignIn, + doGetAndPopulatePreferences, + doSetActiveChannel, + doSetIncognito, +} from 'redux/actions/app'; import App from './view'; const select = state => ({ @@ -33,6 +44,8 @@ const select = state => ({ isAuthenticated: selectUserVerifiedEmail(state), currentModal: selectModal(state), syncFatalError: selectSyncFatalError(state), + activeChannelId: selectActiveChannelId(state), + myChannelUrls: selectMyChannelUrls(state), }); const perform = dispatch => ({ @@ -45,6 +58,8 @@ const perform = dispatch => ({ getWalletSyncPref: () => dispatch(doGetWalletSyncPreference()), syncLoop: noInterval => dispatch(doSyncLoop(noInterval)), setReferrer: (referrer, doClaim) => dispatch(doUserSetReferrer(referrer, doClaim)), + setActiveChannelIfNotSet: () => dispatch(doSetActiveChannel()), + setIncognito: () => dispatch(doSetIncognito()), }); export default hot(connect(select, perform)(App)); diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 75e8bfd00..419720ea1 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -80,6 +80,10 @@ type Props = { syncEnabled: boolean, currentModal: any, syncFatalError: boolean, + activeChannelId: ?string, + myChannelUrls: ?Array, + setActiveChannelIfNotSet: (?string) => void, + setIncognito: boolean => void, }; function App(props: Props) { @@ -106,6 +110,10 @@ function App(props: Props) { syncLoop, currentModal, syncFatalError, + activeChannelId, + myChannelUrls, + setActiveChannelIfNotSet, + setIncognito, } = props; const appRef = useRef(); @@ -133,7 +141,8 @@ function App(props: Props) { const shouldHideNag = pathname.startsWith(`/$/${PAGES.EMBED}`) || pathname.startsWith(`/$/${PAGES.AUTH_VERIFY}`); const userId = user && user.id; const useCustomScrollbar = !IS_MAC; - + const hasMyChannels = myChannelUrls && myChannelUrls.length > 0; + const hasNoChannels = myChannelUrls && myChannelUrls.length === 0; const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language]; let uri; @@ -228,6 +237,14 @@ function App(props: Props) { document.documentElement.setAttribute('theme', theme); }, [theme]); + useEffect(() => { + if (hasMyChannels && !activeChannelId) { + setActiveChannelIfNotSet(); + } else if (hasNoChannels) { + setIncognito(true); + } + }, [hasMyChannels, activeChannelId, setActiveChannelIfNotSet]); + useEffect(() => { if (!languages.includes(language)) { setLanguage(language); diff --git a/ui/component/channelSelector/index.js b/ui/component/channelSelector/index.js index d58843086..0b353bb4d 100644 --- a/ui/component/channelSelector/index.js +++ b/ui/component/channelSelector/index.js @@ -1,9 +1,16 @@ import { connect } from 'react-redux'; -import SelectChannel from './view'; import { selectMyChannelClaims } from 'lbry-redux'; +import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app'; +import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app'; +import SelectChannel from './view'; const select = state => ({ channels: selectMyChannelClaims(state), + activeChannelClaim: selectActiveChannelClaim(state), + incognito: selectIncognito(state), }); -export default connect(select)(SelectChannel); +export default connect(select, { + doSetActiveChannel, + doSetIncognito, +})(SelectChannel); diff --git a/ui/component/channelSelector/view.jsx b/ui/component/channelSelector/view.jsx index 9966401c4..8748d6515 100644 --- a/ui/component/channelSelector/view.jsx +++ b/ui/component/channelSelector/view.jsx @@ -1,16 +1,23 @@ // @flow import * as ICONS from 'constants/icons'; +import * as PAGES from 'constants/pages'; import classnames from 'classnames'; import React from 'react'; import ChannelThumbnail from 'component/channelThumbnail'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import ChannelTitle from 'component/channelTitle'; import Icon from 'component/common/icon'; +import { useHistory } from 'react-router'; type Props = { selectedChannelUrl: string, // currently selected channel channels: ?Array, onChannelSelect: (url: string) => void, + hideAnon?: boolean, + activeChannelClaim: ?ChannelClaim, + doSetActiveChannel: string => void, + incognito: boolean, + doSetIncognito: boolean => void, }; type ListItemProps = { @@ -30,34 +37,64 @@ function ChannelListItem(props: ListItemProps) { ); } -function ChannelSelector(props: Props) { - const { channels, selectedChannelUrl, onChannelSelect } = props; +type IncognitoSelectorProps = { + isSelected?: boolean, +}; - if (!channels || !selectedChannelUrl) { - return null; +function IncognitoSelector(props: IncognitoSelectorProps) { + return ( +
+ +

{__('Anonymous')}

+ {props.isSelected && } +
+ ); +} + +function ChannelSelector(props: Props) { + const { channels, activeChannelClaim, doSetActiveChannel, hideAnon = false, incognito, doSetIncognito } = props; + const { + push, + location: { pathname }, + } = useHistory(); + const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url; + + function handleChannelSelect(channelClaim) { + doSetIncognito(false); + doSetActiveChannel(channelClaim.claim_id); } return ( - - - - - - {channels && - channels.map(channel => ( - { - if (selectedChannelUrl !== channel.canonical_url) { - onChannelSelect(channel.canonical_url); - } - }} - > - +
+ + + {(incognito && !hideAnon) || !activeChannelUrl ? ( + + ) : ( + + )} + + + {channels && + channels.map(channel => ( + handleChannelSelect(channel)}> + + + ))} + {!hideAnon && ( + doSetIncognito(true)}> + - ))} - - + )} + push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`)}> +
+ +

Create a new channel

+
+ + +
+ ); } diff --git a/ui/component/comment/index.js b/ui/component/comment/index.js index b5b07a332..b951ab64e 100644 --- a/ui/component/comment/index.js +++ b/ui/component/comment/index.js @@ -1,49 +1,28 @@ import { connect } from 'react-redux'; -import { - doResolveUri, - makeSelectClaimIsPending, - makeSelectClaimForUri, - makeSelectThumbnailForUri, - makeSelectIsUriResolving, - selectMyChannelClaims, - makeSelectMyChannelPermUrlForName, - makeSelectChannelPermUrlForClaimUri, -} from 'lbry-redux'; +import { makeSelectThumbnailForUri, selectMyChannelClaims, makeSelectChannelPermUrlForClaimUri } from 'lbry-redux'; import { doCommentAbandon, doCommentUpdate, doCommentPin, doCommentList } from 'redux/actions/comments'; import { doToggleBlockChannel } from 'redux/actions/blocked'; import { selectChannelIsBlocked } from 'redux/selectors/blocked'; import { doToast } from 'redux/actions/notifications'; import { doSetPlayingUri } from 'redux/actions/content'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; -import { - selectIsFetchingComments, - makeSelectOthersReactionsForComment, - selectCommentChannel, -} from 'redux/selectors/comments'; +import { selectIsFetchingComments, makeSelectOthersReactionsForComment } from 'redux/selectors/comments'; +import { selectActiveChannelClaim } from 'redux/selectors/app'; import Comment from './view'; -const select = (state, props) => { - const channel = selectCommentChannel(state); - - return { - activeChannel: channel, - pending: props.authorUri && makeSelectClaimIsPending(props.authorUri)(state), - channel: props.authorUri && makeSelectClaimForUri(props.authorUri)(state), - isResolvingUri: props.authorUri && makeSelectIsUriResolving(props.authorUri)(state), - thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state), - channelIsBlocked: props.authorUri && selectChannelIsBlocked(props.authorUri)(state), - commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, - isFetchingComments: selectIsFetchingComments(state), - myChannels: selectMyChannelClaims(state), - othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state), - commentIdentityChannel: makeSelectMyChannelPermUrlForName(channel)(state), - contentChannel: makeSelectChannelPermUrlForClaimUri(props.uri)(state), - }; -}; +const select = (state, props) => ({ + thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state), + channelIsBlocked: props.authorUri && selectChannelIsBlocked(props.authorUri)(state), + commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, + isFetchingComments: selectIsFetchingComments(state), + myChannels: selectMyChannelClaims(state), + othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state), + contentChannelPermanentUrl: makeSelectChannelPermUrlForClaimUri(props.uri)(state), + activeChannelClaim: selectActiveChannelClaim(state), +}); const perform = dispatch => ({ closeInlinePlayer: () => dispatch(doSetPlayingUri({ uri: null })), - resolveUri: uri => dispatch(doResolveUri(uri)), updateComment: (commentId, comment) => dispatch(doCommentUpdate(commentId, comment)), deleteComment: commentId => dispatch(doCommentAbandon(commentId)), blockChannel: channelUri => dispatch(doToggleBlockChannel(channelUri)), diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index 632af1482..1324e405d 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -5,7 +5,6 @@ import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field'; import { SITE_NAME, SIMPLE_SITE, ENABLE_COMMENT_REACTIONS } from 'config'; import React, { useEffect, useState } from 'react'; import { parseURI } from 'lbry-redux'; -import { isEmpty } from 'util/object'; import DateTime from 'component/dateTime'; import Button from 'component/button'; import Expandable from 'component/expandable'; @@ -29,10 +28,6 @@ type Props = { commentId: string, // sha256 digest identifying the comment message: string, // comment body timePosted: number, // Comment timestamp - channel: ?Claim, // Channel Claim, retrieved to obtain thumbnail - pending?: boolean, - resolveUri: string => void, // resolves the URI - isResolvingUri: boolean, // if the URI is currently being resolved channelIsBlocked: boolean, // if the channel is blacklisted in the app claimIsMine: boolean, // if you control the claim which this comment was posted on commentIsMine: boolean, // if this comment was signed by an owned channel @@ -53,7 +48,8 @@ type Props = { pinComment: (string, boolean) => Promise, fetchComments: string => void, commentIdentityChannel: any, - contentChannel: any, + contentChannelPermanentUrl: any, + activeChannelClaim: ?ChannelClaim, }; const LENGTH_TO_COLLAPSE = 300; @@ -67,10 +63,6 @@ function Comment(props: Props) { authorUri, timePosted, message, - pending, - channel, - isResolvingUri, - resolveUri, channelIsBlocked, commentIsMine, commentId, @@ -87,8 +79,8 @@ function Comment(props: Props) { pinComment, fetchComments, othersReacts, - commentIdentityChannel, - contentChannel, + contentChannelPermanentUrl, + activeChannelClaim, } = props; const { push, @@ -108,10 +100,7 @@ function Comment(props: Props) { const dislikesCount = (othersReacts && othersReacts.dislike) || 0; const totalLikesAndDislikes = likesCount + dislikesCount; const slimedToDeath = totalLikesAndDislikes >= 5 && dislikesCount / totalLikesAndDislikes > 0.8; - // to debounce subsequent requests - const shouldFetch = - channel === undefined || - (channel !== null && channel.value_type === 'channel' && isEmpty(channel.meta) && !pending); + let channelOwnerOfContent; try { const { channelName } = parseURI(uri); @@ -121,11 +110,6 @@ function Comment(props: Props) { } catch (e) {} useEffect(() => { - // If author was extracted from the URI, then it must be valid. - if (authorUri && author && !isResolvingUri && shouldFetch) { - resolveUri(authorUri); - } - if (isEditing) { setCharCount(editedMessage.length); @@ -143,7 +127,7 @@ function Comment(props: Props) { window.removeEventListener('keydown', handleEscape); }; } - }, [isResolvingUri, shouldFetch, author, authorUri, resolveUri, editedMessage, isEditing, setEditing]); + }, [author, authorUri, editedMessage, isEditing, setEditing]); function handleEditMessageChanged(event) { setCommentValue(!SIMPLE_SITE && advancedEditor ? event : event.target.value); @@ -262,7 +246,7 @@ function Comment(props: Props) { {__('Block Channel')} )} - {commentIdentityChannel === contentChannel && isTopLevel && ( + {activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl && isTopLevel && ( ({ @@ -12,14 +13,13 @@ const select = (state, props) => ({ channels: selectMyChannelClaims(state), isFetchingChannels: selectFetchingMyChannels(state), isPostingComment: selectIsPostingComment(state), - activeChannel: selectCommentChannel(state), + activeChannelClaim: selectActiveChannelClaim(state), }); const perform = (dispatch, ownProps) => ({ - createComment: (comment, claimId, channel, parentId) => - dispatch(doCommentCreate(comment, claimId, channel, parentId, ownProps.uri)), + createComment: (comment, claimId, parentId) => dispatch(doCommentCreate(comment, claimId, parentId, ownProps.uri)), openModal: (modal, props) => dispatch(doOpenModal(modal, props)), - setCommentChannel: name => dispatch(doSetCommentChannel(name)), + setActiveChannel: claimId => dispatch(doSetActiveChannel(claimId)), }); export default connect(select, perform)(CommentCreate); diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index b0cf86f7c..9b68e2d8e 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -1,12 +1,11 @@ // @flow import { SIMPLE_SITE } from 'config'; import * as PAGES from 'constants/pages'; -import { CHANNEL_NEW } from 'constants/claim'; import React, { useEffect, useState } from 'react'; import classnames from 'classnames'; import { FormField, Form } from 'component/common/form'; import Button from 'component/button'; -import ChannelSelection from 'component/selectChannel'; +import SelectChannel from 'component/selectChannel'; import usePersistedState from 'effects/use-persisted-state'; import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field'; import { useHistory } from 'react-router'; @@ -25,7 +24,7 @@ type Props = { isReply: boolean, isPostingComment: boolean, activeChannel: string, - setCommentChannel: string => void, + activeChannelClaim: ?ChannelClaim, }; export function CommentCreate(props: Props) { @@ -40,8 +39,7 @@ export function CommentCreate(props: Props) { isReply, parentId, isPostingComment, - activeChannel, - setCommentChannel, + activeChannelClaim, } = props; const buttonref: ElementRef = React.useRef(); const { push } = useHistory(); @@ -50,21 +48,7 @@ export function CommentCreate(props: Props) { const [charCount, setCharCount] = useState(commentValue.length); const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false); const hasChannels = channels && channels.length; - const disabled = isPostingComment || activeChannel === CHANNEL_NEW || !commentValue.length; - const topChannel = - channels && - channels.reduce((top, channel) => { - const topClaimCount = (top && top.meta && top.meta.claims_in_channel) || 0; - const currentClaimCount = (activeChannel && channel.meta && channel.meta.claims_in_channel) || 0; - return topClaimCount >= currentClaimCount ? top : channel; - }); - - useEffect(() => { - // set default channel - if ((activeChannel === '' || activeChannel === 'anonymous') && topChannel) { - setCommentChannel(topChannel.name); - } - }, [activeChannel, topChannel, setCommentChannel]); + const disabled = isPostingComment || !activeChannelClaim || !commentValue.length; function handleCommentChange(event) { let commentValue; @@ -94,8 +78,8 @@ export function CommentCreate(props: Props) { } function handleSubmit() { - if (activeChannel !== CHANNEL_NEW && commentValue.length) { - createComment(commentValue, claimId, activeChannel, parentId).then(res => { + if (activeChannelClaim && commentValue.length) { + createComment(commentValue, claimId, parentId).then(res => { if (res && res.signature) { setCommentValue(''); @@ -138,13 +122,13 @@ export function CommentCreate(props: Props) { })} >
{isReply ? __('Replying as') + ' ' : __('Comment as') + ' '}
- + } quickActionLabel={ diff --git a/ui/component/commentReactions/index.js b/ui/component/commentReactions/index.js index 146ac659c..0b45d0719 100644 --- a/ui/component/commentReactions/index.js +++ b/ui/component/commentReactions/index.js @@ -2,19 +2,16 @@ import { connect } from 'react-redux'; import Comment from './view'; import { makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux'; import { doToast } from 'redux/actions/notifications'; -import { - makeSelectMyReactionsForComment, - makeSelectOthersReactionsForComment, - selectCommentChannel, -} from 'redux/selectors/comments'; +import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment } from 'redux/selectors/comments'; import { doCommentReact } from 'redux/actions/comments'; +import { selectActiveChannelId } from 'redux/selectors/app'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), myReacts: makeSelectMyReactionsForComment(props.commentId)(state), othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state), - activeChannel: selectCommentChannel(state), + activeChannelId: selectActiveChannelId(state), }); const perform = dispatch => ({ diff --git a/ui/component/commentReactions/view.jsx b/ui/component/commentReactions/view.jsx index 150f33542..410e1e36f 100644 --- a/ui/component/commentReactions/view.jsx +++ b/ui/component/commentReactions/view.jsx @@ -16,13 +16,13 @@ type Props = { commentId: string, pendingCommentReacts: Array, claimIsMine: boolean, - activeChannel: string, + activeChannelId: ?string, claim: ?ChannelClaim, doToast: ({ message: string }) => void, }; export default function CommentReactions(props: Props) { - const { myReacts, othersReacts, commentId, react, claimIsMine, claim, activeChannel, doToast } = props; + const { myReacts, othersReacts, commentId, react, claimIsMine, claim, activeChannelId, doToast } = props; const { push, location: { pathname }, @@ -31,8 +31,8 @@ export default function CommentReactions(props: Props) { claim && claimIsMine && (claim.value_type === 'channel' - ? claim.name === activeChannel - : claim.signing_channel && claim.signing_channel.name === activeChannel); + ? claim.claim_id === activeChannelId + : claim.signing_channel && claim.signing_channel.claim_id === activeChannelId); const authorUri = claim && claim.value_type === 'channel' ? claim.canonical_url @@ -52,7 +52,7 @@ export default function CommentReactions(props: Props) { const creatorLiked = getCountForReact(REACTION_TYPES.CREATOR_LIKE) > 0; function handleCommentLike() { - if (activeChannel) { + if (activeChannelId) { react(commentId, REACTION_TYPES.LIKE); } else { promptForChannel(); @@ -60,7 +60,7 @@ export default function CommentReactions(props: Props) { } function handleCommentDislike() { - if (activeChannel) { + if (activeChannelId) { react(commentId, REACTION_TYPES.DISLIKE); } else { promptForChannel(); diff --git a/ui/component/commentsList/index.js b/ui/component/commentsList/index.js index 98c2009cc..4083be7ba 100644 --- a/ui/component/commentsList/index.js +++ b/ui/component/commentsList/index.js @@ -5,10 +5,10 @@ import { selectIsFetchingComments, makeSelectTotalCommentsCountForUri, selectOthersReactsById, - selectCommentChannel, } from 'redux/selectors/comments'; import { doCommentList, doCommentReactList } from 'redux/actions/comments'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; +import { selectActiveChannelId } from 'redux/selectors/app'; import CommentsList from './view'; const select = (state, props) => ({ @@ -20,7 +20,7 @@ const select = (state, props) => ({ commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, fetchingChannels: selectFetchingMyChannels(state), reactionsById: selectOthersReactsById(state), - activeChannel: selectCommentChannel(state), + activeChannelId: selectActiveChannelId(state), }); const perform = dispatch => ({ diff --git a/ui/component/commentsList/view.jsx b/ui/component/commentsList/view.jsx index 260579ac3..2a5d7f50f 100644 --- a/ui/component/commentsList/view.jsx +++ b/ui/component/commentsList/view.jsx @@ -26,7 +26,7 @@ type Props = { totalComments: number, fetchingChannels: boolean, reactionsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } }, - activeChannel: string, + activeChannelId: ?string, }; function CommentList(props: Props) { @@ -42,7 +42,7 @@ function CommentList(props: Props) { totalComments, fetchingChannels, reactionsById, - activeChannel, + activeChannelId, } = props; const commentRef = React.useRef(); const spinnerRef = React.useRef(); @@ -90,7 +90,7 @@ function CommentList(props: Props) { }) .catch(() => setReadyToDisplayComments(true)); } - }, [fetchReacts, uri, totalComments, activeChannel, fetchingChannels]); + }, [fetchReacts, uri, totalComments, activeChannelId, fetchingChannels]); useEffect(() => { if (readyToDisplayComments && linkedCommentId && commentRef && commentRef.current) { diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index 05f0c799a..4698163ba 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -1015,4 +1015,9 @@ export const icons = { ), + [ICONS.ANONYMOUS]: buildIcon( + + + + ), }; diff --git a/ui/component/creatorAnalytics/index.js b/ui/component/creatorAnalytics/index.js index 4227d8066..549fcf4c9 100644 --- a/ui/component/creatorAnalytics/index.js +++ b/ui/component/creatorAnalytics/index.js @@ -1,13 +1,9 @@ import { connect } from 'react-redux'; -import { makeSelectClaimForUri, doPrepareEdit } from 'lbry-redux'; +import { makeSelectClaimForUri } from 'lbry-redux'; import CreatorAnalytics from './view'; const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), }); -const perform = dispatch => ({ - prepareEdit: channelName => dispatch(doPrepareEdit({ signing_channel: { name: channelName } })), -}); - -export default connect(select, perform)(CreatorAnalytics); +export default connect(select)(CreatorAnalytics); diff --git a/ui/component/creatorAnalytics/view.jsx b/ui/component/creatorAnalytics/view.jsx index 48a770d23..1d9f1040d 100644 --- a/ui/component/creatorAnalytics/view.jsx +++ b/ui/component/creatorAnalytics/view.jsx @@ -26,7 +26,7 @@ export default function CreatorAnalytics(props: Props) { const history = useHistory(); const [stats, setStats] = React.useState(); const [error, setError] = React.useState(); - const [fetchingStats, setFetchingStats] = React.useState(true); + const [fetchingStats, setFetchingStats] = React.useState(false); const claimId = claim && claim.claim_id; const channelHasClaims = claim && claim.meta && claim.meta.claims_in_channel && claim.meta.claims_in_channel > 0; @@ -81,7 +81,24 @@ export default function CreatorAnalytics(props: Props) { /> )} - {!error && ( + {!error && !channelHasClaims ? ( + +