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.
77 lines
2.3 KiB
JavaScript
77 lines
2.3 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import { ComboboxOption } from '@reach/combobox';
|
|
import FileThumbnail from 'component/fileThumbnail';
|
|
import ChannelThumbnail from 'component/channelThumbnail';
|
|
import FileProperties from 'component/previewOverlayProperties';
|
|
import ClaimProperties from 'component/claimProperties';
|
|
import PremiumBadge from 'component/premiumBadge';
|
|
|
|
type Props = {
|
|
claim: ?Claim,
|
|
uri: string,
|
|
isResolvingUri: boolean,
|
|
geoRestriction: ?GeoRestriction,
|
|
};
|
|
|
|
export default function WunderbarSuggestion(props: Props) {
|
|
const { claim, uri, isResolvingUri, geoRestriction } = props;
|
|
|
|
if (isResolvingUri) {
|
|
return (
|
|
<ComboboxOption value={uri}>
|
|
<div className="wunderbar__suggestion">
|
|
<div className="media__thumb media__thumb--resolving" />
|
|
</div>
|
|
</ComboboxOption>
|
|
);
|
|
}
|
|
|
|
if (!claim) {
|
|
return null;
|
|
}
|
|
|
|
if (geoRestriction) {
|
|
// Could display something else in the future, but hide completely for now.
|
|
return null;
|
|
}
|
|
|
|
const isChannel = claim.value_type === 'channel';
|
|
const isCollection = claim.value_type === 'collection';
|
|
|
|
return (
|
|
<ComboboxOption value={uri}>
|
|
<div
|
|
className={classnames('wunderbar__suggestion', {
|
|
'wunderbar__suggestion--channel': isChannel,
|
|
})}
|
|
>
|
|
{isChannel && <ChannelThumbnail small uri={uri} />}
|
|
{!isChannel && (
|
|
<FileThumbnail uri={uri}>
|
|
{/* @if TARGET='app' */}
|
|
{!isCollection && (
|
|
<div className="claim-preview__file-property-overlay">
|
|
<FileProperties uri={uri} small iconOnly />
|
|
</div>
|
|
)}
|
|
{/* @endif */}
|
|
{isCollection && (
|
|
<div className="claim-preview__claim-property-overlay">
|
|
<ClaimProperties uri={uri} small iconOnly />
|
|
</div>
|
|
)}
|
|
</FileThumbnail>
|
|
)}
|
|
<span className="wunderbar__suggestion-label">
|
|
<div className="wunderbar__suggestion-title">{claim.value.title}</div>
|
|
<div className="wunderbar__suggestion-name">
|
|
{isChannel ? claim.name : (claim.signing_channel && claim.signing_channel.name) || __('Anonymous')}
|
|
<PremiumBadge uri={uri} />
|
|
</div>
|
|
</span>
|
|
</div>
|
|
</ComboboxOption>
|
|
);
|
|
}
|