From 18cc2b31eb978a659a037ead17f41a82750dab2a Mon Sep 17 00:00:00 2001
From: Margarita <margarita.polyakova@instatsport.com>
Date: Tue, 4 Jul 2023 17:58:53 +0300
Subject: [PATCH] feat(in-565): pr fixes

---
 .../Ads/components/AdComponent/hooks.tsx      |  2 +-
 .../Ads/components/AdComponent/index.tsx      | 10 ++++--
 .../Ads/components/MobileAd/index.tsx         | 12 +++++--
 .../Ads/components/MobileAd/styled.tsx        | 15 ++++-----
 src/components/Ads/index.tsx                  |  2 +-
 src/components/Ads/types.tsx                  |  4 ++-
 src/features/HomePage/index.tsx               |  4 +--
 src/features/MatchPage/index.tsx              | 33 ++++++++-----------
 src/features/MatchPage/store/hooks/index.tsx  |  4 +--
 .../components/EventsList/index.tsx           |  9 +++--
 .../components/MatchPlaylists/index.tsx       |  2 +-
 .../components/TabWatch/index.tsx             |  4 +--
 src/features/MatchSidePlaylists/index.tsx     | 14 ++------
 src/features/MatchesGrid/index.tsx            |  4 +--
 src/features/StreamPlayer/index.tsx           |  8 ++---
 .../components/TournamentMobile/index.tsx     |  8 ++---
 src/hooks/index.tsx                           |  1 +
 src/hooks/useScreenOrientation.tsx            | 14 ++++++++
 18 files changed, 82 insertions(+), 68 deletions(-)
 create mode 100644 src/hooks/useScreenOrientation.tsx

diff --git a/src/components/Ads/components/AdComponent/hooks.tsx b/src/components/Ads/components/AdComponent/hooks.tsx
index 04386a4d..de130741 100644
--- a/src/components/Ads/components/AdComponent/hooks.tsx
+++ b/src/components/Ads/components/AdComponent/hooks.tsx
@@ -70,7 +70,7 @@ export const useAd = ({ ad }: AdComponentType) => {
     currentAdsTime,
   ])
 
-  const handleClose = async () => {
+  const handleClose = () => {
     setIsOpenAd(false)
     isMatchPage() && setIsNeedToShow(false)
     sendBannerClickEvent(EventGA.CLOSE)
diff --git a/src/components/Ads/components/AdComponent/index.tsx b/src/components/Ads/components/AdComponent/index.tsx
index d5dfd302..790eeb6a 100644
--- a/src/components/Ads/components/AdComponent/index.tsx
+++ b/src/components/Ads/components/AdComponent/index.tsx
@@ -1,7 +1,10 @@
-import { memo, MouseEvent } from 'react'
+import type { MouseEvent } from 'react'
+import { memo } from 'react'
 
 import type { AdType } from 'requests'
 
+import { useLexicsStore } from 'features/LexicsStore'
+
 import { useAd } from './hooks'
 
 import { EventGA } from '../../types'
@@ -33,9 +36,11 @@ export const AdComponent = memo(({ ad }: AdComponentType) => {
     sendBannerClickEvent,
   } = useAd({ ad })
 
+  const { suffix } = useLexicsStore()
+
   const close = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
-    return handleClose()
+    handleClose()
   }
 
   const onLinkClick = () => {
@@ -76,6 +81,7 @@ export const AdComponent = memo(({ ad }: AdComponentType) => {
                 <AdImg
                   src={media.url}
                   position={position.id}
+                  alt={`name_${suffix}`}
                 />
               )}
           </LinkWrapper>
diff --git a/src/components/Ads/components/MobileAd/index.tsx b/src/components/Ads/components/MobileAd/index.tsx
index 72726a35..4fc72105 100644
--- a/src/components/Ads/components/MobileAd/index.tsx
+++ b/src/components/Ads/components/MobileAd/index.tsx
@@ -4,6 +4,8 @@ import includes from 'lodash/includes'
 
 import type { AdType } from 'requests'
 
+import { useLexicsStore } from 'features/LexicsStore'
+
 import { useAd } from '../AdComponent/hooks'
 import { EventGA, PLAYER_MOBILE_FULL_SCREEN } from '../../types'
 
@@ -25,6 +27,8 @@ export const MobileAd = ({ ad }: MobileAdTypes) => {
     position,
   } = ad
 
+  const { suffix } = useLexicsStore()
+
   const {
     handleClose,
     isNeedToShow,
@@ -36,7 +40,7 @@ export const MobileAd = ({ ad }: MobileAdTypes) => {
 
   const close = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation()
-    return handleClose()
+    handleClose()
   }
 
   const onLinkClick = () => {
@@ -63,7 +67,11 @@ export const MobileAd = ({ ad }: MobileAdTypes) => {
         {isVideo
           ? <Video position={position.id} src={media.url} />
           : (
-            <Img position={position.id} src={media.url} />
+            <Img
+              position={position.id}
+              src={media.url}
+              alt={`name_${suffix}`}
+            />
           )}
       </MobileAdWrapper>
     ) : null
diff --git a/src/components/Ads/components/MobileAd/styled.tsx b/src/components/Ads/components/MobileAd/styled.tsx
index 49b5a212..8be5ded7 100644
--- a/src/components/Ads/components/MobileAd/styled.tsx
+++ b/src/components/Ads/components/MobileAd/styled.tsx
@@ -8,31 +8,30 @@ import {
   MATCH_ADS,
   PLAYER_MOBILE_FULL_SCREEN,
   PLAYER_MOBILE_ADS,
+  MATCH_PAGE_MOBILE_ADS,
 } from '../../types'
 
 type Props = {
   position: number,
 }
 
-const matchMobileAds = [16, 17, 22, 23, 24]
-
 const chooseStyle = (type: number) => {
-  switch (true) {
-    case MATCH_ADS.PLAYS_BOTTOM_MOBILE === type:
+  switch (type) {
+    case MATCH_ADS.PLAYS_BOTTOM_MOBILE:
       return css`
         grid-row: 4; 
         margin-bottom: 12px; 
         height: 48px;
       `
-    case PLAYER_MOBILE_ADS === type:
+    case PLAYER_MOBILE_ADS:
       return css`
         position: absolute;
         width: 92%; 
         bottom: 50px; 
         left: 15px;
       `
-    case PLAYER_MOBILE_FULL_SCREEN.VERTICAL_FULL_SCREEN === type:
-    case PLAYER_MOBILE_FULL_SCREEN.HORIZONTAL_FULL_SCREEN === type:
+    case PLAYER_MOBILE_FULL_SCREEN.VERTICAL_FULL_SCREEN:
+    case PLAYER_MOBILE_FULL_SCREEN.HORIZONTAL_FULL_SCREEN:
       return css`
         position: absolute;
         top: 0;
@@ -84,7 +83,7 @@ export const Img = styled.img<Props>`
     switch (true) {
       case position === 10:
         return '50px'
-      case includes(matchMobileAds, position):
+      case includes(MATCH_PAGE_MOBILE_ADS, position):
         return '100%'
       default:
         return '75px'
diff --git a/src/components/Ads/index.tsx b/src/components/Ads/index.tsx
index f2064a14..3123c802 100644
--- a/src/components/Ads/index.tsx
+++ b/src/components/Ads/index.tsx
@@ -2,8 +2,8 @@ import type { AdType } from 'requests'
 
 import { isMobileDevice } from 'config'
 
+import type { AdsPropsType } from './types'
 import { AdComponent } from './components/AdComponent'
-import { AdsPropsType } from './types'
 import { MobileAd } from './components/MobileAd'
 
 import {
diff --git a/src/components/Ads/types.tsx b/src/components/Ads/types.tsx
index 9f1688eb..a8d7205a 100644
--- a/src/components/Ads/types.tsx
+++ b/src/components/Ads/types.tsx
@@ -1,4 +1,4 @@
-import { AdsListType } from 'requests'
+import type { AdsListType } from 'requests'
 
 export enum PageType {
   HOME = 1,
@@ -52,6 +52,8 @@ export enum PLAYER_MOBILE_FULL_SCREEN {
   HORIZONTAL_FULL_SCREEN = 24,
 }
 
+export const MATCH_PAGE_MOBILE_ADS = [16, 17, 22, 23, 24]
+
 export type AdsPropsType = Record<'ads', AdsListType | undefined>
 
 export const adsViews = 'adsViews'
diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx
index 74b5f424..49eec031 100644
--- a/src/features/HomePage/index.tsx
+++ b/src/features/HomePage/index.tsx
@@ -55,8 +55,8 @@ const Home = () => {
             && (
               <HeaderAds ads={
                 isMobileDevice
-                  ? ads?.mobile?.filter(({ position }) => HEADER_MOBILE_ADS.includes(position.id))
-                  : ads?.header
+                  ? ads.mobile?.filter(({ position }) => HEADER_MOBILE_ADS.includes(position.id))
+                  : ads.header
               }
               />
             )}
diff --git a/src/features/MatchPage/index.tsx b/src/features/MatchPage/index.tsx
index 397a858d..f8da4745 100644
--- a/src/features/MatchPage/index.tsx
+++ b/src/features/MatchPage/index.tsx
@@ -1,8 +1,4 @@
-import {
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import { useEffect, useMemo } from 'react'
 import { useHistory } from 'react-router'
 
 import { useTour } from '@reactour/tour'
@@ -28,7 +24,11 @@ import {
   isMobileDevice,
 } from 'config'
 
-import { usePageLogger, usePageParams } from 'hooks'
+import {
+  useScreenOrientation,
+  usePageLogger,
+  usePageParams,
+} from 'hooks'
 
 import { checkUrlParams } from 'helpers/parseUrlParams/parseUrlParams'
 
@@ -46,6 +46,7 @@ import { Wrapper } from './styled'
 const MatchPageComponent = () => {
   usePageLogger()
   const history = useHistory()
+  const orientation = useScreenOrientation()
   const { addRemoveFavorite, userFavorites } = useUserFavoritesStore()
   const { colors } = useTheme()
 
@@ -111,20 +112,14 @@ const MatchPageComponent = () => {
     history.push(`/${sportName}/tournaments/${profile.tournament.id}`)
   }
 
-  const [orientation, setOrientation] = useState(window.orientation)
+  const currentOrientation = orientation === 0
+    ? VERTICAL_FULL_SCREEN
+    : HORIZONTAL_FULL_SCREEN
 
-  useEffect(() => {
-    const handleOrientationChange = () => setOrientation(window.orientation)
-    window.addEventListener('orientationchange', handleOrientationChange)
-    return () => window.removeEventListener('orientationchange', handleOrientationChange)
-  }, [])
-
-  const currentAds = useMemo(() => (
-    window.orientation === 0
-      ? find(ads.mobile, (ad) => ad.position.id === VERTICAL_FULL_SCREEN)
-      : find(ads.mobile, (ad) => ad.position.id === HORIZONTAL_FULL_SCREEN)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  ), [ads.mobile, orientation])
+  const currentAds = useMemo(
+    () => (find(ads, (ad) => ad.position.id === currentOrientation)),
+    [ads, currentOrientation],
+  )
 
   return (
     <PageWrapper
diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx
index f77da066..96ccef89 100644
--- a/src/features/MatchPage/store/hooks/index.tsx
+++ b/src/features/MatchPage/store/hooks/index.tsx
@@ -9,7 +9,7 @@ import includes from 'lodash/includes'
 import filter from 'lodash/filter'
 import isEmpty from 'lodash/isEmpty'
 
-import { PAGES } from 'config'
+import { isMobileDevice, PAGES } from 'config'
 
 import { useAuthStore } from 'features/AuthStore'
 import { Tabs } from 'features/MatchSidePlaylists/config'
@@ -410,7 +410,7 @@ export const useMatchPage = () => {
     activeFirstTeamPlayers,
     activeSecondTeamPlayers,
     activeStatus,
-    ads,
+    ads: isMobileDevice ? ads.mobile : ads.match,
     allActionsToggle,
     allPlayersToggle,
     applyFilters,
diff --git a/src/features/MatchSidePlaylists/components/EventsList/index.tsx b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
index d7c70c28..aa09063f 100644
--- a/src/features/MatchSidePlaylists/components/EventsList/index.tsx
+++ b/src/features/MatchSidePlaylists/components/EventsList/index.tsx
@@ -64,6 +64,7 @@ export const EventsList = ({
   const { suffix, translate } = useLexicsStore()
 
   const { PLAYS_BOTTOM, PLAYS_BOTTOM_MOBILE } = MATCH_ADS
+  const adsPositionId = isMobileDevice ? PLAYS_BOTTOM_MOBILE : PLAYS_BOTTOM
 
   useEffect(() => {
     if (selectedPlaylist?.tab === Tabs.EVENTS && isPlayingEpisode) {
@@ -99,12 +100,10 @@ export const EventsList = ({
     <List>
       {ads
         && isFirstBlock
+        && map(ads, (ad: AdType) => ad?.position.id === adsPositionId
         && (isMobileDevice
-          ? map(ads?.mobile, (ad: AdType) => ad?.position.id === PLAYS_BOTTOM_MOBILE
-              && <MobileAd ad={ad} key={ad.id} />)
-          : map(ads?.match, (ad: AdType) => ad?.position.id === PLAYS_BOTTOM
-              && <AdComponent ad={ad} key={ad.id} />)
-        )}
+          ? <MobileAd ad={ad} key={ad.id} />
+          : <AdComponent ad={ad} key={ad.id} />))}
       {map(events, (event) => {
         if (!event.t && !event.pl) {
           return (
diff --git a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
index 10848015..b66725a6 100644
--- a/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx
@@ -85,7 +85,7 @@ export const MatchPlaylists = forwardRef(
     return (
       <List
         ref={ref}
-        isAdsExist={some(ads?.match, ({ position }) => position.id === MATCH_ADS.WATCH_TOP)}
+        isAdsExist={some(ads, ({ position }) => position.id === MATCH_ADS.WATCH_TOP)}
       >
         {
           map(playlists, (playlist) => (
diff --git a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
index e975abbb..82da43d6 100644
--- a/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
+++ b/src/features/MatchSidePlaylists/components/TabWatch/index.tsx
@@ -8,7 +8,7 @@ import size from 'lodash/size'
 import filter from 'lodash/filter'
 import map from 'lodash/map'
 
-import { isMobileDevice } from 'config/userAgent'
+import { isMobileDevice } from 'config'
 
 import type {
   PlaylistOption,
@@ -68,7 +68,7 @@ export const TabWatch = ({
       {!isMobileDevice
         && ads
         && (
-          map(ads?.match, (ad: AdType) => ad?.position.id === MATCH_ADS.WATCH_TOP
+          map(ads, (ad: AdType) => ad?.position.id === MATCH_ADS.WATCH_TOP
             && <AdComponent ad={ad} key={ad.id} />)
         )}
       <DropdownSection
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
index f0087cd6..8c1122c3 100644
--- a/src/features/MatchSidePlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/index.tsx
@@ -7,8 +7,6 @@ import { createPortal } from 'react-dom'
 
 import { useTour } from '@reactour/tour'
 
-import map from 'lodash/map'
-
 import type { PlaylistOption } from 'features/MatchPage/types'
 import { useMatchPageStore } from 'features/MatchPage/store'
 import {
@@ -21,15 +19,11 @@ import { Overlay } from 'components/Overlay'
 
 import { useEventListener, useModalRoot } from 'hooks'
 
-import { AdType } from 'requests'
-
 import { isIOS, isMobileDevice } from 'config/userAgent'
 
 import { getLocalStorageItem } from 'helpers/getLocalStorage'
 
 import { MATCH_ADS } from 'components/Ads/types'
-import { MobileAd } from 'components/Ads/components/MobileAd'
-import { AdComponent } from 'components/Ads/components/AdComponent'
 
 import { Tabs } from './config'
 import { TabEvents } from './components/TabEvents'
@@ -49,6 +43,7 @@ import {
   TabButton,
   EventsAdsWrapper,
 } from './styled'
+import { HeaderAds } from '../../components/Ads'
 
 const tabPanes = {
   [Tabs.WATCH]: TabWatch,
@@ -98,6 +93,7 @@ export const MatchSidePlaylists = ({
   const [hasTabPaneScroll, setTabPaneScroll] = useState(false)
 
   const { PLAYS_TOP, PLAYS_TOP_MOBILE } = MATCH_ADS
+  const adsPositionId = isMobileDevice ? PLAYS_TOP_MOBILE : PLAYS_TOP
 
   useEffect(() => {
     const {
@@ -156,11 +152,7 @@ export const MatchSidePlaylists = ({
               && ads
               && (
                 <EventsAdsWrapper hasScroll={hasTabPaneScroll}>
-                  {isMobileDevice
-                    ? map(ads?.mobile, (ad: AdType) => ad?.position.id === PLAYS_TOP_MOBILE
-                      && <MobileAd ad={ad} key={ad.id} />)
-                    : map(ads?.match, (ad: AdType) => ad?.position.id === PLAYS_TOP
-                      && <AdComponent ad={ad} key={ad.id} />)}
+                  <HeaderAds ads={ads.filter(({ position }) => position.id === adsPositionId)} />
                 </EventsAdsWrapper>
               )}
             <TabsGroup>
diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx
index 8b37a1ce..e8f6c451 100644
--- a/src/features/MatchesGrid/index.tsx
+++ b/src/features/MatchesGrid/index.tsx
@@ -33,7 +33,7 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
 
   const { ads } = useHomePage()
 
-  const currentAds = ads?.match_cell?.length ? ads?.match_cell : ads?.block
+  const currentAds = ads.match_cell?.length ? ads.match_cell : ads.block
 
   const {
     compareSport,
@@ -91,7 +91,7 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => {
           && readToken()
           && currentAds
           && (
-            currentAds?.map((ad: AdType) => <AdComponent ad={ad} />)
+            currentAds.map((ad: AdType) => <AdComponent ad={ad} />)
           )}
       {isHomePage && isShowTournament ? (
         <TournamentList matches={filteredMatches()} />
diff --git a/src/features/StreamPlayer/index.tsx b/src/features/StreamPlayer/index.tsx
index e431e5ad..b5d1d2bc 100644
--- a/src/features/StreamPlayer/index.tsx
+++ b/src/features/StreamPlayer/index.tsx
@@ -129,11 +129,9 @@ export const StreamPlayer = (props: Props) => {
       {ads
         && (
           <PlayerAdsWrapper isFullscreen={isFullscreen}>
-            <HeaderAds ads={
-              isMobileDevice
-                ? ads?.mobile?.filter(({ position }) => position.id === PLAYER_MOBILE_ADS)
-                : ads?.match?.filter(({ position }) => includes(PLAYER_ADS, position.id))
-            }
+            <HeaderAds ads={ads.filter(({ position }) => (isMobileDevice
+              ? position.id === PLAYER_MOBILE_ADS
+              : includes(PLAYER_ADS, position.id)))}
             />
           </PlayerAdsWrapper>
         )}
diff --git a/src/features/TournamentList/components/TournamentMobile/index.tsx b/src/features/TournamentList/components/TournamentMobile/index.tsx
index 5e08c390..8bed7cd4 100644
--- a/src/features/TournamentList/components/TournamentMobile/index.tsx
+++ b/src/features/TournamentList/components/TournamentMobile/index.tsx
@@ -90,8 +90,8 @@ export const TournamentMobile = ({
       </CardWrapper>
       <ScMatchesWrapper>
         {open && (
-          <>
-            {isMobileDevice && ads?.mobile?.map((ad: AdType) => (
+          <Fragment>
+            {isMobileDevice && ads.mobile?.map((ad: AdType) => (
               ad.position.id === VIEW_ADS.MOBILE_IN_COLLAPSE_HEADER && (
                 <TournamentMobileAd
                   ad={ad}
@@ -101,14 +101,14 @@ export const TournamentMobile = ({
             {tournamentMatches?.map((match: Match) => (
               <MatchCard key={match.id} match={match} />
             ))}
-            {isMobileDevice && ads?.mobile?.map((ad: AdType) => (
+            {isMobileDevice && ads.mobile?.map((ad: AdType) => (
               ad.position.id === VIEW_ADS.MOBILE_IN_COLLAPSE_FOOTER && (
                 <TournamentMobileAd
                   ad={ad}
                   key={ad.id}
                 />
               )))}
-          </>
+          </Fragment>
         )}
       </ScMatchesWrapper>
     </CardWrapperOuter>
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
index ab8a1aa5..46ea864e 100644
--- a/src/hooks/index.tsx
+++ b/src/hooks/index.tsx
@@ -9,3 +9,4 @@ export * from './useTooltip'
 export * from './useModalRoot'
 export * from './usePageLogger'
 export * from './useDuration'
+export * from './useScreenOrientation'
diff --git a/src/hooks/useScreenOrientation.tsx b/src/hooks/useScreenOrientation.tsx
new file mode 100644
index 00000000..14cd2035
--- /dev/null
+++ b/src/hooks/useScreenOrientation.tsx
@@ -0,0 +1,14 @@
+import { useState } from 'react'
+
+import { useEventListener } from './useEventListener'
+
+export const useScreenOrientation = () => {
+  const [orientation, setOrientation] = useState(window.orientation)
+
+  useEventListener({
+    callback: (e) => setOrientation(window.orientation),
+    event: 'orientationchange',
+  })
+
+  return orientation
+}