diff --git a/src/config/procedures.tsx b/src/config/procedures.tsx index 40563ec1..c164fad8 100644 --- 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', diff --git a/src/features/StreamPlayer/styled.tsx b/src/features/StreamPlayer/styled.tsx index 355a7143..a0f77be7 100644 --- a/src/features/StreamPlayer/styled.tsx +++ b/src/features/StreamPlayer/styled.tsx @@ -114,6 +114,7 @@ export const PlayerWrapper = styled.div` export const LoaderWrapper = styled.div` position: absolute; top: 0; + left: 0; width: 100%; height: 100%; display: flex; diff --git a/src/features/TournamentsPopup/config.tsx b/src/features/TournamentsPopup/config.tsx new file mode 100644 index 00000000..94fdc081 --- /dev/null +++ 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, +] diff --git a/src/features/TournamentsPopup/index.tsx b/src/features/TournamentsPopup/index.tsx index 38135def..4d50e8e6 100644 --- 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 ( - - - - - - - {tournaments.map((tournament) => ( - - - - ))} - - - - - - - - {teams.map((team) => ( - - - - ))} - - + { + isFetching ? ( + + + + ) : ( + <> + + + + + + {tournaments.map((tournament) => ( + + + + ))} + + + + + + + + {teams.map((team) => ( + + + + ))} + + + + ) + } diff --git a/src/features/TournamentsPopup/store/hooks/index.tsx b/src/features/TournamentsPopup/store/hooks/index.tsx index 82d82b7d..1499cfc0 100644 --- 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([]) + const [teams, setTeams] = useState([]) + const close = () => setIsOpen(false) const open = () => setIsOpen(true) + const convertData = useCallback( + (data: Array | Array) => 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, } } diff --git a/src/features/TournamentsPopup/styled.tsx b/src/features/TournamentsPopup/styled.tsx index 56107334..6d51b03d 100644 --- 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; diff --git a/src/requests/getTeams.tsx b/src/requests/getTeams.tsx new file mode 100644 index 00000000..8405d64b --- /dev/null +++ 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) +: Promise> => { + const config = { + body: { + params: { + _p_sport_id: sportId, + _p_teams: teams, + }, + proc, + }, + } + + return callApi({ + config, + url: DATA_URL, + }) +} diff --git a/src/requests/getTournaments.tsx b/src/requests/getTournaments.tsx new file mode 100644 index 00000000..2f4b134b --- /dev/null +++ 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) +: Promise> => { + const config = { + body: { + params: { + _p_sport_id: sportId, + _p_tournaments: tournaments, + }, + proc, + }, + } + + return callApi({ + config, + url: DATA_URL, + }) +}