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.
51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
// @flow
|
|
import ChannelThumbnail from 'component/channelThumbnail';
|
|
import React from 'react';
|
|
import PremiumBadge from 'component/premiumBadge';
|
|
|
|
type Props = {
|
|
claimLabel?: string,
|
|
claimTitle?: string,
|
|
emote?: any,
|
|
uri?: string,
|
|
};
|
|
|
|
export default function TextareaSuggestionsItem(props: Props) {
|
|
const { claimLabel, claimTitle, emote, uri, ...autocompleteProps } = props;
|
|
|
|
if (emote) {
|
|
const { name: value, url, unicode } = emote;
|
|
|
|
return (
|
|
<div {...autocompleteProps} dispatch={undefined}>
|
|
{unicode ? <div className="emote">{unicode}</div> : <img className="emote" src={url} />}
|
|
|
|
<div className="textarea-suggestion__label">
|
|
<span className="textarea-suggestion__title textarea-suggestion__value textarea-suggestion__value--emote">
|
|
{value}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (claimLabel) {
|
|
const value = claimLabel;
|
|
|
|
return (
|
|
<div {...autocompleteProps} dispatch={undefined}>
|
|
<ChannelThumbnail xsmall uri={uri} />
|
|
|
|
<div className="textarea-suggestion__label">
|
|
<span className="textarea-suggestion__title">{claimTitle || value}</span>
|
|
<span className="textarea-suggestion__value">
|
|
{value}
|
|
<PremiumBadge uri={uri} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|