From 0f1d4039a9eb040bc7095c93ec3b771ca0938f7c Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Mon, 8 Nov 2021 14:27:14 +0800 Subject: [PATCH] Use 'selectHasChannel' instead of the full 'selectMyChannelClaims' - selectMyChannelClaims depends on `byId`, which currently is always invalidated per update, so it is not memoized. - Most of the use-cases just needs the ID or the length of the array anyways, so avoid generating a Claim array (in selectMyChannelClaims) unnecessarily -- the client need to reduce it back down to IDs again :/ - The simpler boolean also removes the need to memoize the selector, which saves a bit of memory. --- ui/component/comment/index.js | 4 ++-- ui/component/comment/view.jsx | 5 ++--- ui/component/commentCreate/index.js | 4 ++-- ui/component/commentCreate/view.jsx | 5 ++--- ui/component/commentsReplies/index.js | 4 ++-- ui/component/commentsReplies/view.jsx | 10 +++------- ui/component/fileActions/index.js | 4 ++-- ui/component/fileActions/view.jsx | 5 ++--- ui/component/publishForm/index.js | 7 +++---- ui/component/repostCreate/index.js | 2 -- ui/component/repostCreate/view.jsx | 1 - ui/component/settingAccount/index.js | 4 ++-- ui/component/settingAccount/view.jsx | 9 ++++----- ui/component/walletSend/index.js | 3 +-- ui/page/channels/index.js | 8 +------- ui/page/channels/view.jsx | 1 - ui/page/creatorDashboard/index.js | 4 ++-- ui/page/creatorDashboard/view.jsx | 5 ++--- ui/page/listBlocked/index.js | 4 ++-- ui/page/listBlocked/view.jsx | 15 ++++++--------- ui/page/livestreamSetup/index.js | 4 ++-- ui/page/livestreamSetup/view.jsx | 5 ++--- ui/redux/selectors/claims.js | 7 +++++++ 23 files changed, 51 insertions(+), 69 deletions(-) diff --git a/ui/component/comment/index.js b/ui/component/comment/index.js index ffe06dd37..99de22a84 100644 --- a/ui/component/comment/index.js +++ b/ui/component/comment/index.js @@ -3,7 +3,7 @@ import { makeSelectStakedLevelForChannelUri, makeSelectClaimForUri, makeSelectThumbnailForUri, - selectMyChannelClaims, + selectHasChannels, } from 'redux/selectors/claims'; import { doCommentUpdate, doCommentList } from 'redux/actions/comments'; import { makeSelectChannelIsMuted } from 'redux/selectors/blocked'; @@ -31,7 +31,7 @@ const select = (state, props) => { commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, othersReacts: selectOthersReactsForComment(state, reactionKey), activeChannelClaim, - myChannels: selectMyChannelClaims(state), + hasChannels: selectHasChannels(state), playingUri: selectPlayingUri(state), stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state), linkedCommentAncestors: selectLinkedCommentAncestors(state), diff --git a/ui/component/comment/view.jsx b/ui/component/comment/view.jsx index f290f45ae..027dfa394 100644 --- a/ui/component/comment/view.jsx +++ b/ui/component/comment/view.jsx @@ -49,7 +49,7 @@ type Props = { commentModBlock: (string) => void, linkedCommentId?: string, linkedCommentAncestors: { [string]: Array }, - myChannels: ?Array, + hasChannels: boolean, commentingEnabled: boolean, doToast: ({ message: string }) => void, isTopLevel?: boolean, @@ -94,7 +94,7 @@ function Comment(props: Props) { linkedCommentId, linkedCommentAncestors, commentingEnabled, - myChannels, + hasChannels, doToast, isTopLevel, threadDepth, @@ -134,7 +134,6 @@ function Comment(props: Props) { const [page, setPage] = useState(showRepliesOnMount ? 1 : 0); const [advancedEditor] = usePersistedState('comment-editor-mode', false); const [displayDeadComment, setDisplayDeadComment] = React.useState(false); - const hasChannels = myChannels && myChannels.length > 0; const likesCount = (othersReacts && othersReacts.like) || 0; const dislikesCount = (othersReacts && othersReacts.dislike) || 0; const totalLikesAndDislikes = likesCount + dislikesCount; diff --git a/ui/component/commentCreate/index.js b/ui/component/commentCreate/index.js index 84ac3e3ec..4cf961659 100644 --- a/ui/component/commentCreate/index.js +++ b/ui/component/commentCreate/index.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { makeSelectClaimForUri, makeSelectClaimIsMine, - selectMyChannelClaims, + selectHasChannels, selectFetchingMyChannels, makeSelectTagInClaimOrChannelForUri, } from 'redux/selectors/claims'; @@ -16,7 +16,7 @@ import { selectSettingsByChannelId } from 'redux/selectors/comments'; const select = (state, props) => ({ activeChannelClaim: selectActiveChannelClaim(state), - channels: selectMyChannelClaims(state), + hasChannels: selectHasChannels(state), claim: makeSelectClaimForUri(props.uri)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), isFetchingChannels: selectFetchingMyChannels(state), diff --git a/ui/component/commentCreate/view.jsx b/ui/component/commentCreate/view.jsx index b3353c27c..414029bb0 100644 --- a/ui/component/commentCreate/view.jsx +++ b/ui/component/commentCreate/view.jsx @@ -43,7 +43,7 @@ type Props = { activeChannel: string, activeChannelClaim: ?ChannelClaim, bottom: boolean, - channels: ?Array, + hasChannels: boolean, claim: StreamClaim, claimIsMine: boolean, embed?: boolean, @@ -72,7 +72,7 @@ export function CommentCreate(props: Props) { const { activeChannelClaim, bottom, - channels, + hasChannels, claim, claimIsMine, embed, @@ -146,7 +146,6 @@ export function CommentCreate(props: Props) { const claimId = claim && claim.claim_id; const channelUri = claim && (claim.signing_channel ? claim.signing_channel.permanent_url : claim.permanent_url); - const hasChannels = channels && channels.length; const charCount = commentValue ? commentValue.length : 0; const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length || pauseQuickSend; const channelId = getChannelIdFromClaim(claim); diff --git a/ui/component/commentsReplies/index.js b/ui/component/commentsReplies/index.js index d7ac34b2e..005226e78 100644 --- a/ui/component/commentsReplies/index.js +++ b/ui/component/commentsReplies/index.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import { doResolveUris } from 'redux/actions/claims'; -import { makeSelectClaimIsMine, selectMyChannelClaims, makeSelectClaimForUri } from 'redux/selectors/claims'; +import { makeSelectClaimIsMine, selectMyChannelClaimIds, makeSelectClaimForUri } from 'redux/selectors/claims'; import { selectIsFetchingCommentsByParentId, selectRepliesForParentId } from 'redux/selectors/comments'; import { selectUserVerifiedEmail } from 'redux/selectors/user'; import CommentsReplies from './view'; @@ -17,7 +17,7 @@ const select = (state, props) => { resolvedReplies, claimIsMine: makeSelectClaimIsMine(props.uri)(state), userCanComment: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true, - myChannels: selectMyChannelClaims(state), + myChannelIds: selectMyChannelClaimIds(state), isFetchingByParentId: selectIsFetchingCommentsByParentId(state), }; }; diff --git a/ui/component/commentsReplies/view.jsx b/ui/component/commentsReplies/view.jsx index 43fba2f75..1906a1a18 100644 --- a/ui/component/commentsReplies/view.jsx +++ b/ui/component/commentsReplies/view.jsx @@ -11,7 +11,7 @@ type Props = { uri: string, parentId: string, claimIsMine: boolean, - myChannels: ?Array, + myChannelIds: ?Array, linkedCommentId?: string, userCanComment: boolean, threadDepth: number, @@ -30,7 +30,7 @@ function CommentsReplies(props: Props) { fetchedReplies, resolvedReplies, claimIsMine, - myChannels, + myChannelIds, linkedCommentId, userCanComment, threadDepth, @@ -95,11 +95,7 @@ function CommentsReplies(props: Props) { message={comment.comment} timePosted={comment.timestamp * 1000} claimIsMine={claimIsMine} - commentIsMine={ - comment.channel_id && - myChannels && - myChannels.some(({ claim_id }) => claim_id === comment.channel_id) - } + commentIsMine={comment.channel_id && myChannelIds && myChannelIds.includes(comment.channel_id)} linkedCommentId={linkedCommentId} commentingEnabled={userCanComment} supportAmount={comment.support_amount} diff --git a/ui/component/fileActions/index.js b/ui/component/fileActions/index.js index a2d4b8bcd..0eae8a168 100644 --- a/ui/component/fileActions/index.js +++ b/ui/component/fileActions/index.js @@ -2,7 +2,7 @@ import { connect } from 'react-redux'; import { makeSelectClaimIsMine, makeSelectClaimForUri, - selectMyChannelClaims, + selectHasChannels, makeSelectClaimIsStreamPlaceholder, makeSelectTagInClaimOrChannelForUri, } from 'redux/selectors/claims'; @@ -23,7 +23,7 @@ const select = (state, props) => ({ fileInfo: makeSelectFileInfoForUri(props.uri)(state), renderMode: makeSelectFileRenderModeForUri(props.uri)(state), costInfo: makeSelectCostInfoForUri(props.uri)(state), - myChannels: selectMyChannelClaims(state), + hasChannels: selectHasChannels(state), isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(props.uri)(state), reactionsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state), streamingUrl: makeSelectStreamingUrlForUri(props.uri)(state), diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx index b872f8347..edaf8259a 100644 --- a/ui/component/fileActions/view.jsx +++ b/ui/component/fileActions/view.jsx @@ -27,7 +27,7 @@ type Props = { fileInfo: FileListItem, costInfo: ?{ cost: number }, renderMode: string, - myChannels: ?Array, + hasChannels: boolean, doToast: ({ message: string }) => void, clearPlayingUri: () => void, hideRepost?: boolean, @@ -47,7 +47,7 @@ function FileActions(props: Props) { costInfo, renderMode, prepareEdit, - myChannels, + hasChannels, clearPlayingUri, doToast, hideRepost, @@ -63,7 +63,6 @@ function FileActions(props: Props) { const isMobile = useIsMobile(); const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode); const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0)); - const hasChannels = myChannels && myChannels.length > 0; const claimId = claim && claim.claim_id; const { signing_channel: signingChannel } = claim; const channelName = signingChannel && signingChannel.name; diff --git a/ui/component/publishForm/index.js b/ui/component/publishForm/index.js index a78b5da0a..77310640a 100644 --- a/ui/component/publishForm/index.js +++ b/ui/component/publishForm/index.js @@ -15,7 +15,7 @@ import { selectIsResolvingPublishUris, selectMyClaimForUri, } from 'redux/selectors/publish'; -import { selectMyChannelClaims, makeSelectClaimIsStreamPlaceholder } from 'redux/selectors/claims'; +import { makeSelectClaimIsStreamPlaceholder } from 'redux/selectors/claims'; import * as RENDER_MODES from 'constants/file_render_modes'; import * as SETTINGS from 'constants/settings'; import { doClaimInitialRewards } from 'redux/actions/rewards'; @@ -33,7 +33,7 @@ import { import { makeSelectClientSetting } from 'redux/selectors/settings'; import { makeSelectFileRenderModeForUri } from 'redux/selectors/content'; import { selectUser } from 'redux/selectors/user'; -import PublishPage from './view'; +import PublishForm from './view'; const select = (state) => { const myClaimForUri = selectMyClaimForUri(state); @@ -61,7 +61,6 @@ const select = (state) => { modal: selectModal(state), enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state), activeChannelClaim: selectActiveChannelClaim(state), - myChannels: selectMyChannelClaims(state), incognito: selectIncognito(state), activeChannelStakedLevel: selectActiveChannelStakedLevel(state), isClaimingInitialRewards: selectIsClaimingInitialRewards(state), @@ -80,4 +79,4 @@ const perform = (dispatch) => ({ claimInitialRewards: () => dispatch(doClaimInitialRewards()), }); -export default connect(select, perform)(PublishPage); +export default connect(select, perform)(PublishForm); diff --git a/ui/component/repostCreate/index.js b/ui/component/repostCreate/index.js index da2d21455..3aa7b087a 100644 --- a/ui/component/repostCreate/index.js +++ b/ui/component/repostCreate/index.js @@ -3,7 +3,6 @@ import { doHideModal } from 'redux/actions/app'; import { makeSelectClaimForUri, makeSelectTitleForUri, - selectMyChannelClaims, selectRepostError, selectRepostLoading, selectMyClaimsWithoutChannels, @@ -24,7 +23,6 @@ import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app'; import RepostCreate from './view'; const select = (state, props) => ({ - channels: selectMyChannelClaims(state), claim: makeSelectClaimForUri(props.uri)(state), passedRepostClaim: makeSelectClaimForUri(props.name, false)(state), passedRepostAmount: makeSelectEffectiveAmountForUri(props.name)(state), diff --git a/ui/component/repostCreate/view.jsx b/ui/component/repostCreate/view.jsx index e8ccc9fb1..6a44bc236 100644 --- a/ui/component/repostCreate/view.jsx +++ b/ui/component/repostCreate/view.jsx @@ -27,7 +27,6 @@ type Props = { claim?: StreamClaim, enteredContentClaim?: StreamClaim, balance: number, - channels: ?Array, doCheckPublishNameAvailability: (string) => Promise<*>, error: ?string, reposting: boolean, diff --git a/ui/component/settingAccount/index.js b/ui/component/settingAccount/index.js index 5cbc5fd70..51f0c4c81 100644 --- a/ui/component/settingAccount/index.js +++ b/ui/component/settingAccount/index.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import { selectMyChannelClaims } from 'redux/selectors/claims'; +import { selectHasChannels } from 'redux/selectors/claims'; import { selectWalletIsEncrypted } from 'redux/selectors/wallet'; import { doWalletStatus } from 'redux/actions/wallet'; import { selectUser, selectUserVerifiedEmail } from 'redux/selectors/user'; @@ -11,7 +11,7 @@ const select = (state) => ({ isAuthenticated: selectUserVerifiedEmail(state), walletEncrypted: selectWalletIsEncrypted(state), user: selectUser(state), - myChannels: selectMyChannelClaims(state), + hasChannels: selectHasChannels(state), language: selectLanguage(state), }); diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx index 812e3818c..59279ea4d 100644 --- a/ui/component/settingAccount/view.jsx +++ b/ui/component/settingAccount/view.jsx @@ -11,17 +11,16 @@ import { getPasswordFromCookie } from 'util/saved-passwords'; import { getStripeEnvironment } from 'util/stripe'; type Props = { - // --- select --- + // --- redux --- isAuthenticated: boolean, walletEncrypted: boolean, user: User, - myChannels: ?Array, - // --- perform --- + hasChannels: boolean, doWalletStatus: () => void, }; export default function SettingAccount(props: Props) { - const { isAuthenticated, walletEncrypted, user, myChannels, doWalletStatus } = props; + const { isAuthenticated, walletEncrypted, user, hasChannels, doWalletStatus } = props; const [storedPassword, setStoredPassword] = React.useState(false); // Determine if password is stored. @@ -94,7 +93,7 @@ export default function SettingAccount(props: Props) { )} {/* @endif */} - {myChannels && ( + {hasChannels && (