feat(#357): add refresh scores for home page

.eslintrc

@@ -11,6 +11,7 @@
     "postro4no"
   ],
   "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/array-type": [
       "warn",
       { "default" : "generic" }

src/config/queries.tsx

@@ -0,0 +1,4 @@
+export const querieKeys = {
+  matchScore: 'matchScore',
+  liveMatchScores: 'liveMatchScores',
+}

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<HTMLLIElement>) => 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 = ({
                 <TeamName nameObj={team1} />
                 {team1InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{team1.score}</Score>}
+              {showScore && <Score>{score?.team1.score ?? team1.score}</Score>}
             </Team>
             <Team isMatchPage={isMatchPage}>
               <NameSignWrapper>
                 <TeamName nameObj={team2} />
                 {team2InFavorites && <FavoriteSign />}
               </NameSignWrapper>
-              {showScore && <Score>{team2.score}</Score>}
+              {showScore && <Score>{score?.team2.score ?? team2.score}</Score>}
             </Team>
           </Teams>
           {!isMatchPage && (

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}
     />
   )
 }

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,
   })
 

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<Match>,
@@ -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 (
     <Wrapper>
       {isHomePage && isShowTournament ? (
         <TournamentList matches={filteredMatches()} />
       ) : (
-        filteredMatches().map((match) => <MatchCard key={match.id} match={match} />)
+        filteredMatches().map((match) => (
+          <MatchCard
+            key={match.id}
+            match={match}
+            score={liveMatchScores?.find(
+              ({ match_id, sport_id }: LiveScore) => match_id === match.id
+                  && sport_id === match.sportType,
+            )}
+          />
+        ))
       )}
     </Wrapper>
   )

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<Array<LiveScore>> => {
+  const url = `${API_ROOT}/v1/matches/live/scores`
+
+  const config = {
+    method: 'GET',
+  }
+
+  return callApi({
+    config,
+    url,
+  })
+}