From b9fd01d7b3ded85d87307c5e9cb3c91c3f4e8bc2 Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Tue, 25 Aug 2020 09:49:19 -0400
Subject: [PATCH] fix 'Related' title size on small/medium screens

---
 ui/component/recommendedContent/view.jsx | 76 +++++++++---------------
 1 file changed, 27 insertions(+), 49 deletions(-)

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