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 { doFetchSubCount, selectSubCountForUri } from 'lbryinc';
import { selectTitleForUri, selectClaimForUri } from 'redux/selectors/claims';
import { selectInsufficientCreditsForUri } from 'redux/selectors/content';
import { selectClaimForUri } from 'redux/selectors/claims';
import FileTitleSection from './view';
import { getClaimTitle } from 'util/claim';
const select = (state, props) => {
const claim = selectClaimForUri(state, props.uri);
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 subCount = channelUri && selectSubCountForUri(state, channelUri);
const { uri } = props;
const claim = selectClaimForUri(state, uri);
const { signing_channel: channel } = claim || {};
const channelUri = channel && channel.canonical_url;
const channelClaimId = channel && channel.claim_id;
const title = getClaimTitle(claim);
return {
isInsufficientCredits: selectInsufficientCreditsForUri(state, props.uri),
title: selectTitleForUri(state, props.uri),
subCount: channelUri && selectSubCountForUri(state, channelUri),
channelClaimId,
subCount,
title,
};
};
const perform = (dispatch) => ({
fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
});
const perform = {
doFetchSubCount,
};
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 = {
uri: string,
title: string,
nsfw: boolean,
isNsfwBlocked: boolean,
livestream?: boolean,
isLive?: boolean,
subCount: number,
// redux
channelClaimId?: string,
fetchSubCount: (string) => void,
title?: string,
subCount: number,
doFetchSubCount: (claimId: string) => void,
};
function FileTitleSection(props: Props) {
export default function FileTitleSection(props: Props) {
const {
title,
uri,
nsfw,
isNsfwBlocked,
@ -36,92 +36,74 @@ function FileTitleSection(props: Props) {
isLive = false,
subCount,
channelClaimId,
fetchSubCount,
title,
doFetchSubCount,
} = props;
React.useEffect(() => {
if (channelClaimId) {
fetchSubCount(channelClaimId);
}
}, [channelClaimId, fetchSubCount]);
if (channelClaimId) doFetchSubCount(channelClaimId);
}, [channelClaimId, doFetchSubCount]);
return (
<>
<Card
isPageTitle
noTitleWrap
title={
<React.Fragment>
{title}
{nsfw && (
<span className="media__title-badge">
<span className="badge badge--tag-mature">{__('Mature')}</span>
</span>
)}
</React.Fragment>
}
titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
body={
<React.Fragment>
<ClaimInsufficientCredits uri={uri} />
<FileSubtitle uri={uri} isLive={isLive} livestream={livestream} />
</React.Fragment>
}
actions={
isNsfwBlocked ? (
<div className="main--empty">
<h2>
{!ENABLE_MATURE && (
<>
<Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
{__('Mature content is not supported.')}
</>
)}
{ENABLE_MATURE && (
<>
<Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
{__('Mature content blocked.')}
</>
)}
</h2>
<div>
{ENABLE_MATURE && (
<>
<I18nMessage
tokens={{
content_settings: (
<Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
),
}}
>
Change this in your %content_settings%.
</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>
<Card
isPageTitle
noTitleWrap
title={
<>
{title}
{nsfw && (
<span className="media__title-badge">
<span className="badge badge--tag-mature">{__('Mature')}</span>
</span>
)}
</>
}
titleActions={<FilePrice uri={normalizeURI(uri)} type="filepage" />}
body={
<>
<ClaimInsufficientCredits uri={uri} />
<FileSubtitle uri={uri} isLive={isLive} livestream={livestream} />
</>
}
actions={
isNsfwBlocked ? (
<div className="main--empty">
<h2>
<>
<Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
{ENABLE_MATURE ? __('Mature content blocked.') : __('Mature content is not supported.')}
</>
</h2>
<div>
{ENABLE_MATURE ? (
<I18nMessage
tokens={{
content_settings: (
<Button button="link" label={__('content settings')} navigate={`/$/${PAGES.SETTINGS}`} />
),
}}
>
Change this in your %content_settings%.
</I18nMessage>
) : (
<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 className="section">
<ClaimAuthor channelSubCount={subCount} uri={uri} />
<FileDescription uri={uri} />
</div>
)
}
/>
</>
</div>
) : (
<>
<ClaimAuthor channelSubCount={subCount} uri={uri} />
<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
: 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;
}