Ruslan Khayrullin
3 years ago
parent
376aedaea2
commit
ee3b93c622
@ -0,0 +1,58 @@ |
||||
import { |
||||
useEffect, |
||||
useState, |
||||
useMemo, |
||||
useCallback, |
||||
} from 'react' |
||||
|
||||
import flatMap from 'lodash/flatMap' |
||||
import reduce from 'lodash/reduce' |
||||
import includes from 'lodash/includes' |
||||
|
||||
import type { MatchInfo } from 'requests' |
||||
import { getTeamsStats, TeamStatItem } from 'requests' |
||||
|
||||
import { usePageParams } from 'hooks/usePageParams' |
||||
|
||||
import { useLexicsConfig } from 'features/LexicsStore' |
||||
|
||||
export const useTeamsStats = (matchProfile: MatchInfo) => { |
||||
const [teamsStats, setTeamsStats] = useState<{ |
||||
[teamId: string]: Array<TeamStatItem>, |
||||
}>({}) |
||||
|
||||
const { profileId: matchId, sportName } = usePageParams() |
||||
|
||||
const lexics = useMemo(() => reduce<TeamStatItem, Array<number>>( |
||||
flatMap(teamsStats), |
||||
(acc, curr) => { |
||||
if (curr.param1?.lexic && !includes(acc, curr.param1.lexic)) { |
||||
acc.push(curr.param1.lexic) |
||||
} |
||||
|
||||
return acc |
||||
}, |
||||
[], |
||||
), [teamsStats]) |
||||
|
||||
useLexicsConfig(lexics) |
||||
|
||||
const fetchTeamsStats = useCallback((second?: number) => { |
||||
if (!sportName) return |
||||
|
||||
getTeamsStats({ |
||||
matchId, |
||||
second, |
||||
sportName, |
||||
}).then(setTeamsStats) |
||||
}, [matchId, sportName]) |
||||
|
||||
useEffect(() => { |
||||
fetchTeamsStats() |
||||
}, [fetchTeamsStats]) |
||||
|
||||
return { |
||||
fetchTeamsStats, |
||||
teamsStats, |
||||
} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export const CELL_WIDTH = 47 |
||||
@ -0,0 +1,61 @@ |
||||
import type { SyntheticEvent } from 'react' |
||||
import { |
||||
useRef, |
||||
useState, |
||||
useEffect, |
||||
} from 'react' |
||||
|
||||
import { isMobileDevice } from 'config/userAgent' |
||||
|
||||
import { CELL_WIDTH } from './config' |
||||
|
||||
export const usePlayersTable = () => { |
||||
const containerRef = useRef<HTMLDivElement>(null) |
||||
const tableWrapperRef = useRef<HTMLDivElement>(null) |
||||
|
||||
const [showLeftArrow, setShowLeftArrow] = useState(false) |
||||
const [showRightArrow, setShowRightArrow] = useState(false) |
||||
|
||||
const cellWidth = isMobileDevice |
||||
? ((containerRef.current?.clientWidth || 0) - 98) / 4 |
||||
: CELL_WIDTH |
||||
|
||||
const slideLeft = () => tableWrapperRef.current!.scrollBy(-cellWidth, 0) |
||||
const slideRight = () => tableWrapperRef.current!.scrollBy(cellWidth, 0) |
||||
|
||||
const handleScroll = (e: SyntheticEvent<HTMLDivElement>) => { |
||||
const { |
||||
clientWidth, |
||||
scrollLeft, |
||||
scrollWidth, |
||||
} = e.currentTarget |
||||
|
||||
const scrollRight = scrollWidth - (scrollLeft + clientWidth) |
||||
|
||||
setShowLeftArrow(scrollLeft > 1) |
||||
setShowRightArrow(scrollRight > 1) |
||||
} |
||||
|
||||
useEffect(() => { |
||||
const { |
||||
clientWidth = 0, |
||||
scrollLeft = 0, |
||||
scrollWidth = 0, |
||||
} = tableWrapperRef.current || {} |
||||
|
||||
const scrollRight = scrollWidth - (scrollLeft + clientWidth) |
||||
|
||||
setShowRightArrow(scrollRight > 1) |
||||
}, []) |
||||
|
||||
return { |
||||
cellWidth, |
||||
containerRef, |
||||
handleScroll, |
||||
showLeftArrow, |
||||
showRightArrow, |
||||
slideLeft, |
||||
slideRight, |
||||
tableWrapperRef, |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,32 @@ |
||||
import { useState } from 'react' |
||||
|
||||
import { useMatchPageStore } from 'features/MatchPage/store' |
||||
|
||||
import { StatsType, Tabs } from './config' |
||||
|
||||
export const useTabStats = () => { |
||||
const [statsType, setStatsType] = useState<StatsType>(StatsType.FINAL_STATS) |
||||
const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.TEAMS) |
||||
|
||||
const { fetchTeamsStats, teamsStats } = useMatchPageStore() |
||||
|
||||
const isFinalStatsType = statsType === StatsType.FINAL_STATS |
||||
|
||||
const switchTitleLexic = isFinalStatsType ? 'final_stats' : 'current_stats' |
||||
const tooltipLexic = isFinalStatsType ? 'display_stats_according_to_video' : 'display_all_stats' |
||||
|
||||
const toggleStatsType = () => { |
||||
const newStatsType = isFinalStatsType ? StatsType.CURRENT_STATS : StatsType.FINAL_STATS |
||||
|
||||
setStatsType(newStatsType) |
||||
} |
||||
|
||||
return { |
||||
isFinalStatsType, |
||||
selectedTab, |
||||
setSelectedTab, |
||||
switchTitleLexic, |
||||
toggleStatsType, |
||||
tooltipLexic, |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
import isUndefined from 'lodash/isUndefined' |
||||
|
||||
import { callApi } from 'helpers' |
||||
|
||||
type Param = { |
||||
clickable: boolean, |
||||
data_type: string, |
||||
id: number, |
||||
lexic: number, |
||||
markers: Array<number>, |
||||
name_en: string, |
||||
name_ru: string, |
||||
val: number, |
||||
} |
||||
|
||||
export type TeamStatItem = { |
||||
lexic: number, |
||||
name_en: string, |
||||
name_ru: string, |
||||
order: number, |
||||
param1: Param, |
||||
param2: Param | null, |
||||
} |
||||
|
||||
type Response = { |
||||
data?: { |
||||
[teamId: string]: Array<TeamStatItem>, |
||||
}, |
||||
error?: string, |
||||
message?: string, |
||||
} |
||||
|
||||
type GetTeamsStatsArgs = { |
||||
matchId: number, |
||||
second?: number, |
||||
sportName: string, |
||||
} |
||||
|
||||
export const getTeamsStats = async ({ |
||||
matchId, |
||||
second, |
||||
sportName, |
||||
}: GetTeamsStatsArgs) => { |
||||
const config = { |
||||
method: 'GET', |
||||
} |
||||
|
||||
const response: Response = await callApi({ |
||||
config, |
||||
url: `http://3.248.230.144:8888/${sportName}/matches/${matchId}/teams/stats?group_num=0${isUndefined(second) ? '' : `&second=${second}`}`, |
||||
}) |
||||
|
||||
if (response.error) Promise.reject(response) |
||||
|
||||
return Promise.resolve(response.data || {}) |
||||
} |
||||
Loading…
Reference in new issue