From 0e68373893c7d1d2e152efb3afeb871fd6817d70 Mon Sep 17 00:00:00 2001 From: Andrei Dekterev Date: Wed, 1 Mar 2023 15:52:53 +0700 Subject: [PATCH] feat(#357): add refresh scores for home page --- .eslintrc | 1 + src/config/queries.tsx | 4 +++ .../MatchCard/CardFrontside/index.tsx | 7 +++-- src/features/MatchCard/index.tsx | 6 +++- .../components/MatchDescription/index.tsx | 3 +- src/features/MatchesGrid/index.tsx | 30 +++++++++++++++++-- src/requests/getLiveScores.tsx | 28 +++++++++++++++++ 7 files changed, 73 insertions(+), 6 deletions(-) create mode 100644 src/config/queries.tsx create mode 100644 src/requests/getLiveScores.tsx diff --git a/.eslintrc b/.eslintrc index 48fef2e1..1dbe0edb 100644 --- a/.eslintrc +++ b/.eslintrc @@ -11,6 +11,7 @@ "postro4no" ], "rules": { + "@typescript-eslint/no-explicit-any": "warn", "@typescript-eslint/array-type": [ "warn", { "default" : "generic" } diff --git a/src/config/queries.tsx b/src/config/queries.tsx new file mode 100644 index 00000000..c6726457 --- /dev/null +++ b/src/config/queries.tsx @@ -0,0 +1,4 @@ +export const querieKeys = { + matchScore: 'matchScore', + liveMatchScores: 'liveMatchScores', +} diff --git a/src/features/MatchCard/CardFrontside/index.tsx b/src/features/MatchCard/CardFrontside/index.tsx index 85dcc363..2379a6a2 100644 --- a/src/features/MatchCard/CardFrontside/index.tsx +++ b/src/features/MatchCard/CardFrontside/index.tsx @@ -41,12 +41,14 @@ import { import { useCardPreview } from './hooks' import { getPrepareTimeFormat } from '../helpers' import { getPrepareDateFormat } from '../helpers/getPrepareDateFormat' +import { LiveScore } from '../../../requests/getLiveScores' type Props = { isNeedFormatTimeChanged: boolean, match: Match, onClick: () => void, onKeyPress: (e: KeyboardEvent) => void, + score?: LiveScore, } export const CardFrontside = ({ @@ -54,6 +56,7 @@ export const CardFrontside = ({ match, onClick, onKeyPress, + score, }: Props) => { const location = useLocation() const { @@ -165,14 +168,14 @@ export const CardFrontside = ({ {team1InFavorites && } - {showScore && {team1.score}} + {showScore && {score?.team1.score ?? team1.score}} {team2InFavorites && } - {showScore && {team2.score}} + {showScore && {score?.team2.score ?? team2.score}} {!isMatchPage && ( diff --git a/src/features/MatchCard/index.tsx b/src/features/MatchCard/index.tsx index 567285d6..db334df0 100644 --- a/src/features/MatchCard/index.tsx +++ b/src/features/MatchCard/index.tsx @@ -2,15 +2,18 @@ import type { Match } from 'features/Matches' import { isMobileDevice } from 'config/userAgent' +import { LiveScore } from 'requests/getLiveScores' + import { CardFrontside } from './CardFrontside' import { CardFrontsideMobile } from './CardFrontside/MatchCardMobile' import { useCard } from './hooks' type Props = { match: Match, + score?: LiveScore, } -export const MatchCard = ({ match }: Props) => { +export const MatchCard = ({ match, score }: Props) => { const { isNeedFormatTimeChanged, isOwnedMatches, @@ -27,6 +30,7 @@ export const MatchCard = ({ match }: Props) => { onKeyPress={onKeyPress} isNeedFormatTimeChanged={isNeedFormatTimeChanged} isOwnedMatches={isOwnedMatches} + score={score} /> ) } diff --git a/src/features/MatchPage/components/MatchDescription/index.tsx b/src/features/MatchPage/components/MatchDescription/index.tsx index fe92a2d0..91671e1f 100644 --- a/src/features/MatchPage/components/MatchDescription/index.tsx +++ b/src/features/MatchPage/components/MatchDescription/index.tsx @@ -20,6 +20,7 @@ import { parseDate } from 'helpers/parseDate' import { ProfileTypes } from 'config' import { isMobileDevice } from 'config/userAgent' +import { querieKeys } from 'config/queries' import { usePageParams } from 'hooks/usePageParams' @@ -61,7 +62,7 @@ export const MatchDescription = () => { return null }, - queryKey: 'matchScore', + queryKey: querieKeys.matchScore, refetchInterval: 5000, }) diff --git a/src/features/MatchesGrid/index.tsx b/src/features/MatchesGrid/index.tsx index 04138cae..1a2b5b58 100644 --- a/src/features/MatchesGrid/index.tsx +++ b/src/features/MatchesGrid/index.tsx @@ -1,14 +1,19 @@ import { memo, useEffect } from 'react' import { useRouteMatch } from 'react-router-dom' +import { useQuery } from 'react-query' import { PAGES } from 'config/pages' +import { getLiveScores, LiveScore } from 'requests/getLiveScores' + import { MatchCard } from 'features/MatchCard' import { TournamentList } from 'features/TournamentList' import type { Match } from 'features/Matches' import { useHeaderFiltersStore } from 'features/HeaderFilters' import { Wrapper } from './styled' +import { useMatchSwitchesStore } from '../MatchSwitches' +import { querieKeys } from '../../config/queries' type MatchesGridProps = { matches: Array, @@ -16,6 +21,7 @@ type MatchesGridProps = { export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { const isHomePage = useRouteMatch(PAGES.home)?.isExact + const { isScoreHidden } = useMatchSwitchesStore() const { compareSport, @@ -48,19 +54,39 @@ export const MatchesGrid = memo(({ matches }: MatchesGridProps) => { return matches } + const { data: liveMatchScores } = useQuery({ + queryFn: async () => { + if (!isScoreHidden && matches.filter(({ live }) => live)?.length > 0) { + const scores = await getLiveScores() + return scores + } + return [] + }, + queryKey: querieKeys.liveMatchScores, + refetchInterval: 5000, + }) + useEffect(() => { if (!isHomePage) return updateSportIds(matches) // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedDate, matches]) - return ( {isHomePage && isShowTournament ? ( ) : ( - filteredMatches().map((match) => ) + filteredMatches().map((match) => ( + match_id === match.id + && sport_id === match.sportType, + )} + /> + )) )} ) diff --git a/src/requests/getLiveScores.tsx b/src/requests/getLiveScores.tsx new file mode 100644 index 00000000..e7e72e23 --- /dev/null +++ b/src/requests/getLiveScores.tsx @@ -0,0 +1,28 @@ +import { callApi } from 'helpers' + +import { API_ROOT } from 'config' + +type ScoreTeam = { + id: number, + score: number | null, +} + +export type LiveScore = { + match_id: number, + sport_id: number, + team1:ScoreTeam, + team2: ScoreTeam, +} + +export const getLiveScores = (): Promise> => { + const url = `${API_ROOT}/v1/matches/live/scores` + + const config = { + method: 'GET', + } + + return callApi({ + config, + url, + }) +}