LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix 'Related' title size on small/medium screens

Browse source
This commit is contained in:
Sean Yesmunt 2020-08-25 09:49:19 -04:00
parent 22586c802c
commit b9fd01d7b3
1 changed files with 27 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
ui/component/recommendedContent/view.jsx
View file

@ -4,6 +4,7 @@ import React from 'react';
import ClaimList from 'component/claimList'; import ClaimList from 'component/claimList';
import Ads from 'web/component/ads'; import Ads from 'web/component/ads';
import Card from 'component/common/card'; import Card from 'component/common/card';
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
type Options = { type Options = {
related_to: string, related_to: string,
@ -20,32 +21,12 @@ type Props = {
isAuthenticated: boolean, isAuthenticated: boolean,
}; };
export default class RecommendedContent extends React.PureComponent<Props> { export default function RecommendedContent(props: Props) {
constructor() { const { uri, claim, search, mature, recommendedContent, isSearching, isAuthenticated } = props;
super(); const isMobile = useIsMobile();
const isMedium = useIsMediumScreen();
this.didSearch = undefined;
}
componentDidMount() {
this.getRecommendedContent();
}
componentDidUpdate(prevProps: Props) {
const { claim, uri } = this.props;
if (uri !== prevProps.uri) {
this.didSearch = false;
}
if (claim && !this.didSearch) {
this.getRecommendedContent();
}
}
getRecommendedContent() {
const { claim, search, mature } = this.props;
function getRecommendedContent() {
if (claim && claim.value && claim.claim_id) { if (claim && claim.value && claim.claim_id) {
const options: Options = { size: 20, related_to: claim.claim_id, isBackgroundSearch: true }; const options: Options = { size: 20, related_to: claim.claim_id, isBackgroundSearch: true };
if (claim && !mature) { if (claim && !mature) {
@ -54,33 +35,30 @@ export default class RecommendedContent extends React.PureComponent<Props> {
const { title } = claim.value; const { title } = claim.value;
if (title && options) { if (title && options) {
search(title, options); search(title, options);
this.didSearch = true;
} }
} }
} }
didSearch: ?boolean; React.useEffect(() => {
getRecommendedContent();
}, [uri]);
render() { return (
const { recommendedContent, isSearching, isAuthenticated } = this.props; <Card
isBodyList
return ( smallTitle={!isMobile && !isMedium}
<Card className="file-page__recommended"
isBodyList title={__('Related')}
smallTitle body={
className="file-page__recommended" <ClaimList
title={__('Related')} isCardBody
body={ type="small"
<ClaimList loading={isSearching}
isCardBody uris={recommendedContent}
type="small" injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads type="video" small />}
loading={isSearching} empty={__('No related content found')}
uris={recommendedContent} />
injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads type="video" small />} }
empty={__('No related content found')} />
/> );
}
/>
);
}
} }