dbb9ee7ac6
* DRY up membership selector Selectors should be chained up, not copy/pasted. * PremiumBadge: retrieve membership db internally instead of from parent ## Ticket 1753 odyseeMembershipByUri function causing unnecessary renders ## Issue While the rendering issue in the ticket is due to the way the props are defined, it also surfaced a prop-drilling issue with PremiumBadge. Instead of asking the parent for the membership db, it can retrieve from Redux itself. This prevents the prop from polluting 2 levels of components and causing unnecessary renders. ## Approach - Make `PremiumBadge` accept `uri` like most other components. - I still leave the `membership` prop as (i.e. parent can still pass it directly). In some cases (e.g. `livestreamComment`, `page/odyseeMembership`), the parent itself needs the same data, so we don't need to derive it twice.
48 lines
1.9 KiB
JavaScript
48 lines
1.9 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import {
|
|
selectClaimIsMine,
|
|
selectTitleForUri,
|
|
makeSelectCoverForUri,
|
|
selectCurrentChannelPage,
|
|
selectClaimForUri,
|
|
makeSelectClaimIsPending,
|
|
} from 'redux/selectors/claims';
|
|
import { selectMyUnpublishedCollections } from 'redux/selectors/collections';
|
|
import { selectBlacklistedOutpointMap, doFetchSubCount, selectSubCountForUri } from 'lbryinc';
|
|
import { selectYoutubeChannels } from 'redux/selectors/user';
|
|
import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
|
|
import { selectModerationBlockList } from 'redux/selectors/comments';
|
|
import { selectMutedChannels } from 'redux/selectors/blocked';
|
|
import { doOpenModal } from 'redux/actions/app';
|
|
import { selectLanguage } from 'redux/selectors/settings';
|
|
import { getThumbnailFromClaim } from 'util/claim';
|
|
import ChannelPage from './view';
|
|
|
|
const select = (state, props) => {
|
|
const claim = selectClaimForUri(state, props.uri);
|
|
|
|
return {
|
|
title: selectTitleForUri(state, props.uri),
|
|
thumbnail: getThumbnailFromClaim(claim),
|
|
cover: makeSelectCoverForUri(props.uri)(state),
|
|
channelIsMine: selectClaimIsMine(state, claim),
|
|
page: selectCurrentChannelPage(state),
|
|
claim,
|
|
isSubscribed: selectIsSubscribedForUri(state, props.uri),
|
|
blackListedOutpointMap: selectBlacklistedOutpointMap(state),
|
|
subCount: selectSubCountForUri(state, props.uri),
|
|
pending: makeSelectClaimIsPending(props.uri)(state),
|
|
youtubeChannels: selectYoutubeChannels(state),
|
|
blockedChannels: selectModerationBlockList(state),
|
|
mutedChannels: selectMutedChannels(state),
|
|
unpublishedCollections: selectMyUnpublishedCollections(state),
|
|
lang: selectLanguage(state),
|
|
};
|
|
};
|
|
|
|
const perform = (dispatch) => ({
|
|
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
|
|
fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
|
|
});
|
|
|
|
export default connect(select, perform)(ChannelPage);
|