From 0ab5ca080e41a95718185858c08ba8d33c4255fc Mon Sep 17 00:00:00 2001
From: infiinte-persistence <inf.persistence@gmail.com>
Date: Sat, 25 Jul 2020 17:03:22 +0800
Subject: [PATCH] Fix 'Related' being loaded on Autoplay despite not visible.

## Issue
In the `Autoplay` case, if the `WaitUntilOnPage` has already opened the gates previously, the next video's Related will be loaded regardless of scroll position.

## Changes
Add a `lastUpdateDate` prop to `WaitUntilOnPage` to allow the parent to reset the gating state.

I don't really like the `lastUpdateDate` prop since it's purpose is not intuitive. Is there a standard way to do a "one-time trigger" from the parent?
---
 ui/component/common/wait-until-on-page.jsx | 5 +++++
 ui/component/recommendedContent/view.jsx   | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/ui/component/common/wait-until-on-page.jsx b/ui/component/common/wait-until-on-page.jsx
index 1f2b822ec..d66bfb125 100644
--- a/ui/component/common/wait-until-on-page.jsx
+++ b/ui/component/common/wait-until-on-page.jsx
@@ -6,12 +6,17 @@ const DEBOUNCE_SCROLL_HANDLER_MS = 300;
 
 type Props = {
   children: any,
+  lastUpdateDate?: any,
 };
 
 export default function WaitUntilOnPage(props: Props) {
   const ref = React.useRef();
   const [shouldRender, setShouldRender] = React.useState(false);
 
+  React.useEffect(() => {
+    setShouldRender(false);
+  }, [props.lastUpdateDate]);
+
   React.useEffect(() => {
     const handleDisplayingRef = debounce(e => {
       const element = ref && ref.current;
diff --git a/ui/component/recommendedContent/view.jsx b/ui/component/recommendedContent/view.jsx
index 35e13e575..191572c3a 100644
--- a/ui/component/recommendedContent/view.jsx
+++ b/ui/component/recommendedContent/view.jsx
@@ -25,6 +25,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
     super();
 
     this.didSearch = undefined;
+    this.lastReset = undefined;
   }
 
   componentDidMount() {
@@ -36,6 +37,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
 
     if (uri !== prevProps.uri) {
       this.didSearch = false;
+      this.lastReset = Date.now();
     }
 
     if (claim && !this.didSearch) {
@@ -60,6 +62,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
   }
 
   didSearch: ?boolean;
+  lastReset: ?any;
 
   render() {
     const { recommendedContent, isSearching, isAuthenticated } = this.props;
@@ -69,7 +72,7 @@ export default class RecommendedContent extends React.PureComponent<Props> {
         isBodyList
         title={__('Related')}
         body={
-          <WaitUntilOnPage>
+          <WaitUntilOnPage lastUpdateDate={this.lastReset}>
             <ClaimList
               isCardBody
               type="small"