Ott 461 matches request proc change (#165)

* refactor(#461): matches request split into 4 different funcs (#161)

Co-authored-by: mirlan.maksitaliev <mirlan.maksitaliev@instatsport.com>

* refactor(#461): connected profile spec. matches request functions (#162)

Co-authored-by: mirlan.maksitaliev <mirlan.maksitaliev@instatsport.com>

* Ott 461 matches request proc change part 3 (#163)

* refactor(#461): simplified matches requests a bit

* refactor(#461): renamed matches types

* refactor(#461): converted flat team to object

Co-authored-by: mirlan.maksitaliev <mirlan.maksitaliev@instatsport.com>

* refactor(#461): show sport and tournament names on specific profiles (#164)

Co-authored-by: mirlan.maksitaliev <mirlan.maksitaliev@instatsport.com>

src/config/index.tsx

@@ -5,3 +5,4 @@ export * from './procedures'
 export * from './sportTypes'
 export * from './profileTypes'
 export * from './history'
+export * from './devices'

src/config/procedures.tsx

@@ -3,13 +3,16 @@ export const PROCEDURES = {
   create_user: 'create_user',
   get_cities: 'get_cities',
   get_match_info: 'get_match_info',
-  get_matches: 'get_matches',
+  get_matches_tmp: 'get_matches_tmp',
   get_player_info: 'get_player_info',
+  get_player_matches: 'get_player_matches',
   get_players_teams_tournaments: 'get_players_teams_tournaments',
   get_sport_list: 'get_sport_list',
   get_team_info: 'get_team_info',
+  get_team_matches: 'get_team_matches',
   get_tournament_info: 'get_tournament_info',
   get_tournament_list: 'get_tournament_list',
+  get_tournament_matches: 'get_tournament_matches',
   get_user_favorites: 'get_user_favorites',
   get_user_info: 'get_user_info',
   logout_user: 'logout_user',

src/features/HomePage/hooks.tsx

@@ -1,4 +1,6 @@
-import { useMemo } from 'react'
+import { useCallback } from 'react'
+
+import { getHomeMatches } from 'requests'
 
 import { useHeaderFiltersStore } from 'features/HeaderFilters'
 
@@ -10,17 +12,22 @@ export const useHomePage = () => {
     selectedTournamentId,
   } = useHeaderFiltersStore()
 
-  const requestArgs = useMemo(() => ({
+  const fetchMatches = useCallback(
-    date: selectedDateFormatted,
+    (limit: number, offset: number) => getHomeMatches({
-    matchStatus: selectedMatchStatus,
+      date: selectedDateFormatted,
-    sportType: selectedSportTypeId,
+      limit,
-    tournamentId: selectedTournamentId,
+      matchStatus: selectedMatchStatus,
-  }), [
+      offset,
-    selectedDateFormatted,
+      sportType: selectedSportTypeId,
-    selectedMatchStatus,
+      tournamentId: selectedTournamentId,
-    selectedSportTypeId,
+    }),
-    selectedTournamentId,
+    [
-  ])
+      selectedDateFormatted,
+      selectedMatchStatus,
+      selectedSportTypeId,
+      selectedTournamentId,
+    ],
+  )
 
-  return { requestArgs }
+  return { fetchMatches }
 }

src/features/HomePage/index.tsx

@@ -6,10 +6,10 @@ import { useHomePage } from './hooks'
 import { Content } from './styled'
 
 export const HomePage = () => {
-  const { requestArgs } = useHomePage()
+  const { fetchMatches } = useHomePage()
   return (
     <Content>
-      <Matches requestArgs={requestArgs} />
+      <Matches fetch={fetchMatches} />
     </Content>
   )
 }

src/features/MatchCard/CardFinished/index.tsx

@@ -21,6 +21,7 @@ import {
 
 type CardFinishedProps = {
   match: Match,
+  showSportName?: boolean,
 }
 
 export const CardFinished = ({
@@ -30,13 +31,12 @@ export const CardFinished = ({
     preview,
     sportName,
     sportType,
-    team1Name,
+    team1,
-    team1Score,
+    team2,
-    team2Name,
-    team2Score,
     time,
     tournamentName,
   },
+  showSportName,
 }: CardFinishedProps) => {
   const {
     close,
@@ -75,16 +75,20 @@ export const CardFinished = ({
         />
       </PreviewWrapper>
       <Info>
-        <SportName sport={sportType} />
+        {showSportName && <SportName sport={sportType} />}
-        <TournamentName title={tournamentName}>{tournamentName}</TournamentName>
+        {tournamentName && (
+          <TournamentName title={tournamentName}>
+            {tournamentName}
+          </TournamentName>
+        )}
         <Teams>
           <Team>
-            <TeamName title={team1Name}>{team1Name}</TeamName>
+            <TeamName title={team1.name}>{team1.name}</TeamName>
-            {showScore && <Score>{team1Score}</Score>}
+            {showScore && <Score>{team1.score}</Score>}
           </Team>
           <Team>
-            <TeamName title={team2Name}>{team2Name}</TeamName>
+            <TeamName title={team2.name}>{team2.name}</TeamName>
-            {showScore && <Score>{team2Score}</Score>}
+            {showScore && <Score>{team2.score}</Score>}
           </Team>
         </Teams>
       </Info>

src/features/MatchCard/CardLive/index.tsx

@@ -21,6 +21,7 @@ import { CardLiveHover } from '../CardLiveHover'
 
 type CardLiveProps = {
   match: Match,
+  showSportName?: boolean,
 }
 
 export const CardLive = ({
@@ -30,13 +31,12 @@ export const CardLive = ({
     preview,
     sportName,
     sportType,
-    team1Name,
+    team1,
-    team1Score,
+    team2,
-    team2Name,
-    team2Score,
     time,
     tournamentName,
   },
+  showSportName,
 }: CardLiveProps) => {
   const {
     close,
@@ -75,16 +75,20 @@ export const CardLive = ({
         />
       </PreviewWrapper>
       <Info>
-        <SportName sport={sportType} />
+        {showSportName && <SportName sport={sportType} />}
-        <TournamentName title={tournamentName}>{tournamentName}</TournamentName>
+        {tournamentName && (
+          <TournamentName title={tournamentName}>
+            {tournamentName}
+          </TournamentName>
+        )}
         <Teams>
           <Team>
-            <TeamName title={team1Name}>{team1Name}</TeamName>
+            <TeamName title={team1.name}>{team1.name}</TeamName>
-            {showScore && <Score>{team1Score}</Score>}
+            {showScore && <Score>{team1.score}</Score>}
           </Team>
           <Team>
-            <TeamName title={team2Name}>{team2Name}</TeamName>
+            <TeamName title={team2.name}>{team2.name}</TeamName>
-            {showScore && <Score>{team2Score}</Score>}
+            {showScore && <Score>{team2.score}</Score>}
           </Team>
         </Teams>
       </Info>

src/features/MatchCard/CardSoon/index.tsx

@@ -2,10 +2,12 @@ import type { BaseSyntheticEvent } from 'react'
 import React, { useCallback } from 'react'
 
 import styled from 'styled-components/macro'
-import { devices } from 'config/devices'
 
-import type { Match } from 'features/Matches'
+import { ProfileTypes, devices } from 'config'
+
 import { handleImageError } from 'helpers'
+
+import type { Match } from 'features/Matches'
 import { SportName } from 'features/Common'
 
 import {
@@ -53,25 +55,24 @@ const TeamName = styled(CommonTeamName)`
 
 type CardSoonProps = {
   match: Match,
+  showSportName?: boolean,
 }
 
 export const CardSoon = ({
   match: {
     date,
-    sportName,
     sportType,
-    team1Logo,
+    team1,
-    team1Name,
+    team2,
-    team2Logo,
-    team2Name,
     time,
     tournamentName,
   },
+  showSportName,
 }: CardSoonProps) => {
   const onError = useCallback((e: BaseSyntheticEvent) => handleImageError({
     e,
     sport: sportType,
-    type: 2,
+    type: ProfileTypes.TEAMS,
   }), [sportType])
 
   return (
@@ -85,28 +86,32 @@ export const CardSoon = ({
       <PreviewWrapper>
         <TeamLogos>
           <TeamLogo
-            src={team1Logo}
+            src={team1.logo}
-            alt={team1Name}
+            alt={team1.name}
-            title={team1Name}
+            title={team1.name}
             onError={onError}
           />
           <TeamLogo
-            src={team2Logo}
+            src={team2.logo}
-            alt={team2Name}
+            alt={team2.name}
-            title={team2Name}
+            title={team2.name}
             onError={onError}
           />
         </TeamLogos>
       </PreviewWrapper>
       <Info>
-        <SportName sport={sportType} />
+        {showSportName && <SportName sport={sportType} />}
-        <TournamentName title={tournamentName}>{tournamentName}</TournamentName>
+        {tournamentName && (
+          <TournamentName title={tournamentName}>
+            {tournamentName}
+          </TournamentName>
+        )}
         <Teams>
           <Team>
-            <TeamName title={team1Name}>{team1Name}</TeamName>
+            <TeamName title={team1.name}>{team1.name}</TeamName>
           </Team>
           <Team>
-            <TeamName title={team2Name}>{team2Name}</TeamName>
+            <TeamName title={team2.name}>{team2.name}</TeamName>
           </Team>
         </Teams>
       </Info>

src/features/MatchCard/index.tsx

@@ -1,4 +1,7 @@
 import React from 'react'
+import { useRouteMatch } from 'react-router'
+
+import { PAGES } from 'config'
 
 import type { Match } from 'features/Matches'
 import { MatchStatuses } from 'features/HeaderFilters'
@@ -11,11 +14,19 @@ type MatchCardProps = {
   match: Match,
 }
 
+const cards = {
+  [MatchStatuses.Finished]: CardFinished,
+  [MatchStatuses.Live]: CardLive,
+  [MatchStatuses.Soon]: CardSoon,
+}
+
 export const MatchCard = ({ match }: MatchCardProps) => {
-  switch (match.streamStatus) {
+  const isHomePage = useRouteMatch(PAGES.home)?.isExact
-    case MatchStatuses.Soon: return <CardSoon match={match} />
+  const Card = cards[match.streamStatus]
-    case MatchStatuses.Live: return <CardLive match={match} />
+  return (
-    case MatchStatuses.Finished: return <CardFinished match={match} />
+    <Card
-    default: return null
+      match={match}
-  }
+      showSportName={isHomePage}
+    />
+  )
 }

src/features/Matches/helpers.tsx

@@ -1,52 +0,0 @@
-import map from 'lodash/map'
-import flatten from 'lodash/flatten'
-import pipe from 'lodash/fp/pipe'
-import fpMap from 'lodash/fp/map'
-
-import format from 'date-fns/format'
-
-import type { Content } from 'requests'
-import { ProfileTypes } from 'config'
-import { getProfileLogo, getSportLexic } from 'helpers'
-
-type Name = 'name_rus' | 'name_eng'
-
-const prepareMatch = ({
-  matches: matchesList,
-  sport,
-  ...rest
-}: Content, suffix: string) => map(matchesList, ({
-  date,
-  id,
-  stream_status,
-  team1,
-  team2,
-}) => ({
-  date: format(new Date(date), 'dd.MM.yy'),
-  id,
-  preview: '/images/preview.png',
-  sportName: getSportLexic(sport),
-  sportType: sport,
-  streamStatus: stream_status,
-  team1Logo: getProfileLogo({
-    id: team1.id,
-    profileType: ProfileTypes.TEAMS,
-    sportType: sport,
-  }),
-  team1Name: team1[`name_${suffix}` as Name],
-  team1Score: team1.score,
-  team2Logo: getProfileLogo({
-    id: team2.id,
-    profileType: ProfileTypes.TEAMS,
-    sportType: sport,
-  }),
-  team2Name: team2[`name_${suffix}` as Name],
-  team2Score: team2.score,
-  time: format(new Date(date), 'HH:mm'),
-  tournamentName: rest[`name_${suffix}` as Name],
-}))
-
-export const prepareMatches = (content: Array<Content>, suffix: string) => pipe(
-  fpMap((items: Content) => prepareMatch(items, suffix)),
-  flatten,
-)(content)

src/features/Matches/helpers/addSportType.tsx

@@ -0,0 +1,15 @@
+import map from 'lodash/map'
+
+import type { MatchesBySection, Matches } from 'requests'
+import { SportTypes } from 'config'
+
+const addSportTypeToMatches = (matches: Matches, sport: SportTypes) => (
+  map(matches, (match) => ({ ...match, sport }))
+)
+
+export const addSportType = (matches: MatchesBySection, sport: SportTypes) => ({
+  ...matches,
+  broadcast: addSportTypeToMatches(matches.broadcast, sport),
+  features: addSportTypeToMatches(matches.features, sport),
+  highlights: addSportTypeToMatches(matches.highlights, sport),
+})

src/features/Matches/helpers/prepareMatches.tsx

@@ -0,0 +1,63 @@
+import map from 'lodash/map'
+
+import format from 'date-fns/format'
+
+import type { Match, Team } from 'requests'
+import { ProfileTypes, SportTypes } from 'config'
+import { getProfileLogo, getSportLexic } from 'helpers'
+
+type Name = 'name_rus' | 'name_eng'
+
+type Args = {
+  sport: SportTypes,
+  suffix: string,
+  team: Team,
+}
+
+const prepareTeam = ({
+  sport,
+  suffix,
+  team,
+}: Args) => ({
+  logo: getProfileLogo({
+    id: team.id,
+    profileType: ProfileTypes.TEAMS,
+    sportType: sport,
+  }),
+  name: team[`name_${suffix}` as Name],
+  score: team.score,
+})
+
+const prepareMatch = ({
+  date,
+  id,
+  sport,
+  stream_status,
+  team1,
+  team2,
+  tournament,
+}: Match, suffix: string) => ({
+  date: format(new Date(date), 'dd.MM.yy'),
+  id,
+  preview: '/images/preview.png',
+  sportName: getSportLexic(sport),
+  sportType: sport,
+  streamStatus: stream_status,
+  team1: prepareTeam({
+    sport,
+    suffix,
+    team: team1,
+  }),
+  team2: prepareTeam({
+    sport,
+    suffix,
+    team: team2,
+  }),
+  time: format(new Date(date), 'HH:mm'),
+  tournamentName: tournament?.[`name_${suffix}` as Name],
+})
+
+export const prepareMatches = (matches: Array<Match>, suffix: string) => map(
+  matches,
+  (match: Match) => prepareMatch(match, suffix),
+)

src/features/Matches/hooks.tsx

@@ -6,59 +6,51 @@ import {
   useRef,
 } from 'react'
 
-import type { Matches } from 'requests'
+import type { MatchesBySection } from 'requests'
-import { getMatches } from 'requests'
 
 import { useRequest } from 'hooks'
 
 import { useLexicsStore } from 'features/LexicsStore'
 
-import { prepareMatches } from './helpers'
+import { prepareMatches } from './helpers/prepareMatches'
 
 export type Match = ReturnType<typeof prepareMatches>[number]
 
-type RequestArgs = Omit<Parameters<typeof getMatches>[0], 'limit' | 'offset'>
-
 export type Props = {
-  requestArgs: RequestArgs,
+  fetch: (limit: number, offset: number) => Promise<MatchesBySection>,
 }
 
 const MATCHES_LIMIT = 60
 
-export const useMatches = ({ requestArgs }: Props) => {
+const initialState = {
+  broadcast: [],
+  features: [],
+  hasNextPage: true,
+  highlights: [],
+  isVideoSections: false,
+}
+
+export const useMatches = ({ fetch }: Props) => {
   const { suffix } = useLexicsStore()
   const {
     isFetching,
     request: requestMatches,
-  } = useRequest(getMatches)
+  } = useRequest(fetch)
 
   const pageRef = useRef(0)
-  const [matches, setMatches] = useState<Matches>({
+  const [matches, setMatches] = useState<MatchesBySection>(initialState)
-    broadcast: [],
-    features: [],
-    hasNextPage: true,
-    highlights: [],
-    isVideoSections: false,
-  })
 
   const { hasNextPage } = matches
 
   const fetchMatches = useCallback((page: number) => (
-    requestMatches({
+    requestMatches(MATCHES_LIMIT, page * MATCHES_LIMIT)
-      ...requestArgs,
+  ), [requestMatches])
-      limit: MATCHES_LIMIT,
-      offset: page * MATCHES_LIMIT,
-    })
-  ), [
-    requestMatches,
-    requestArgs,
-  ])
 
   const fetchMoreMatches = useCallback(async () => {
     if (!hasNextPage || isFetching) return
 
     const newMatches = await fetchMatches(pageRef.current)
-    setMatches((oldMatches): Matches => {
+    setMatches((oldMatches) => {
       const broadcast = [...oldMatches.broadcast, ...newMatches.broadcast]
       return {
         ...oldMatches,

src/features/PlayerPage/hooks.tsx

@@ -1,15 +1,16 @@
 import {
   useEffect,
   useState,
-  useMemo,
+  useCallback,
 } from 'react'
 
 import { useSportNameParam, usePageId } from 'hooks'
 
 import type { PlayerProfile } from 'requests/getPlayerInfo'
-import { getPlayerInfo } from 'requests/getPlayerInfo'
+import { getPlayerInfo, getPlayerMatches } from 'requests'
 
 import { useLexicsStore } from 'features/LexicsStore'
+import { addSportType } from 'features/Matches/helpers/addSportType'
 
 type Firstname = 'firstname_eng' | 'firstname_rus'
 type Lastname = 'lastname_eng' | 'lastname_rus'
@@ -42,14 +43,19 @@ export const usePlayerPage = () => {
     getPlayerInfo(playerId, sportType).then(setPlayerProfile)
   }, [playerId, sportType])
 
-  const requestArgs = useMemo(() => ({
+  const fetchMatches = useCallback(
-    playerId,
+    (limit: number, offset: number) => getPlayerMatches({
-    sportType,
+      limit,
-  }), [playerId, sportType])
+      offset,
+      playerId,
+      sportType,
+    }).then((matches) => addSportType(matches, sportType)),
+    [playerId, sportType],
+  )
 
   return {
+    fetchMatches,
     infoItems,
     name: fullName,
-    requestArgs,
   }
 }

src/features/PlayerPage/index.tsx

@@ -9,9 +9,9 @@ import { usePlayerPage } from './hooks'
 
 export const PlayerPage = () => {
   const {
+    fetchMatches,
     infoItems,
     name,
-    requestArgs,
   } = usePlayerPage()
 
   return (
@@ -21,7 +21,7 @@ export const PlayerPage = () => {
         name={name}
         infoItems={infoItems}
       />
-      <Matches requestArgs={requestArgs} />
+      <Matches fetch={fetchMatches} />
     </Content>
   )
 }

src/features/TeamPage/hooks.tsx

@@ -1,15 +1,16 @@
 import {
   useEffect,
   useState,
-  useMemo,
+  useCallback,
 } from 'react'
 
 import type { TeamInfo } from 'requests'
-import { getTeamInfo } from 'requests'
+import { getTeamInfo, getTeamMatches } from 'requests'
 
 import { useLexicsStore } from 'features/LexicsStore'
 
 import { useSportNameParam, usePageId } from 'hooks'
+import { addSportType } from 'features/Matches/helpers/addSportType'
 
 type Name = 'name_rus' | 'name_eng'
 
@@ -36,15 +37,20 @@ export const useTeamPage = () => {
     teamId,
   ])
 
-  const requestArgs = useMemo(() => ({
+  const fetchMatches = useCallback(
-    sportType,
+    (limit: number, offset: number) => getTeamMatches({
-    teamId,
+      limit,
-  }), [teamId, sportType])
+      offset,
+      sportType,
+      teamId,
+    }).then((matches) => addSportType(matches, sportType)),
+    [teamId, sportType],
+  )
 
   return {
+    fetchMatches,
     infoItems: [country],
     name,
-    requestArgs,
     sportType,
   }
 }

src/features/TeamPage/index.tsx

@@ -10,9 +10,9 @@ import { Content } from './styled'
 
 export const TeamPage = () => {
   const {
+    fetchMatches,
     infoItems,
     name,
-    requestArgs,
   } = useTeamPage()
 
   return (
@@ -23,7 +23,7 @@ export const TeamPage = () => {
           name={name}
           infoItems={infoItems}
         />
-        <Matches requestArgs={requestArgs} />
+        <Matches fetch={fetchMatches} />
       </Content>
     </Fragment>
   )

src/features/TournamentPage/hooks.tsx

@@ -1,16 +1,17 @@
 import {
   useEffect,
   useState,
-  useMemo,
+  useCallback,
 } from 'react'
 
-import { useLexicsStore } from 'features/LexicsStore'
-
 import type { TournamentInfo } from 'requests'
-import { getTournamentInfo } from 'requests'
+import { getTournamentInfo, getTournamentMatches } from 'requests'
 
 import { useSportNameParam, usePageId } from 'hooks'
 
+import { useLexicsStore } from 'features/LexicsStore'
+import { addSportType } from 'features/Matches/helpers/addSportType'
+
 type Name = 'name_rus' | 'name_eng'
 
 export const useTournamentPage = () => {
@@ -36,14 +37,19 @@ export const useTournamentPage = () => {
     tournamentId,
   ])
 
-  const requestArgs = useMemo(() => ({
+  const fetchMatches = useCallback(
-    sportType,
+    (limit: number, offset: number) => getTournamentMatches({
-    tournamentId,
+      limit,
-  }), [tournamentId, sportType])
+      offset,
+      sportType,
+      tournamentId,
+    }).then((matches) => addSportType(matches, sportType)),
+    [tournamentId, sportType],
+  )
 
   return {
+    fetchMatches,
     infoItems: [country],
     name,
-    requestArgs,
   }
 }

src/features/TournamentPage/index.tsx

@@ -10,9 +10,9 @@ import { Content } from './styled'
 
 export const TournamentPage = () => {
   const {
+    fetchMatches,
     infoItems,
     name,
-    requestArgs,
   } = useTournamentPage()
 
   return (
@@ -23,7 +23,7 @@ export const TournamentPage = () => {
           name={name}
           infoItems={infoItems}
         />
-        <Matches requestArgs={requestArgs} />
+        <Matches fetch={fetchMatches} />
       </Content>
     </Fragment>
   )

src/requests/getMatches.tsx

@@ -1,118 +0,0 @@
-import {
-  DATA_URL,
-  PROCEDURES,
-  SportTypes,
-} from 'config'
-import { callApi, getResponseData } from 'helpers'
-
-import { MatchStatuses } from 'features/HeaderFilters'
-
-const proc = PROCEDURES.get_matches
-
-type Data = {
-  is_video_sections: boolean,
-  video_content: VideoContent,
-}
-
-type VideoContent = {
-  broadcast: Items,
-  features: Items,
-  highlights: Items,
-  show: boolean,
-}
-
-type Items = {
-  content: Array<Content> | null,
-  name: string,
-}
-
-export type Content = {
-  id: number,
-  matches: Array<Match>,
-  name_eng: string,
-  name_rus: string,
-  sport: SportTypes,
-}
-
-type Match = {
-  date: string,
-  has_video: boolean,
-  id: number,
-  round_id: number | null,
-  stream_status: MatchStatuses,
-  team1: Team,
-  team2: Team,
-}
-
-type Team = {
-  id: number,
-  name_eng: string,
-  name_rus: string,
-  score: number,
-}
-
-type Args = {
-  date?: string,
-  limit?: number,
-  matchStatus?: MatchStatuses | null,
-  offset?: number,
-  playerId?: number | null,
-  sportType: SportTypes | null,
-  teamId?: number | null,
-  tournamentId?: number | null,
-}
-
-export type Matches = {
-  broadcast: Array<Content>,
-  features: Array<Content>,
-  hasNextPage?: boolean,
-  highlights: Array<Content>,
-  isVideoSections: boolean,
-}
-
-export const getMatches = async ({
-  date,
-  limit,
-  matchStatus,
-  offset,
-  playerId,
-  sportType,
-  teamId,
-  tournamentId,
-}: Args) => {
-  const config = {
-    body: {
-      params: {
-        _p_date: date,
-        _p_limit: limit,
-        _p_offset: offset,
-        _p_player_id: playerId || null,
-        _p_sport: sportType,
-        _p_stream_status: matchStatus,
-        _p_team_id: teamId || null,
-        _p_tournament_id: tournamentId || null,
-      },
-      proc,
-    },
-  }
-
-  const data: Data = await callApi({
-    config,
-    url: DATA_URL,
-  }).then(getResponseData(proc))
-
-  const {
-    broadcast,
-    features,
-    highlights,
-    show,
-  } = data.video_content
-
-  return {
-    broadcast: broadcast.content || [],
-    features: features.content || [],
-    hasNextPage: Boolean(show),
-    highlights: highlights.content || [],
-    isVideoSections: data.is_video_sections,
-  }
-}

src/requests/getMatches/getHomeMatches.tsx

@@ -0,0 +1,42 @@
+import { PROCEDURES, SportTypes } from 'config'
+
+import { MatchStatuses } from 'features/HeaderFilters'
+
+import type { MatchesBySection } from './types'
+import { requestMatches } from './request'
+
+const proc = PROCEDURES.get_matches_tmp
+
+type Args = {
+  date: string,
+  limit: number,
+  matchStatus: MatchStatuses | null,
+  offset: number,
+  sportType: SportTypes | null,
+  tournamentId: number | null,
+}
+
+export const getHomeMatches = async ({
+  date,
+  limit,
+  matchStatus,
+  offset,
+  sportType,
+  tournamentId,
+}: Args): Promise<MatchesBySection> => {
+  const config = {
+    body: {
+      params: {
+        _p_date: date,
+        _p_limit: limit,
+        _p_offset: offset,
+        _p_sport: sportType,
+        _p_stream_status: matchStatus,
+        _p_tournament_id: tournamentId,
+      },
+      proc,
+    },
+  }
+
+  return requestMatches(config)
+}

src/requests/getMatches/getPlayerMatches.tsx

@@ -0,0 +1,34 @@
+import { PROCEDURES, SportTypes } from 'config'
+
+import type { MatchesBySection } from './types'
+import { requestMatches } from './request'
+
+const proc = PROCEDURES.get_player_matches
+
+type Args = {
+  limit: number,
+  offset: number,
+  playerId: number,
+  sportType: SportTypes,
+}
+
+export const getPlayerMatches = async ({
+  limit,
+  offset,
+  playerId,
+  sportType,
+}: Args): Promise<MatchesBySection> => {
+  const config = {
+    body: {
+      params: {
+        _p_limit: limit,
+        _p_offset: offset,
+        _p_player_id: playerId,
+        _p_sport: sportType,
+      },
+      proc,
+    },
+  }
+
+  return requestMatches(config)
+}

src/requests/getMatches/getTeamMatches.tsx

@@ -0,0 +1,34 @@
+import { PROCEDURES, SportTypes } from 'config'
+
+import type { MatchesBySection } from './types'
+import { requestMatches } from './request'
+
+const proc = PROCEDURES.get_team_matches
+
+type Args = {
+  limit: number,
+  offset: number,
+  sportType: SportTypes,
+  teamId: number,
+}
+
+export const getTeamMatches = async ({
+  limit,
+  offset,
+  sportType,
+  teamId,
+}: Args): Promise<MatchesBySection> => {
+  const config = {
+    body: {
+      params: {
+        _p_limit: limit,
+        _p_offset: offset,
+        _p_sport: sportType,
+        _p_team_id: teamId,
+      },
+      proc,
+    },
+  }
+
+  return requestMatches(config)
+}

src/requests/getMatches/getTournamentMatches.tsx

@@ -0,0 +1,34 @@
+import { PROCEDURES, SportTypes } from 'config'
+
+import type { MatchesBySection } from './types'
+import { requestMatches } from './request'
+
+const proc = PROCEDURES.get_tournament_matches
+
+type Args = {
+  limit: number,
+  offset: number,
+  sportType: SportTypes,
+  tournamentId: number,
+}
+
+export const getTournamentMatches = async ({
+  limit,
+  offset,
+  sportType,
+  tournamentId,
+}: Args): Promise<MatchesBySection> => {
+  const config = {
+    body: {
+      params: {
+        _p_limit: limit,
+        _p_offset: offset,
+        _p_sport: sportType,
+        _p_tournament_id: tournamentId,
+      },
+      proc,
+    },
+  }
+
+  return requestMatches(config)
+}

src/requests/getMatches/index.tsx

@@ -0,0 +1,5 @@
+export * from './types'
+export * from './getHomeMatches'
+export * from './getTeamMatches'
+export * from './getPlayerMatches'
+export * from './getTournamentMatches'

src/requests/getMatches/request.tsx

@@ -0,0 +1,29 @@
+import { DATA_URL } from 'config'
+import { callApi, getResponseData } from 'helpers'
+
+import type { MatchesResponse, MatchesBySection } from './types'
+
+type Config = {
+  body: {
+    proc: string,
+  },
+}
+
+export const requestMatches = async (config: Config): Promise<MatchesBySection> => {
+  const {
+    is_video_sections,
+    show,
+    video_content: data,
+  }: MatchesResponse = await callApi({
+    config,
+    url: DATA_URL,
+  }).then(getResponseData(config.body.proc))
+
+  return {
+    broadcast: data.broadcast || [],
+    features: data.features || [],
+    hasNextPage: Boolean(show),
+    highlights: data.highlights || [],
+    isVideoSections: Boolean(is_video_sections),
+  }
+}

src/requests/getMatches/types.tsx

@@ -0,0 +1,50 @@
+import { SportTypes } from 'config'
+
+import { MatchStatuses } from 'features/HeaderFilters'
+
+type Tournament = {
+  id: number,
+  name_eng: string,
+  name_rus: string,
+}
+
+export type Team = {
+  id: number,
+  name_eng: string,
+  name_rus: string,
+  score: number,
+}
+
+export type Match = {
+  date: string,
+  has_video: boolean,
+  id: number,
+  round_id: number | null,
+  sport: SportTypes,
+  stream_status: MatchStatuses,
+  team1: Team,
+  team2: Team,
+  tournament: Tournament,
+}
+
+export type Matches = Array<Match>
+
+type VideoContent = {
+  broadcast: Matches,
+  features: Matches,
+  highlights: Matches,
+}
+
+export type MatchesResponse = {
+  is_video_sections: boolean | null,
+  show: boolean,
+  video_content: VideoContent,
+}
+
+export type MatchesBySection = {
+  broadcast: Matches,
+  features: Matches,
+  hasNextPage: boolean,
+  highlights: Matches,
+  isVideoSections: boolean,
+}

src/requests/index.tsx

@@ -16,3 +16,4 @@ export * from './getMatchInfo'
 export * from './reportPlayerProgress'
 export * from './getVideos'
 export * from './saveUserInfo'
+export * from './getPlayerInfo'