From b5fe367a4f0f5018a86ec3e4283c874fb11ccfa9 Mon Sep 17 00:00:00 2001
From: nevainero <nevainero@gmail.com>
Date: Fri, 6 May 2022 16:21:02 +0300
Subject: [PATCH] fix(ott-2416): fix fetch matches in mobile version

---
 src/features/Matches/hooks.tsx |  5 +++--
 src/features/Matches/index.tsx | 31 +++++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/features/Matches/hooks.tsx b/src/features/Matches/hooks.tsx
index c5c8f376..cce5cacb 100644
--- a/src/features/Matches/hooks.tsx
+++ b/src/features/Matches/hooks.tsx
@@ -11,6 +11,7 @@ import type { MatchesBySection } from 'requests'
 import { useRequest } from 'hooks'
 
 import { usePreferencesStore } from 'features/PreferencesPopup'
+import { isMobileDevice } from 'config/userAgent'
 
 import { prepareMatches } from './helpers/prepareMatches'
 
@@ -20,7 +21,7 @@ export type Props = {
   fetch: (limit: number, offset: number) => Promise<MatchesBySection>,
 }
 
-const MATCHES_LIMIT = 60
+const MATCHES_LIMIT = isMobileDevice ? 1000 : 60
 
 const initialState = {
   broadcast: [],
@@ -78,7 +79,7 @@ export const useMatches = ({ fetch }: Props) => {
   }), [matches])
 
   return {
-    fetchMoreMatches,
+    fetchMoreMatches: isMobileDevice ? fetchMoreMatches : () => {},
     isFetching,
     matches: preparedMatches,
   }
diff --git a/src/features/Matches/index.tsx b/src/features/Matches/index.tsx
index eba472da..7d779f63 100644
--- a/src/features/Matches/index.tsx
+++ b/src/features/Matches/index.tsx
@@ -1,7 +1,9 @@
-import { Fragment } from 'react'
+import { Fragment, useMemo } from 'react'
 
 import { T9n } from 'features/T9n'
 import { InfiniteScroll } from 'features/InfiniteScroll'
+import { Loader } from 'features/Loader'
+import { isMobileDevice } from 'config/userAgent'
 
 import type { Props } from './hooks'
 import { useMatches } from './hooks'
@@ -22,6 +24,27 @@ export const Matches = (props: Props) => {
     },
   } = useMatches(props)
 
+  const mobileView = useMemo(() => (
+    isFetching ? (
+      <Loader color='white' />
+    ) : (
+      <MatchesList
+        as='grid'
+        matches={broadcast}
+      />
+    )
+  ), [isFetching, broadcast])
+
+  const desktopView = useMemo(() => (
+    <>
+      <MatchesList
+        as='grid'
+        matches={broadcast}
+      />
+      {isFetching && <Loading><T9n t='loading' />...</Loading>}
+    </>
+  ), [isFetching, broadcast])
+
   if (isVideoSections) {
     return (
       <Fragment>
@@ -46,11 +69,7 @@ export const Matches = (props: Props) => {
 
   return (
     <InfiniteScroll fullPageScroll onFetchMore={fetchMoreMatches}>
-      <MatchesList
-        as='grid'
-        matches={broadcast}
-      />
-      {isFetching && <Loading><T9n t='loading' />...</Loading>}
+      {isMobileDevice ? mobileView : desktopView}
     </InfiniteScroll>
   )
 }