fix(887): reuse same playlist data in match page (#320)
Mirlan
5 years ago
committed by
GitHub
parent
a2b2299492
commit
3b10015c9a
@ -1,50 +1,69 @@ |
||||
import { |
||||
useCallback, |
||||
useState, |
||||
useEffect, |
||||
useState, |
||||
} from 'react' |
||||
|
||||
import type { Settings } from 'features/MatchPopup' |
||||
import isEmpty from 'lodash/isEmpty' |
||||
|
||||
import { getPlayerPlaylists, Episodes } from 'requests' |
||||
import type { Episodes } from 'requests' |
||||
import { getPlayerPlaylists } from 'requests' |
||||
|
||||
import { usePageId, useSportNameParam } from 'hooks' |
||||
|
||||
import { PlaylistOption, PlaylistTypes } from 'features/MatchPage/types' |
||||
import { |
||||
defaultSettings, |
||||
Settings, |
||||
useMatchPopupStore, |
||||
} from 'features/MatchPopup' |
||||
|
||||
type Args = { |
||||
initialEpisodes?: Episodes, |
||||
initialSelectedPlaylist?: PlaylistOption, |
||||
} |
||||
|
||||
export const useEpisodes = ({ initialEpisodes, initialSelectedPlaylist }: Args) => { |
||||
const [episodes, setEpisodes] = useState(initialEpisodes || []) |
||||
export const useEpisodes = () => { |
||||
const { |
||||
handlePlaylistClick, |
||||
matchPlaylists: playlists, |
||||
selectedPlaylist, |
||||
settings, |
||||
} = useMatchPopupStore() |
||||
const [episodes, setEpisodes] = useState<Episodes>([]) |
||||
const { sportType } = useSportNameParam() |
||||
const matchId = usePageId() |
||||
|
||||
const fetchEpisodes = useCallback(( |
||||
selectedPlaylist: PlaylistOption, |
||||
settings?: Settings, |
||||
playlistOption: PlaylistOption, |
||||
popupSettings: Settings = defaultSettings, |
||||
) => { |
||||
if (!selectedPlaylist) return |
||||
|
||||
if (selectedPlaylist.type === PlaylistTypes.PLAYER) { |
||||
if (playlistOption.type === PlaylistTypes.PLAYER) { |
||||
getPlayerPlaylists({ |
||||
matchId, |
||||
playerId: selectedPlaylist.id, |
||||
settings, |
||||
playerId: playlistOption.id, |
||||
settings: popupSettings, |
||||
sportType, |
||||
}).then(setEpisodes) |
||||
} else if (selectedPlaylist.type === PlaylistTypes.MATCH) { |
||||
setEpisodes(selectedPlaylist.data) |
||||
} else if (playlistOption.type === PlaylistTypes.MATCH) { |
||||
setEpisodes(playlistOption.data) |
||||
} |
||||
}, [matchId, sportType]) |
||||
|
||||
useEffect(() => { |
||||
if (initialSelectedPlaylist?.type === PlaylistTypes.MATCH) { |
||||
fetchEpisodes(initialSelectedPlaylist) |
||||
if (!selectedPlaylist && playlists && !isEmpty(playlists.match)) { |
||||
handlePlaylistClick(playlists.match[0]) |
||||
} |
||||
}, [ |
||||
selectedPlaylist, |
||||
playlists, |
||||
handlePlaylistClick, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
if (selectedPlaylist) { |
||||
fetchEpisodes(selectedPlaylist, settings) |
||||
} |
||||
}, [initialSelectedPlaylist, fetchEpisodes]) |
||||
}, [ |
||||
settings, |
||||
selectedPlaylist, |
||||
fetchEpisodes, |
||||
]) |
||||
|
||||
return { episodes, fetchEpisodes } |
||||
return { episodes } |
||||
} |
||||
|
||||
@ -1,94 +0,0 @@ |
||||
import { useEffect, useState } from 'react' |
||||
|
||||
import isEmpty from 'lodash/isEmpty' |
||||
|
||||
import { getMatchPlaylists, Episodes } from 'requests' |
||||
|
||||
import { usePageId, useSportNameParam } from 'hooks' |
||||
|
||||
import type { PlaylistOption, Playlists } from 'features/MatchPage/types' |
||||
|
||||
import { usePlaylistLexics } from 'features/MatchPopup/store/hooks/usePlaylistLexics' |
||||
import { useMatchPopupStore } from 'features/MatchPopup' |
||||
import { buildPlaylists } from '../helpers/buildPlaylists' |
||||
import { useEpisodes } from './useEpisodes' |
||||
|
||||
const initialPlaylists: Playlists = { |
||||
interview: [], |
||||
match: [], |
||||
players: { |
||||
team1: [], |
||||
team2: [], |
||||
}, |
||||
} |
||||
|
||||
type Args = { |
||||
initialEpisodes?: Episodes, |
||||
initialSelectedPlaylist?: PlaylistOption, |
||||
isFinishedMatch: boolean, |
||||
} |
||||
|
||||
export const usePlaylists = ({ |
||||
initialEpisodes, |
||||
initialSelectedPlaylist, |
||||
isFinishedMatch, |
||||
}: Args) => { |
||||
const [playlists, setPlaylists] = useState<Playlists>(initialPlaylists) |
||||
const [selectedPlaylist, setSelectedPlaylist] = useState(initialSelectedPlaylist) |
||||
const { sportType } = useSportNameParam() |
||||
const { fetchLexics } = usePlaylistLexics() |
||||
const matchId = usePageId() |
||||
const { settings } = useMatchPopupStore() |
||||
|
||||
const { |
||||
episodes, |
||||
fetchEpisodes, |
||||
} = useEpisodes({ |
||||
initialEpisodes, |
||||
initialSelectedPlaylist, |
||||
}) |
||||
useEffect(() => { |
||||
if (selectedPlaylist) { |
||||
fetchEpisodes(selectedPlaylist, settings) |
||||
} |
||||
}, [ |
||||
fetchEpisodes, |
||||
selectedPlaylist, |
||||
settings, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
if (isFinishedMatch) { |
||||
getMatchPlaylists({ |
||||
matchId, |
||||
selectedActions: [], |
||||
sportType, |
||||
}).then(fetchLexics) |
||||
.then(buildPlaylists) |
||||
.then(setPlaylists) |
||||
} |
||||
}, [ |
||||
fetchLexics, |
||||
isFinishedMatch, |
||||
matchId, |
||||
sportType, |
||||
]) |
||||
|
||||
useEffect(() => { |
||||
if (!selectedPlaylist && !isEmpty(playlists.match)) { |
||||
setSelectedPlaylist(playlists.match[0]) |
||||
} |
||||
}, [selectedPlaylist, playlists]) |
||||
|
||||
const onPlaylistSelect = (option: PlaylistOption) => { |
||||
if (option === selectedPlaylist) return |
||||
setSelectedPlaylist(option) |
||||
} |
||||
|
||||
return { |
||||
episodes, |
||||
onPlaylistSelect, |
||||
playlists, |
||||
selectedPlaylist, |
||||
} |
||||
} |
||||
@ -1,37 +0,0 @@ |
||||
import { useEffect } from 'react' |
||||
import { useHistory, useLocation } from 'react-router' |
||||
|
||||
import type { Episodes } from 'requests' |
||||
|
||||
import type { PlaylistOption } from 'features/MatchPage/types' |
||||
|
||||
export type RouteState = { |
||||
/** |
||||
* Данные плейлиста если был выбран игрок |
||||
*/ |
||||
episodes?: Episodes, |
||||
|
||||
/** |
||||
* Выбранный плейлист на попапе матчей |
||||
*/ |
||||
selectedPlaylist: PlaylistOption, |
||||
} |
||||
|
||||
export const useRouteState = () => { |
||||
// считываем стейт из роутера
|
||||
// если есть стейт то на этот матч мы переходили
|
||||
// из попапа матчей и статус матча Завершенный
|
||||
// и запрос на получение ссылки лив матча можно пропустить
|
||||
const { state } = useLocation<RouteState | undefined>() |
||||
const history = useHistory() |
||||
|
||||
useEffect(() => { |
||||
// сбрасываем роут стейт
|
||||
history.replace(history.location.pathname) |
||||
}, [history]) |
||||
|
||||
return { |
||||
initialEpisodes: state?.episodes, |
||||
initialSelectedPlaylist: state?.selectedPlaylist, |
||||
} |
||||
} |
||||
@ -1,65 +1,31 @@ |
||||
import type { MouseEvent } from 'react' |
||||
import { useCallback, useState } from 'react' |
||||
import { useHistory } from 'react-router' |
||||
import { useState } from 'react' |
||||
|
||||
import { ProfileTypes } from 'config' |
||||
import { getPlayerPlaylists } from 'requests' |
||||
|
||||
import type { PlayerPlaylistOption } from 'features/MatchPage/types' |
||||
import type { MatchData, Settings } from 'features/MatchPopup/types' |
||||
import type { RouteState } from 'features/MatchPage/hooks/useRouteState' |
||||
import type { PlaylistOption, PlayerPlaylistOption } from 'features/MatchPage/types' |
||||
import { PopupPages } from 'features/MatchPopup/types' |
||||
import { getProfileUrl } from 'features/ProfileLink/helpers' |
||||
|
||||
type Args = { |
||||
goTo: (page: PopupPages) => void, |
||||
match: MatchData, |
||||
settings: Settings, |
||||
} |
||||
|
||||
export const usePlayerClickHandler = ({ |
||||
goTo, |
||||
match, |
||||
settings, |
||||
}: Args) => { |
||||
const history = useHistory() |
||||
const [selectedPlayer, setSelectedPlayer] = useState<PlayerPlaylistOption | null>(null) |
||||
const handlePlayerClick = (player: PlayerPlaylistOption, e: MouseEvent) => { |
||||
e.stopPropagation() |
||||
setSelectedPlayer(player) |
||||
const [selectedPlaylist, setSelectedPlaylist] = useState<PlaylistOption>() |
||||
const handlePlaylistClick = (playlist: PlaylistOption, e?: MouseEvent) => { |
||||
e?.stopPropagation() |
||||
if (playlist !== selectedPlaylist) { |
||||
setSelectedPlaylist(playlist) |
||||
} |
||||
} |
||||
const handlePlayerClick = (player: PlayerPlaylistOption, e?: MouseEvent) => { |
||||
handlePlaylistClick(player, e) |
||||
goTo(PopupPages.PLAYER_SETTINGS) |
||||
} |
||||
|
||||
const handleWatchEpisodesClick = useCallback(async () => { |
||||
if (!match || !selectedPlayer) return |
||||
const episodes = await getPlayerPlaylists({ |
||||
matchId: match.id, |
||||
playerId: selectedPlayer.id, |
||||
settings, |
||||
sportType: match.sportType, |
||||
}) |
||||
|
||||
const matchLink = getProfileUrl({ |
||||
id: match.id, |
||||
profileType: ProfileTypes.MATCHES, |
||||
sportType: match.sportType, |
||||
}) |
||||
|
||||
const routeState: RouteState = { |
||||
episodes, |
||||
selectedPlaylist: selectedPlayer, |
||||
} |
||||
history.push(matchLink, routeState) |
||||
}, [ |
||||
match, |
||||
selectedPlayer, |
||||
settings, |
||||
history, |
||||
]) |
||||
|
||||
return { |
||||
handlePlayerClick, |
||||
handleWatchEpisodesClick, |
||||
selectedPlayer, |
||||
handlePlaylistClick, |
||||
selectedPlaylist, |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue