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.4 KiB
JavaScript
48 lines
1.4 KiB
JavaScript
// @flow
|
|
import 'scss/component/_comment-badge.scss';
|
|
|
|
import React from 'react';
|
|
import * as ICONS from 'constants/icons';
|
|
import * as PAGES from 'constants/pages';
|
|
import CommentBadge from 'component/common/comment-badge';
|
|
import Button from 'component/button';
|
|
|
|
type Props = {
|
|
uri?: string,
|
|
membership: ?string, // Retrieved from redux if `uri` is provided; else uses the given `membership` directly.
|
|
linkPage?: boolean,
|
|
placement?: string,
|
|
className?: string,
|
|
hideTooltip?: boolean,
|
|
};
|
|
|
|
export default function PremiumBadge(props: Props) {
|
|
const { membership, linkPage, placement, className, hideTooltip } = props;
|
|
|
|
const badgeToShow = membership === 'Premium' ? 'silver' : membership === 'Premium+' ? 'gold' : null;
|
|
|
|
if (!badgeToShow) return null;
|
|
|
|
const badgeProps = { size: 40, placement, hideTooltip, className };
|
|
|
|
return (
|
|
<BadgeWrapper linkPage={linkPage}>
|
|
{badgeToShow === 'silver' ? (
|
|
<CommentBadge label="Premium" icon={ICONS.PREMIUM} {...badgeProps} />
|
|
) : (
|
|
badgeToShow === 'gold' && <CommentBadge label="Premium+" icon={ICONS.PREMIUM_PLUS} {...badgeProps} />
|
|
)}
|
|
</BadgeWrapper>
|
|
);
|
|
}
|
|
|
|
type WrapperProps = {
|
|
linkPage?: boolean,
|
|
children: any,
|
|
};
|
|
|
|
const BadgeWrapper = (props: WrapperProps) => {
|
|
const { linkPage, children } = props;
|
|
|
|
return linkPage ? <Button navigate={`/$/${PAGES.ODYSEE_MEMBERSHIP}`}>{children}</Button> : children;
|
|
};
|