From c0ce87b6f65bf0ab1301c7ca61090d779709529f Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Thu, 12 Nov 2020 08:31:29 +0000
Subject: [PATCH] fix(frontend): when there were no results in the list view,
 it would call fetch more infinitely

---
 src/components/Common/ListView/index.tsx             | 5 ++++-
 src/components/Discover/DiscoverMovies.tsx           | 7 ++++++-
 src/components/Discover/DiscoverTv.tsx               | 7 ++++++-
 src/components/MovieDetails/MovieRecommendations.tsx | 7 ++++++-
 src/components/MovieDetails/MovieSimilar.tsx         | 7 ++++++-
 src/components/Search/index.tsx                      | 7 ++++++-
 src/components/TvDetails/TvRecommendations.tsx       | 7 ++++++-
 src/components/TvDetails/TvSimilar.tsx               | 7 ++++++-
 8 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/components/Common/ListView/index.tsx b/src/components/Common/ListView/index.tsx
index 62076c017..8f757f4fb 100644
--- a/src/components/Common/ListView/index.tsx
+++ b/src/components/Common/ListView/index.tsx
@@ -12,6 +12,7 @@ interface ListViewProps {
   items?: (TvResult | MovieResult | PersonResult)[];
   isEmpty?: boolean;
   isLoading?: boolean;
+  isReachingEnd?: boolean;
   onScrollBottom: () => void;
 }
 
@@ -20,8 +21,9 @@ const ListView: React.FC<ListViewProps> = ({
   isEmpty,
   isLoading,
   onScrollBottom,
+  isReachingEnd,
 }) => {
-  useVerticalScroll(onScrollBottom, !isLoading);
+  useVerticalScroll(onScrollBottom, !isLoading && !isEmpty && !isReachingEnd);
   return (
     <>
       {isEmpty && (
@@ -79,6 +81,7 @@ const ListView: React.FC<ListViewProps> = ({
           );
         })}
         {isLoading &&
+          !isReachingEnd &&
           [...Array(10)].map((_item, i) => (
             <li
               key={`placeholder-${i}`}
diff --git a/src/components/Discover/DiscoverMovies.tsx b/src/components/Discover/DiscoverMovies.tsx
index 5a814976d..6a2660dc0 100644
--- a/src/components/Discover/DiscoverMovies.tsx
+++ b/src/components/Discover/DiscoverMovies.tsx
@@ -49,6 +49,10 @@ const DiscoverMovies: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -60,10 +64,11 @@ const DiscoverMovies: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
+        isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}
       />
     </>
diff --git a/src/components/Discover/DiscoverTv.tsx b/src/components/Discover/DiscoverTv.tsx
index 8c0bc86ba..e1c9cea37 100644
--- a/src/components/Discover/DiscoverTv.tsx
+++ b/src/components/Discover/DiscoverTv.tsx
@@ -46,6 +46,10 @@ const DiscoverTv: React.FC = () => {
 
   const titles = data?.reduce((a, v) => [...a, ...v.results], [] as TvResult[]);
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -57,7 +61,8 @@ const DiscoverTv: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
diff --git a/src/components/MovieDetails/MovieRecommendations.tsx b/src/components/MovieDetails/MovieRecommendations.tsx
index 66fbf5a6e..26147bbb6 100644
--- a/src/components/MovieDetails/MovieRecommendations.tsx
+++ b/src/components/MovieDetails/MovieRecommendations.tsx
@@ -46,6 +46,10 @@ const MovieRecommendations: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -57,7 +61,8 @@ const MovieRecommendations: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
diff --git a/src/components/MovieDetails/MovieSimilar.tsx b/src/components/MovieDetails/MovieSimilar.tsx
index 19ddbb732..f5796f55c 100644
--- a/src/components/MovieDetails/MovieSimilar.tsx
+++ b/src/components/MovieDetails/MovieSimilar.tsx
@@ -46,6 +46,10 @@ const MovieSimilar: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -57,10 +61,11 @@ const MovieSimilar: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
+        isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}
       />
     </>
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 41f9cf4c6..47a4c77ca 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -52,6 +52,10 @@ const Search: React.FC = () => {
     [] as (MovieResult | TvResult | PersonResult)[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -79,10 +83,11 @@ const Search: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
+        isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}
       />
     </>
diff --git a/src/components/TvDetails/TvRecommendations.tsx b/src/components/TvDetails/TvRecommendations.tsx
index 64086188c..a98344f0d 100644
--- a/src/components/TvDetails/TvRecommendations.tsx
+++ b/src/components/TvDetails/TvRecommendations.tsx
@@ -45,6 +45,10 @@ const TvRecommendations: React.FC = () => {
 
   const titles = data?.reduce((a, v) => [...a, ...v.results], [] as TvResult[]);
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -56,7 +60,8 @@ const TvRecommendations: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
diff --git a/src/components/TvDetails/TvSimilar.tsx b/src/components/TvDetails/TvSimilar.tsx
index 566843fc0..d96056104 100644
--- a/src/components/TvDetails/TvSimilar.tsx
+++ b/src/components/TvDetails/TvSimilar.tsx
@@ -48,6 +48,10 @@ const TvSimilar: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -59,7 +63,8 @@ const TvSimilar: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }