fix(ott-2850): remove changes from video tab

src/features/MatchSidePlaylists/components/TabVideo/index.tsx

@@ -19,7 +19,6 @@ import { usePageParams } from 'hooks/usePageParams'
 
 import { VideoDate } from './components/VideoDate'
 import { MatchesWrapper } from './styled'
-import { useScroll } from '../../useScroll'
 
 type Props = {
   profile: MatchInfo,
@@ -40,8 +39,6 @@ export const TabVideo = ({
 
   const [selectedDate, setSelectedDate] = useState(profileDate)
 
-  const { hasScroll, ref } = useScroll([selectedDate])
-
   const matches = useMemo(() => (
     tournamentData.matches.filter((match) => (
       formatDate(match.date) === selectedDate && match.id !== profileId
@@ -73,10 +70,7 @@ export const TabVideo = ({
         profileDate={profileDate}
         onDateClick={setSelectedDate}
       />
-      <MatchesWrapper
+      <MatchesWrapper>
-        hasScroll={hasScroll}
-        ref={ref}
-      >
         {
           map(sortBy(matches, ({ live }) => !live), (match) => (
             <MatchCard

src/features/MatchSidePlaylists/components/TabVideo/styled.tsx

@@ -2,14 +2,10 @@ import styled, { css } from 'styled-components/macro'
 import { customScrollbar } from 'features/Common'
 import { isMobileDevice } from '../../../../config/userAgent'
 
-type TMatchesWrapper = {
+export const MatchesWrapper = styled.div`
-  hasScroll: boolean,
-}
-
-export const MatchesWrapper = styled.div<TMatchesWrapper>`
   overflow-y: auto;
   max-height: calc(100vh - 170px);
-  ${({ hasScroll }) => (hasScroll ? css`padding-right: 5px;` : '')}
+  padding-right: 5px;
 
   > * {
     margin-bottom: 15px;

src/features/MatchSidePlaylists/index.tsx

@@ -1,4 +1,8 @@
-import { useRef } from 'react'
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 
 import type { PlaylistOption } from 'features/MatchPage/types'
 import { Tab, TabsGroup } from 'features/Common'
@@ -14,7 +18,6 @@ import { TabEvents } from './components/TabEvents'
 import { TabWatch } from './components/TabWatch'
 import { TabVideo } from './components/TabVideo'
 import { useMatchSidePlaylists } from './hooks'
-import { useScroll } from './useScroll'
 import {
   Wrapper,
   TabsWrapper,
@@ -54,13 +57,25 @@ export const MatchSidePlaylists = ({
 
   const TabPane = tabPanes[selectedTab]
 
-  const { hasScroll, ref } = useScroll([
+  const containerRef = useRef<HTMLDivElement | null>(null)
+  const tabPaneContainerRef = useRef<HTMLDivElement | null>(null)
+
+  const [hasTabPaneScroll, setTabPaneScroll] = useState(false)
+
+  useEffect(() => {
+    const {
+      clientHeight = 0,
+      scrollHeight = 0,
+    } = tabPaneContainerRef.current || {}
+    const hasScroll = scrollHeight > clientHeight
+
+    setTabPaneScroll(hasScroll)
+  }, [
     playlists,
     selectedTab,
+    tabPaneContainerRef,
   ])
 
-  const containerRef = useRef<HTMLDivElement | null>(null)
-
   useEventListener({
     callback: () => {
       const screenLandscape = isIOS ? window.orientation : window.screen.orientation.type
@@ -108,8 +123,8 @@ export const MatchSidePlaylists = ({
 
       </TabsWrapper>
       <Container
-        hasScroll={hasScroll}
+        hasScroll={hasTabPaneScroll}
-        ref={ref}
+        ref={tabPaneContainerRef}
         forVideoTab={selectedTab === Tabs.VIDEO}
       >
         <TabPane

src/features/MatchSidePlaylists/useScroll.tsx

@@ -1,27 +0,0 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-
-export const useScroll = (deps: any) => {
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  const [hasRefScroll, setRefScroll] = useState(false)
-
-  useEffect(() => {
-    const {
-      clientHeight = 0,
-      scrollHeight = 0,
-    } = ref.current || {}
-    const hasScroll = scrollHeight > clientHeight
-
-    setRefScroll(hasScroll)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref, ...deps])
-
-  return {
-    hasScroll: hasRefScroll,
-    ref,
-  }
-}