From c2c5e9ad0cd1ec8895cadf3b1fb3c9d2e785ced8 Mon Sep 17 00:00:00 2001 From: Mirlan Date: Wed, 26 Aug 2020 19:30:37 +0600 Subject: [PATCH] Ott 339 matches request (#103) * refactor(#314): moved matches state from header filters store to specific profiles * refactor(#314): changed Mathes type import path Co-authored-by: mirlan.maksitaliev --- .../HeaderFilters/store/hooks/index.tsx | 114 +----------------- src/features/HomePage/hooks.tsx | 39 ++++++ src/features/HomePage/index.tsx | 15 ++- src/features/MatchCard/CardFinished/index.tsx | 2 +- src/features/MatchCard/CardLive/index.tsx | 2 +- src/features/MatchCard/CardSoon/index.tsx | 4 +- src/features/MatchCard/index.tsx | 2 +- src/features/Matches/hooks.tsx | 83 +++++++++++++ src/features/Matches/index.tsx | 19 +-- src/features/MatchesGrid/index.tsx | 2 +- src/features/MatchesSlider/hooks.tsx | 2 +- src/features/MatchesSlider/index.tsx | 2 +- src/features/TeamPage/hooks.tsx | 41 ++++--- src/features/TeamPage/index.tsx | 3 +- src/features/TournamentPage/hooks.tsx | 49 +++++--- src/features/TournamentPage/index.tsx | 3 +- 16 files changed, 215 insertions(+), 167 deletions(-) create mode 100644 src/features/HomePage/hooks.tsx create mode 100644 src/features/Matches/hooks.tsx diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index d0cc0184..bbf1b7c2 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -1,50 +1,18 @@ -import { - useMemo, - useState, - useEffect, - useCallback, -} from 'react' +import { useMemo } from 'react' -import map from 'lodash/map' -import flatten from 'lodash/flatten' -import pipe from 'lodash/fp/pipe' -import fpMap from 'lodash/fp/map' -import fpOrderBy from 'lodash/fp/orderBy' import isNumber from 'lodash/isNumber' import format from 'date-fns/format' import startOfDay from 'date-fns/startOfDay' -import type { Matches, Content } from 'requests' -import { getMatches } from 'requests' -import { SportTypes, SPORT_NAMES } from 'config' -import { getProfileLogo } from 'helpers' +import { SportTypes } from 'config' import { useQueryParamStore } from 'hooks' -import { useLexicsStore } from 'features/LexicsStore' import { filterKeys } from '../config' import { isValidDate } from '../helpers/isValidDate' import { isValidSportType } from '../helpers/isValidSportType' import { isValidMatchStatus } from '../helpers/isValidMatchStatus' -type Name = 'name_rus' | 'name_eng' - -export type Match = { - date: string, - id: number, - preview: string, - sportName: string, - sportType: number, - streamStatus: number, - team1Logo: string, - team1Name: string, - team1Score: number, - team2Logo: string, - team2Name: string, - team2Score: number, - tournamentName: string, -} - export enum MatchStatuses { Live = 2, Finished = 3, @@ -54,9 +22,6 @@ export enum MatchStatuses { const dateFormat = 'dd/MM/yyyy HH:mm:ss' export const useFilters = () => { - const { - suffix, - } = useLexicsStore() const [selectedDate, setSelectedDate] = useQueryParamStore({ defaultValue: new Date(), key: filterKeys.DATE, @@ -90,79 +55,9 @@ export const useFilters = () => { validator: isNumber, }) - const [teamId, setTeamId] = useState(null) - const [matches, setMatches] = useState({ - broadcast: [], - features: [], - highlights: [], - isVideoSections: false, - }) - - // временно здесь запрашиваются матчи при изменении фильтров, - // можно эту логику вырезать и вставить в компонент матчей - useEffect(() => { - const formattedDate = format(startOfDay(selectedDate), dateFormat) - getMatches({ - date: formattedDate, - matchStatus: selectedMatchStatus, - sportType: selectedSportTypeId, - teamId, - tournamentId: selectedTournamentId, - }).then(setMatches) - }, [ - selectedDate, - selectedMatchStatus, - selectedSportTypeId, - selectedTournamentId, - teamId, - ]) - - const prepareMatches = useCallback((content: Array) => pipe( - fpMap>(({ - matches: matchesList, - sport, - ...rest - }) => map(matchesList, ({ - date, - id, - stream_status, - team1, - team2, - }) => ({ - date, - id, - preview: '/images/preview.png', - sportName: SPORT_NAMES[sport], - sportType: sport, - streamStatus: stream_status, - team1Logo: getProfileLogo({ - id: team1.id, - profileType: 2, - sportType: sport, - }), - team1Name: team1[`name_${suffix}` as Name], - team1Score: team1.score, - team2Logo: getProfileLogo({ - id: team2.id, - profileType: 2, - sportType: sport, - }), - team2Name: team2[`name_${suffix}` as Name], - team2Score: team2.score, - tournamentName: rest[`name_${suffix}` as Name], - }))), - flatten, - fpOrderBy((match: Match) => Number(new Date(match.date)), 'desc'), - )(content) as Array, [suffix]) - const store = useMemo(() => ({ - matches: { - broadcast: prepareMatches(matches.broadcast), - features: prepareMatches(matches.features), - highlights: prepareMatches(matches.highlights), - isVideoSections: matches.isVideoSections, - }, selectedDate, + selectedDateFormatted: format(startOfDay(selectedDate), dateFormat), selectedMatchStatus, selectedSportTypeId, selectedTournamentId, @@ -170,7 +65,6 @@ export const useFilters = () => { setSelectedMatchStatus, setSelectedSportTypeId, setSelectedTournamentId, - setTeamId, }), [ selectedDate, selectedMatchStatus, @@ -180,8 +74,6 @@ export const useFilters = () => { setSelectedMatchStatus, setSelectedSportTypeId, setSelectedTournamentId, - matches, - prepareMatches, ]) return store diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx new file mode 100644 index 00000000..814a59aa --- /dev/null +++ b/src/features/HomePage/hooks.tsx @@ -0,0 +1,39 @@ +import { useEffect, useState } from 'react' + +import type { Matches } from 'requests' +import { getMatches } from 'requests' + +import { useHeaderFiltersStore } from 'features/HeaderFilters' + +export const useHomePage = () => { + const { + selectedDateFormatted, + selectedMatchStatus, + selectedSportTypeId, + selectedTournamentId, + } = useHeaderFiltersStore() + + const [matches, setMatches] = useState({ + broadcast: [], + features: [], + highlights: [], + isVideoSections: false, + }) + + useEffect(() => { + getMatches({ + date: selectedDateFormatted, + matchStatus: selectedMatchStatus, + sportType: selectedSportTypeId, + teamId: null, + tournamentId: selectedTournamentId, + }).then(setMatches) + }, [ + selectedDateFormatted, + selectedMatchStatus, + selectedSportTypeId, + selectedTournamentId, + ]) + + return { matches } +} diff --git a/src/features/HomePage/index.tsx b/src/features/HomePage/index.tsx index 8a0be7b1..0cc78fb1 100644 --- a/src/features/HomePage/index.tsx +++ b/src/features/HomePage/index.tsx @@ -1,10 +1,15 @@ import React from 'react' import { Matches } from 'features/Matches' + +import { useHomePage } from './hooks' import { Content } from './styled' -export const HomePage = () => ( - - - -) +export const HomePage = () => { + const { matches } = useHomePage() + return ( + + + + ) +} diff --git a/src/features/MatchCard/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx index 6315c378..f6ded47a 100644 --- a/src/features/MatchCard/CardFinished/index.tsx +++ b/src/features/MatchCard/CardFinished/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import styled from 'styled-components/macro' -import type { Match } from 'features/HeaderFilters' +import type { Match } from 'features/Matches' import { getSportColor } from 'helpers' import { SportName } from 'features/Common' import { T9n } from 'features/T9n' diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx index 7ffd0fc4..9bcefc0d 100644 --- a/src/features/MatchCard/CardLive/index.tsx +++ b/src/features/MatchCard/CardLive/index.tsx @@ -7,7 +7,7 @@ import React, { import styled from 'styled-components/macro' import differenceInMilliseconds from 'date-fns/differenceInMilliseconds' -import type { Match } from 'features/HeaderFilters' +import type { Match } from 'features/Matches' import { getSportColor, msToMinutesAndSeconds } from 'helpers' import { SportName } from 'features/Common' import { T9n } from 'features/T9n' diff --git a/src/features/MatchCard/CardSoon/index.tsx b/src/features/MatchCard/CardSoon/index.tsx index 2c69c930..e7b88ca0 100644 --- a/src/features/MatchCard/CardSoon/index.tsx +++ b/src/features/MatchCard/CardSoon/index.tsx @@ -4,7 +4,7 @@ import React, { useCallback } from 'react' import styled from 'styled-components/macro' import format from 'date-fns/format' -import type { Match } from 'features/HeaderFilters' +import type { Match } from 'features/Matches' import { getSportColor, handleImageError } from 'helpers' import { SportName } from 'features/Common' import { T9n } from 'features/T9n' @@ -35,7 +35,7 @@ const TeamLogos = styled.div` ` const TeamLogo = styled.img` - width: 70px; + width: 70px; ` const TeamName = styled(CommonTeamName)` diff --git a/src/features/MatchCard/index.tsx b/src/features/MatchCard/index.tsx index 684be766..1aed7895 100644 --- a/src/features/MatchCard/index.tsx +++ b/src/features/MatchCard/index.tsx @@ -1,6 +1,6 @@ import React from 'react' -import type { Match } from 'features/HeaderFilters' +import type { Match } from 'features/Matches' import { MatchStatuses } from 'features/HeaderFilters' import { CardLive } from './CardLive' diff --git a/src/features/Matches/hooks.tsx b/src/features/Matches/hooks.tsx new file mode 100644 index 00000000..fb6c569d --- /dev/null +++ b/src/features/Matches/hooks.tsx @@ -0,0 +1,83 @@ +import { useMemo } from 'react' + +import map from 'lodash/map' +import flatten from 'lodash/flatten' +import pipe from 'lodash/fp/pipe' +import fpMap from 'lodash/fp/map' +import fpOrderBy from 'lodash/fp/orderBy' + +import type { Matches, Content } from 'requests' +import { SPORT_NAMES } from 'config' +import { getProfileLogo } from 'helpers' +import { useLexicsStore } from 'features/LexicsStore' + +export type Props = { + matches: Matches, +} + +type Name = 'name_rus' | 'name_eng' + +export type Match = { + date: string, + id: number, + preview: string, + sportName: string, + sportType: number, + streamStatus: number, + team1Logo: string, + team1Name: string, + team1Score: number, + team2Logo: string, + team2Name: string, + team2Score: number, + tournamentName: string, +} + +const prepareMatches = (content: Array, suffix: string) => pipe( + fpMap>(({ + matches: matchesList, + sport, + ...rest + }) => map(matchesList, ({ + date, + id, + stream_status, + team1, + team2, + }) => ({ + date, + id, + preview: '/images/preview.png', + sportName: SPORT_NAMES[sport], + sportType: sport, + streamStatus: stream_status, + team1Logo: getProfileLogo({ + id: team1.id, + profileType: 2, + sportType: sport, + }), + team1Name: team1[`name_${suffix}` as Name], + team1Score: team1.score, + team2Logo: getProfileLogo({ + id: team2.id, + profileType: 2, + sportType: sport, + }), + team2Name: team2[`name_${suffix}` as Name], + team2Score: team2.score, + tournamentName: rest[`name_${suffix}` as Name], + }))), + flatten, + fpOrderBy((match: Match) => Number(new Date(match.date)), 'desc'), +)(content) as Array + +export const useMatches = ({ matches }: Props) => { + const { suffix } = useLexicsStore() + + return useMemo(() => ({ + broadcast: prepareMatches(matches.broadcast, suffix), + features: prepareMatches(matches.features, suffix), + highlights: prepareMatches(matches.highlights, suffix), + isVideoSections: matches.isVideoSections, + }), [suffix, matches]) +} diff --git a/src/features/Matches/index.tsx b/src/features/Matches/index.tsx index d5298625..8fd1fefa 100644 --- a/src/features/Matches/index.tsx +++ b/src/features/Matches/index.tsx @@ -2,22 +2,23 @@ import React, { Fragment } from 'react' import isEmpty from 'lodash/isEmpty' -import { useHeaderFiltersStore } from 'features/HeaderFilters' import { MatchesSlider } from 'features/MatchesSlider' import { MatchesGrid } from 'features/MatchesGrid' import { T9n } from 'features/T9n' +import type { Props } from './hooks' +import { useMatches } from './hooks' import { Title, Section } from './styled' -export const Matches = () => { +export type { Match } from './hooks' + +export const Matches = (props: Props) => { const { - matches: { - broadcast, - features, - highlights, - isVideoSections, - }, - } = useHeaderFiltersStore() + broadcast, + features, + highlights, + isVideoSections, + } = useMatches(props) if (isVideoSections) { return ( diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx index eb82b4bf..95d219d4 100644 --- a/src/features/MatchesGrid/index.tsx +++ b/src/features/MatchesGrid/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import map from 'lodash/map' -import type { Match } from 'features/HeaderFilters' +import type { Match } from 'features/Matches' import { MatchCard } from 'features/MatchCard' import { Wrapper } from './styled' diff --git a/src/features/MatchesSlider/hooks.tsx b/src/features/MatchesSlider/hooks.tsx index 89e2fc5e..8c1a7f27 100644 --- a/src/features/MatchesSlider/hooks.tsx +++ b/src/features/MatchesSlider/hooks.tsx @@ -8,7 +8,7 @@ import { import throttle from 'lodash/throttle' -import type { Match } from 'features/HeaderFilters' +import type { Match } from 'features/Matches' import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from 'features/MatchCard/config' const MATCHES_TO_SCROLL = 6 diff --git a/src/features/MatchesSlider/index.tsx b/src/features/MatchesSlider/index.tsx index b0b5208d..e5361c18 100644 --- a/src/features/MatchesSlider/index.tsx +++ b/src/features/MatchesSlider/index.tsx @@ -3,7 +3,7 @@ import React from 'react' import map from 'lodash/map' import isEmpty from 'lodash/isEmpty' -import type { Match } from 'features/HeaderFilters' +import type { Match } from 'features/Matches' import { MatchCard } from 'features/MatchCard' import { useMatchesSlider } from './hooks' diff --git a/src/features/TeamPage/hooks.tsx b/src/features/TeamPage/hooks.tsx index 1591632c..8a257c48 100644 --- a/src/features/TeamPage/hooks.tsx +++ b/src/features/TeamPage/hooks.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' -import type { TeamInfo } from 'requests' -import { getTeamInfo } from 'requests' +import type { TeamInfo, Matches } from 'requests' +import { getTeamInfo, getMatches } from 'requests' import { useHeaderFiltersStore } from 'features/HeaderFilters' import { useLexicsStore } from 'features/LexicsStore' @@ -17,10 +17,17 @@ export const useTeamPage = () => { const { suffix } = useLexicsStore() const { - setSelectedSportTypeId, - setTeamId, + selectedDateFormatted, + selectedMatchStatus, } = useHeaderFiltersStore() + const [matches, setMatches] = useState({ + broadcast: [], + features: [], + highlights: [], + isVideoSections: false, + }) + const { [`name_${suffix}` as Name]: name = '', } = teamProfile || {} @@ -30,26 +37,32 @@ export const useTeamPage = () => { } = teamProfile?.country || {} useEffect(() => { - setSelectedSportTypeId(sportType) - setTeamId(teamId) - getTeamInfo(sportType, teamId) .then(setTeamProfile) - - return () => { - setSelectedSportTypeId(null) - setTeamId(null) - } }, [ sportType, teamId, - setSelectedSportTypeId, - setTeamId, + ]) + + useEffect(() => { + getMatches({ + date: selectedDateFormatted, + matchStatus: selectedMatchStatus, + sportType, + teamId, + tournamentId: null, + }).then(setMatches) + }, [ + selectedDateFormatted, + selectedMatchStatus, + sportType, + teamId, ]) return { infoItems: [country], + matches, name, sportType, } diff --git a/src/features/TeamPage/index.tsx b/src/features/TeamPage/index.tsx index ae095dab..a6409597 100644 --- a/src/features/TeamPage/index.tsx +++ b/src/features/TeamPage/index.tsx @@ -12,6 +12,7 @@ import { Content } from './styled' export const TeamPage = () => { const { infoItems, + matches, name, } = useTeamPage() @@ -24,7 +25,7 @@ export const TeamPage = () => { name={name} infoItems={infoItems} /> - + ) diff --git a/src/features/TournamentPage/hooks.tsx b/src/features/TournamentPage/hooks.tsx index 550343e5..667c48de 100644 --- a/src/features/TournamentPage/hooks.tsx +++ b/src/features/TournamentPage/hooks.tsx @@ -1,11 +1,10 @@ -import type { TournamentInfo } from 'requests' - import { useEffect, useState } from 'react' import { useHeaderFiltersStore } from 'features/HeaderFilters' import { useLexicsStore } from 'features/LexicsStore' -import { getTournamentInfo } from 'requests' +import type { TournamentInfo, Matches } from 'requests' +import { getTournamentInfo, getMatches } from 'requests' import { useSportNameParam, usePageId } from 'hooks' @@ -14,14 +13,21 @@ type Name = 'name_rus' | 'name_eng' export const useTournamentPage = () => { const [tournamentProfile, setTournamentProfile] = useState(null) const { sportType } = useSportNameParam() - const pageId = usePageId() + const tournamentId = usePageId() const { suffix } = useLexicsStore() const { - setSelectedSportTypeId, - setSelectedTournamentId, + selectedDateFormatted, + selectedMatchStatus, } = useHeaderFiltersStore() + const [matches, setMatches] = useState({ + broadcast: [], + features: [], + highlights: [], + isVideoSections: false, + }) + const { [`name_${suffix}` as Name]: name = '', } = tournamentProfile || {} @@ -31,26 +37,33 @@ export const useTournamentPage = () => { } = tournamentProfile?.country || {} useEffect(() => { - setSelectedSportTypeId(sportType) - setSelectedTournamentId(pageId) - - getTournamentInfo(sportType, pageId) + getTournamentInfo(sportType, tournamentId) .then(setTournamentProfile) - - return () => { - setSelectedSportTypeId(null) - setSelectedTournamentId(null) - } }, [ sportType, - pageId, - setSelectedSportTypeId, - setSelectedTournamentId, + tournamentId, + ]) + + + useEffect(() => { + getMatches({ + date: selectedDateFormatted, + matchStatus: selectedMatchStatus, + sportType, + teamId: null, + tournamentId, + }).then(setMatches) + }, [ + selectedDateFormatted, + selectedMatchStatus, + sportType, + tournamentId, ]) return { infoItems: [country], + matches, name, } } diff --git a/src/features/TournamentPage/index.tsx b/src/features/TournamentPage/index.tsx index ddee08ae..9aba3eb3 100644 --- a/src/features/TournamentPage/index.tsx +++ b/src/features/TournamentPage/index.tsx @@ -12,6 +12,7 @@ import { Content } from './styled' export const TournamentPage = () => { const { infoItems, + matches, name, } = useTournamentPage() @@ -24,7 +25,7 @@ export const TournamentPage = () => { name={name} infoItems={infoItems} /> - + )