LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Refactor fileTitleSection

Browse source 
- selectInsufficientCreditsForUri unused
- used util function instead of redux selector for title
- only pass needed claim props
This commit is contained in:
Rafael 2022-02-01 17:22:56 -03:00 committed by Thomas Zarebczan
parent fc30a74cd1
commit bc68207f40
3 changed files with 93 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/component/fileTitleSection/index.js
View file

@ -1,25 +1,28 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { doFetchSubCount, selectSubCountForUri } from 'lbryinc'; import { doFetchSubCount, selectSubCountForUri } from 'lbryinc';
import { selectTitleForUri, selectClaimForUri } from 'redux/selectors/claims'; import { selectClaimForUri } from 'redux/selectors/claims';
import { selectInsufficientCreditsForUri } from 'redux/selectors/content';
import FileTitleSection from './view'; import FileTitleSection from './view';
import { getClaimTitle } from 'util/claim';
const select = (state, props) => { const select = (state, props) => {
const claim = selectClaimForUri(state, props.uri); const { uri } = props;
const channelClaimId = claim && claim.signing_channel ? claim.signing_channel.claim_id : undefined;
const channelUri = claim && claim.signing_channel ? claim.signing_channel.canonical_url : undefined; const claim = selectClaimForUri(state, uri);
const subCount = channelUri && selectSubCountForUri(state, channelUri);
const { signing_channel: channel } = claim || {};
const channelUri = channel && channel.canonical_url;
const channelClaimId = channel && channel.claim_id;
const title = getClaimTitle(claim);
return { return {
isInsufficientCredits: selectInsufficientCreditsForUri(state, props.uri), subCount: channelUri && selectSubCountForUri(state, channelUri),
title: selectTitleForUri(state, props.uri),
channelClaimId, channelClaimId,
subCount, title,
}; };
}; };
const perform = (dispatch) => ({ const perform = {
fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)), doFetchSubCount,
}); };
export default connect(select, perform)(FileTitleSection); export default connect(select, perform)(FileTitleSection);

154
ui/component/fileTitleSection/view.jsx
View file

@ -16,19 +16,19 @@ import { ENABLE_MATURE } from 'config';
type Props = { type Props = {
uri: string, uri: string,
title: string,
nsfw: boolean, nsfw: boolean,
isNsfwBlocked: boolean, isNsfwBlocked: boolean,
livestream?: boolean, livestream?: boolean,
isLive?: boolean, isLive?: boolean,
subCount: number, // redux
channelClaimId?: string, channelClaimId?: string,
fetchSubCount: (string) => void, title?: string,
subCount: number,
doFetchSubCount: (claimId: string) => void,
}; };
function FileTitleSection(props: Props) { export default function FileTitleSection(props: Props) {
const { const {
title,
uri, uri,
nsfw, nsfw,
isNsfwBlocked, isNsfwBlocked,
@ -36,92 +36,74 @@ function FileTitleSection(props: Props) {
isLive = false, isLive = false,
subCount, subCount,
channelClaimId, channelClaimId,
fetchSubCount, title,
doFetchSubCount,
} = props; } = props;
React.useEffect(() => { React.useEffect(() => {
if (channelClaimId) { if (channelClaimId) doFetchSubCount(channelClaimId);
fetchSubCount(channelClaimId); }, [channelClaimId, doFetchSubCount]);
}
}, [channelClaimId, fetchSubCount]);
return ( return (
<> <Card
<Card isPageTitle
isPageTitle noTitleWrap
noTitleWrap title={
title={ <>
<React.Fragment> {title}
{title} {nsfw && (
{nsfw && ( <span className="media__title-badge">
<span className="media__title-badge"> <span className="badge badge--tag-mature">{__('Mature')}</span>
<span className="badge badge--tag-mature">{__('Mature')}</span> </span>
</span> )}
)} </>
</React.Fragment> }
} titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />} body={
body={ <>
<React.Fragment> <ClaimInsufficientCredits uri={uri} />
<ClaimInsufficientCredits uri={uri} /> <FileSubtitle uri={uri} isLive={isLive} livestream={livestream} />
<FileSubtitle uri={uri} isLive={isLive} livestream={livestream} /> </>
</React.Fragment> }
} actions={
actions={ isNsfwBlocked ? (
isNsfwBlocked ? ( <div className="main--empty">
<div className="main--empty"> <h2>
<h2> <>
{!ENABLE_MATURE && ( <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
<> {ENABLE_MATURE ? __('Mature content blocked.') : __('Mature content is not supported.')}
<Icon className="icon--hidden" icon={ICONS.EYE_OFF} /> </>
{__('Mature content is not supported.')} </h2>
</> <div>
)} {ENABLE_MATURE ? (
{ENABLE_MATURE && ( <I18nMessage
<> tokens={{
<Icon className="icon--hidden" icon={ICONS.EYE_OFF} /> content_settings: (
{__('Mature content blocked.')} <Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
</> ),
)} }}
</h2> >
<div> Change this in your %content_settings%.
{ENABLE_MATURE && ( </I18nMessage>
<> ) : (
<I18nMessage <I18nMessage
tokens={{ tokens={{
content_settings: ( download_url: <Button label={__('lbry.com')} button="link" href="https://lbry.com/get" />,
<Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} /> }}
), >
}} You can download the LBRY Desktop or Android app on %download_url% and enable mature content in
> Settings.
Change this in your %content_settings%. </I18nMessage>
</I18nMessage> )}
</>
)}
{!ENABLE_MATURE && (
<>
<I18nMessage
tokens={{
download_url: <Button label={__('lbry.com')} button="link" href="https://lbry.com/get" />,
}}
>
You can download the LBRY Desktop or Android app on %download_url% and enable mature content in
Settings.
</I18nMessage>
</>
)}
</div>
</div> </div>
) : ( </div>
<div className="section"> ) : (
<ClaimAuthor channelSubCount={subCount} uri={uri} /> <>
<FileDescription uri={uri} /> <ClaimAuthor channelSubCount={subCount} uri={uri} />
</div> <FileDescription uri={uri} />
) </>
} )
/> }
</> />
); );
} }
export default FileTitleSection;

10
ui/util/claim.js
View file

@ -108,3 +108,13 @@ export function getChannelFromClaim(claim: ?Claim) {
? claim.signing_channel ? claim.signing_channel
: null; : null;
} }
export function getClaimMetadata(claim: ?Claim) {
const metadata = claim && claim.value;
return metadata || (claim === undefined ? undefined : null);
}
export function getClaimTitle(claim: ?Claim) {
const metadata = getClaimMetadata(claim);
return metadata && metadata.title;
}