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

42
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,20 +35,18 @@ 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();
render() { }, [uri]);
const { recommendedContent, isSearching, isAuthenticated } = this.props;
return ( return (
<Card <Card
isBodyList isBodyList
smallTitle smallTitle={!isMobile && !isMedium}
className="file-page__recommended" className="file-page__recommended"
title={__('Related')} title={__('Related')}
body={ body={
@ -83,4 +62,3 @@ export default class RecommendedContent extends React.PureComponent<Props> {
/> />
); );
} }
}