diff --git a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx b/src/features/MatchSidePlaylists/components/TabVideo/index.tsx index dcfe083d..92248928 100644 --- a/src/features/MatchSidePlaylists/components/TabVideo/index.tsx +++ b/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} /> - + { map(sortBy(matches, ({ live }) => !live), (match) => ( ` +export const MatchesWrapper = styled.div` overflow-y: auto; max-height: calc(100vh - 170px); - ${({ hasScroll }) => (hasScroll ? css`padding-right: 5px;` : '')} + padding-right: 5px; > * { margin-bottom: 15px; diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx index 27bbe8bf..f4eb1acb 100644 --- a/src/features/MatchSidePlaylists/index.tsx +++ b/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(null) + const tabPaneContainerRef = useRef(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(null) - useEventListener({ callback: () => { const screenLandscape = isIOS ? window.orientation : window.screen.orientation.type @@ -108,8 +123,8 @@ export const MatchSidePlaylists = ({ { - const ref = useRef(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, - } -}