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

4 years ago · 9c71b58e1d
parent a38def840c
commit 9c71b58e1d
8 changed files with 218 additions and 285 deletions
--- a/src/config/procedures.tsx
+++ b/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',
--- a/src/features/StreamPlayer/styled.tsx
+++ b/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;
--- a/src/features/TournamentsPopup/config.tsx
+++ b/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,
+]
--- a/src/features/TournamentsPopup/index.tsx
+++ b/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,294 +14,67 @@ import {
 } from './styled'

 import { useTournamentPopupStore } from './store'
+import { Loader } from '../Loader'
+import { LoaderWrapper } from '../StreamPlayer/styled'

 export const TournamentsPopup = () => {
-  const { close, isOpen } = useTournamentPopupStore()
-
-  const tournaments: Tournaments = [
-    {
-      country: {
-        id: 231,
-        name_eng: 'Czech Republic',
-        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,
-    },
-  ]
+  const {
+    close,
+    isFetching,
+    isOpen,
+    teams,
+    tournaments,
+  } = useTournamentPopupStore()

  return (
    <ScModalContainer isOpen={isOpen} close={close} withCloseButton>
      <Wrapper>
-        <ScBody>
-          <ScTournamentList>
-            <ScHeaderTitle>
-              <T9n t='my_tournaments' />
-            </ScHeaderTitle>
-            <ScList>
-              {tournaments.map((tournament) => (
-                <StyledLink
-                  id={tournament.id}
-                  profileType={ProfileTypes.TOURNAMENTS}
-                  sportType={SportTypes.FOOTBALL}
-                  onClick={close}
-                >
-                  <ScItem isIcon={false} tournament={tournament} />
-                </StyledLink>
-              ))}
-            </ScList>
-          </ScTournamentList>
-          <ScTournamentList>
-            <ScHeaderTitle>
-              <T9n t='my_teams' />
-            </ScHeaderTitle>
-            <ScList>
-              {teams.map((team) => (
-                <StyledLink
-                  id={team.id}
-                  profileType={ProfileTypes.TEAMS}
-                  sportType={SportTypes.FOOTBALL}
-                  onClick={close}
-                >
-                  <ScItem isIcon={false} tournament={team} />
-                </StyledLink>
-              ))}
-            </ScList>
-          </ScTournamentList>
+        <ScBody>{
+          isFetching ? (
+            <LoaderWrapper>
+              <Loader color='#515151' />
+            </LoaderWrapper>
+          ) : (
+            <>
+              <ScTournamentList>
+                <ScHeaderTitle>
+                  <T9n t='my_tournaments' />
+                </ScHeaderTitle>
+                <ScList>
+                  {tournaments.map((tournament) => (
+                    <StyledLink
+                      id={tournament.id}
+                      profileType={ProfileTypes.TOURNAMENTS}
+                      sportType={SportTypes.FOOTBALL}
+                      onClick={close}
+                      key={tournament.id}
+                    >
+                      <ScItem isIcon={false} tournament={tournament} />
+                    </StyledLink>
+                  ))}
+                </ScList>
+              </ScTournamentList>
+              <ScTournamentList>
+                <ScHeaderTitle>
+                  <T9n t='my_teams' />
+                </ScHeaderTitle>
+                <ScList>
+                  {teams.map((team) => (
+                    <StyledLink
+                      id={team.id}
+                      profileType={ProfileTypes.TEAMS}
+                      sportType={SportTypes.FOOTBALL}
+                      onClick={close}
+                      key={team.id}
+                    >
+                      <ScItem isIcon={false} tournament={team} />
+                    </StyledLink>
+                  ))}
+                </ScList>
+              </ScTournamentList>
+            </>
+          )
+        }
        </ScBody>
      </Wrapper>
    </ScModalContainer>
--- a/src/features/TournamentsPopup/store/hooks/index.tsx
+++ b/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,
  }
 }
--- a/src/features/TournamentsPopup/styled.tsx
+++ b/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;
--- a/src/requests/getTeams.tsx
+++ b/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,
+  })
+}
--- a/src/requests/getTournaments.tsx
+++ b/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,
+  })
+}