fix(#564): fix styles ads ads types

src/components/Ads/components/AdComponent/styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { VIEW_ADS } from '../../types'
 
 type Props = {
@@ -7,15 +7,15 @@ type Props = {
 
 const chooseStyle = (type: number) => {
   switch (true) {
-    case VIEW_ADS[type] === 'COLUMN':
+    case VIEW_ADS.COLUMN === type:
       return 'grid-row: 1 / 3; img {max-height: none;}'
-    case VIEW_ADS[type] === 'ROW':
+    case VIEW_ADS.ROW === type:
       return 'grid-column: 1 / 3'
-    case VIEW_ADS[type] === 'SQUARE':
+    case VIEW_ADS.SQUARE === type:
       return 'grid-row: 1 / 3; grid-column: 1 / 3; img {max-height: none;}'
-    case VIEW_ADS[type] === 'SECOND_COLUMN':
+    case VIEW_ADS.SECOND_COLUMN === type:
       return 'grid-column: 2 / 3; grid-row: 1 / 1'
-    case VIEW_ADS[type] === 'SECOND_ROW':
+    case VIEW_ADS.SECOND_ROW === type:
       return 'grid-column: 1 / 2; grid-row: 2 / 3;'
     default:
       return ''

src/components/Ads/components/MobileAd/index.tsx

@@ -1,4 +1,4 @@
-import { MouseEvent } from 'react'
+import type { MouseEvent } from 'react'
 
 import type { AdType } from 'requests'
 
@@ -12,10 +12,10 @@ import {
 import { useAd } from '../AdComponent/hooks'
 import { EventGA } from '../../types'
 
-  type MobileAdTypes = {
+type MobileAdTypes = {
-    ad: AdType,
+  ad: AdType,
-    className?: string,
+  className?: string,
-  }
+}
 
 export const MobileAd = ({
   ad,

src/components/Ads/components/MobileAd/styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 type Props = {
   position: number,

src/components/Ads/helpers/calcMaxDurationAds.tsx

@@ -1,4 +1,4 @@
-import { AdResponse, AdsListType } from 'requests'
+import type { AdResponse, AdsListType } from 'requests'
 
 export const calcMaxAdDurationAds = (advertisements: AdResponse) => {
   const allAds = Object.values(advertisements)

src/components/Ads/hooks.tsx

@@ -1,4 +1,7 @@
+import { useMemo } from 'react'
+
 import { useQuery } from 'react-query'
+
 import { useRecoilState } from 'recoil'
 
 import { isMobileDevice, querieKeys } from 'config'
@@ -7,8 +10,6 @@ import { getAds } from 'requests'
 
 import { useLang } from 'features/LexicsStore/hooks/useLang'
 
-import { useMemo } from 'react'
-
 import { useAuthStore } from 'features/AuthStore'
 
 import {

src/components/Ads/styled.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components'
+import styled, { css } from 'styled-components/macro'
 
 import { isMobileDevice } from 'config'
 

src/config/userAgent.tsx

@@ -1,7 +1,8 @@
-export const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+export const device = navigator.userAgent
 
-export const isAndroid = /Android/.test(navigator.userAgent)
+export const isIOS = /iPad|iPhone|iPod/.test(device)
 
-export const isMobileDevice = /iPhone|Android/.test(navigator.userAgent)
+export const isAndroid = /Android/.test(device)
+
+export const isMobileDevice = /iPhone|Android/.test(device)
 
-export const device = navigator.userAgent

src/features/MatchesGrid/index.tsx

@@ -1,7 +1,11 @@
 import { memo, useEffect } from 'react'
+
 import { useRouteMatch } from 'react-router-dom'
+
 import { useQuery } from 'react-query'
 
+import { useRecoilValue } from 'recoil'
+
 import { isMobileDevice, PAGES } from 'config'
 
 import type { AdType, LiveScore } from 'requests'
@@ -14,7 +18,6 @@ import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
 import { readToken } from 'helpers'
 
-import { useRecoilValue } from 'recoil'
 import { Wrapper } from './styled'
 import { useMatchSwitchesStore } from '../MatchSwitches'
 import { querieKeys } from '../../config'

src/requests/getAds/getAds.tsx

@@ -10,27 +10,27 @@ export type AdsParams = {
 }
 
 export type AdType = {
-  'duration': number,
+  duration: number,
-  'frequency': number,
+  frequency: number,
-  'id': number,
+  id: number,
-  'impressions': number,
+  impressions: number,
-  'link': string,
+  link: string,
-  'media': {
+  media: {
     url: string,
   },
-  'name': string,
+  name: string,
-  'position': {
+  position: {
-    'id': number,
+    id: number,
-    'name_eng': string,
+    name_eng: string,
-    'name_rus': string,
+    name_rus: string,
-    'source_type': string,
+    source_type: string,
   },
   remaining_views: number,
-  'time_close': number,
+  time_close: number,
-  'type': {
+  type: {
-    'id': number,
+    id: number,
-    'name_eng': string,
+    name_eng: string,
-    'name_rus': string,
+    name_rus: string,
   },
 }
 

src/requests/getAds/updateAdsView.tsx

@@ -7,10 +7,10 @@ export type AdsViewParams = {
 }
 
 type AdsViewResponse = {
-  'data': string,
+  data: string,
-  'message': string,
+  message: string,
-  'reason': string,
+  reason: string,
-  'status': 'failed' | 'failed' | 'success',
+  status: 'failed' | 'failed' | 'success',
 }
 
 export const updateAdsView = (