fix(ott-2267): add requests in tournaments popup

src/config/procedures.tsx

@@ -10,9 +10,11 @@ export const PROCEDURES = {
   get_sport_list: 'get_sport_list',
   get_team_info: 'get_team_info',
   get_team_matches: 'get_team_matches',
+  get_teams: 'get_teams',
   get_tournament_info: 'get_tournament_info',
   get_tournament_list: 'get_tournament_list',
   get_tournament_matches: 'get_tournament_matches',
+  get_tournaments: 'get_tournaments',
   get_user_favorites: 'get_user_favorites',
   get_user_info: 'get_user_info',
   get_user_match_second: 'get_user_match_second',

src/features/StreamPlayer/styled.tsx

@@ -114,6 +114,7 @@ export const PlayerWrapper = styled.div<PlayStopProps>`
 export const LoaderWrapper = styled.div`
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   display: flex;

src/features/TournamentsPopup/config.tsx

@@ -0,0 +1,18 @@
+export const sportId = 1
+
+export const tournamentsId = [227, 946, 3067, 5665]
+
+export const teamsId = [
+  23,
+  2719,
+  528,
+  17018,
+  567,
+  16306,
+  1189,
+  480,
+  16920,
+  6032,
+  17624,
+  114440,
+]

src/features/TournamentsPopup/index.tsx

@@ -3,8 +3,6 @@ import { ProfileTypes, SportTypes } from 'config'
 
 import { Wrapper } from 'features/PreferencesPopup/styled'
 
-import { Tournaments } from 'requests/getSportTournaments'
-
 import {
   ScItem,
   ScBody,
@@ -16,260 +14,28 @@ import {
 } from './styled'
 
 import { useTournamentPopupStore } from './store'
+import { Loader } from '../Loader'
+import { LoaderWrapper } from '../StreamPlayer/styled'
 
 export const TournamentsPopup = () => {
-  const { close, isOpen } = useTournamentPopupStore()
+  const {
-
+    close,
-  const tournaments: Tournaments = [
+    isFetching,
-    {
+    isOpen,
-      country: {
+    teams,
-        id: 231,
+    tournaments,
-        name_eng: 'Czech Republic',
+  } = useTournamentPopupStore()
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 227,
-      name_eng: 'MOL Cup',
-      name_rus: 'MOL CUP',
-      short_name_eng: null,
-      short_name_rus: null,
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 946,
-      name_eng: 'ženskyfotbal',
-      name_rus: 'ženskyfotbal',
-      short_name_eng: null,
-      short_name_rus: null,
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 3067,
-      name_eng: 'Futsal',
-      name_rus: 'Futsal',
-      short_name_eng: null,
-      short_name_rus: null,
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 5665,
-      name_eng: 'FACR',
-      name_rus: 'FACR',
-      short_name_eng: null,
-      short_name_rus: null,
-      sport: 1,
-      tournament_type: 1,
-    },
-  ]
-
-  const teams: Tournaments = [
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 23,
-      name_eng: 'Czech Republic',
-      name_rus: 'Чехия',
-      short_name_eng: 'Czech Republic',
-      short_name_rus: 'Чехия',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 2719,
-      name_eng: 'A ženy',
-      name_rus: 'A ženy',
-      short_name_eng: 'A ženy',
-      short_name_rus: 'A ženy',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 528,
-      name_eng: 'U21',
-      name_rus: 'U21',
-      short_name_eng: 'U21',
-      short_name_rus: 'U21',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 17018,
-      name_eng: 'U20',
-      name_rus: 'U20',
-      short_name_eng: 'U20',
-      short_name_rus: 'U20',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 567,
-      name_eng: 'U19',
-      name_rus: 'U19',
-      short_name_eng: 'U19',
-      short_name_rus: 'U19',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 16306,
-      name_eng: 'WU19',
-      name_rus: 'WU19',
-      short_name_eng: 'WU19',
-      short_name_rus: 'WU19',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 1189,
-      name_eng: 'U18',
-      name_rus: 'U18',
-      short_name_eng: 'U18',
-      short_name_rus: 'U18',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 480,
-      name_eng: 'U17',
-      name_rus: 'U17',
-      short_name_eng: 'U17',
-      short_name_rus: 'U17',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 16920,
-      name_eng: 'WU17',
-      name_rus: 'WU17',
-      short_name_eng: 'WU17',
-      short_name_rus: 'WU17',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 6032,
-      name_eng: 'U16',
-      name_rus: 'U16',
-      short_name_eng: 'U16',
-      short_name_rus: 'U16',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 17624,
-      name_eng: 'U15',
-      name_rus: 'U15',
-      short_name_eng: 'U15',
-      short_name_rus: 'U15',
-      sport: 1,
-      tournament_type: 1,
-    },
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        name_rus: 'Чешская Республика',
-      },
-      gender: null,
-      id: 114440,
-      name_eng: 'WU15',
-      name_rus: 'WU15',
-      short_name_eng: 'WU15',
-      short_name_rus: 'WU15',
-      sport: 1,
-      tournament_type: 1,
-    },
-  ]
 
   return (
     <ScModalContainer isOpen={isOpen} close={close} withCloseButton>
       <Wrapper>
-        <ScBody>
+        <ScBody>{
+          isFetching ? (
+            <LoaderWrapper>
+              <Loader color='#515151' />
+            </LoaderWrapper>
+          ) : (
+            <>
               <ScTournamentList>
                 <ScHeaderTitle>
                   <T9n t='my_tournaments' />
@@ -281,6 +47,7 @@ export const TournamentsPopup = () => {
                       profileType={ProfileTypes.TOURNAMENTS}
                       sportType={SportTypes.FOOTBALL}
                       onClick={close}
+                      key={tournament.id}
                     >
                       <ScItem isIcon={false} tournament={tournament} />
                     </StyledLink>
@@ -298,12 +65,16 @@ export const TournamentsPopup = () => {
                       profileType={ProfileTypes.TEAMS}
                       sportType={SportTypes.FOOTBALL}
                       onClick={close}
+                      key={team.id}
                     >
                       <ScItem isIcon={false} tournament={team} />
                     </StyledLink>
                   ))}
                 </ScList>
               </ScTournamentList>
+            </>
+          )
+        }
         </ScBody>
       </Wrapper>
     </ScModalContainer>

src/features/TournamentsPopup/store/hooks/index.tsx

@@ -1,13 +1,68 @@
-import { useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+
+import map from 'lodash/map'
+
+import {
+  getTournaments,
+  Tournament,
+} from 'requests/getTournaments'
+import { getTeams, Team } from 'requests/getTeams'
+import { Tournaments } from 'requests/getSportTournaments'
+
+import {
+  tournamentsId,
+  teamsId,
+  sportId,
+} from '../../config'
 
 export const useTournamentPopup = () => {
   const [isOpen, setIsOpen] = useState(false)
+  const [isFetching, setFetching] = useState(true)
+  const [tournaments, setTournaments] = useState<Tournaments>([])
+  const [teams, setTeams] = useState<Tournaments>([])
+
   const close = () => setIsOpen(false)
   const open = () => setIsOpen(true)
 
+  const convertData = useCallback(
+    (data: Array<Tournament> | Array<Team>) => map(
+      data,
+      (tournament) => ({
+        gender: null,
+        sport: sportId,
+        tournament_type: sportId,
+        ...tournament,
+      }),
+    ),
+    [],
+  )
+
+  useEffect(() => {
+    (async () => {
+      Promise.all([
+        getTournaments(1, tournamentsId).then(convertData),
+        getTeams(1, teamsId).then(convertData),
+      ])
+        .then((data) => {
+          // @ts-expect-error
+          setTournaments(data[0])
+          // @ts-expect-error
+          setTeams(data[1])
+          setFetching(false)
+        })
+    })()
+  }, [convertData])
+
   return {
     close,
+    isFetching,
     isOpen,
     open,
+    teams,
+    tournaments,
   }
 }

src/features/TournamentsPopup/styled.tsx

@@ -43,8 +43,14 @@ export const ScModalContainer = styled(BaseModal)`
 export const ScBody = styled.div`
   padding: 25px 40px 0 42px;
   display: flex;
+  
+  min-width: 679px;
+  min-height: 620px;
+  
   ${isMobileDevice
     ? css`
+            min-width: auto;
+            min-height: 400px;
         @media (max-width: 650px) {
           padding: 13px 25px 0;
           flex-direction: column;

src/requests/getTeams.tsx

@@ -0,0 +1,40 @@
+import {
+  DATA_URL,
+  PROCEDURES,
+} from 'config'
+import { callApi } from 'helpers'
+
+const proc = PROCEDURES.get_teams
+
+export type Team = {
+  country: {
+    id: number,
+    name_eng: string,
+    name_rus: string,
+  },
+  header_image: string | null,
+  id: number,
+  is_favorite: boolean,
+  name_eng: string,
+  name_rus: string,
+  short_name_eng: string,
+  short_name_rus: string,
+} | null
+
+export const getTeams = (sportId: number, teams: Array<number>)
+: Promise<Array<Team>> => {
+  const config = {
+    body: {
+      params: {
+        _p_sport_id: sportId,
+        _p_teams: teams,
+      },
+      proc,
+    },
+  }
+
+  return callApi({
+    config,
+    url: DATA_URL,
+  })
+}

src/requests/getTournaments.tsx

@@ -0,0 +1,40 @@
+import {
+  DATA_URL,
+  PROCEDURES,
+} from 'config'
+import { callApi } from 'helpers'
+
+const proc = PROCEDURES.get_tournaments
+
+export type Tournament = {
+  country: {
+    id: number,
+    name_eng: string,
+    name_rus: string,
+  },
+  header_image: string | null,
+  id: number,
+  is_favorite: boolean,
+  name_eng: string,
+  name_rus: string,
+  short_name_eng: string,
+  short_name_rus: string,
+} | null
+
+export const getTournaments = (sportId: number, tournaments: Array<number>)
+: Promise<Array<Tournament>> => {
+  const config = {
+    body: {
+      params: {
+        _p_sport_id: sportId,
+        _p_tournaments: tournaments,
+      },
+      proc,
+    },
+  }
+
+  return callApi({
+    config,
+    url: DATA_URL,
+  })
+}