feat(ott-279): hide score if ToggleScore is activated (#86)

src/features/MatchCard/CardFinished/index.tsx

@@ -4,10 +4,10 @@ import styled from 'styled-components/macro'
 
 import type { Match } from 'features/HeaderFilters'
 import { getSportColor } from 'helpers'
-import { useCard } from 'features/MatchesSlider/hooks'
 import { SportName } from 'features/Common'
 import { T9n } from 'features/T9n'
 
+import { useCard } from '../hooks'
 import { CardFinishedHover } from '../CardFinishedHover'
 import {
   CardWrapper,
@@ -49,6 +49,7 @@ export const CardFinished = ({
     isOpen,
     onKeyPress,
     open,
+    showScore,
   } = useCard()
 
   if (isOpen) return <CardFinishedHover onClose={close} />
@@ -72,11 +73,11 @@ export const CardFinished = ({
         <Teams>
           <Team>
             <TeamName title={team1Name}>{team1Name}</TeamName>
-            <Score>{team1Score}</Score>
+            {showScore && <Score>{team1Score}</Score>}
           </Team>
           <Team>
             <TeamName title={team2Name}>{team2Name}</TeamName>
-            <Score>{team2Score}</Score>
+            {showScore && <Score>{team2Score}</Score>}
           </Team>
         </Teams>
       </Info>

src/features/MatchCard/CardLive/index.tsx

@@ -9,10 +9,10 @@ import differenceInMilliseconds from 'date-fns/differenceInMilliseconds'
 
 import type { Match } from 'features/HeaderFilters'
 import { getSportColor, msToMinutesAndSeconds } from 'helpers'
-import { useCard } from 'features/MatchesSlider/hooks'
 import { SportName } from 'features/Common'
 import { T9n } from 'features/T9n'
 
+import { useCard } from '../hooks'
 import {
   CardWrapper,
   Info,
@@ -58,6 +58,7 @@ export const CardLive = ({
     isOpen,
     onKeyPress,
     open,
+    showScore,
   } = useCard()
 
   const getMs = useCallback(() => differenceInMilliseconds(
@@ -76,6 +77,7 @@ export const CardLive = ({
   }, [getMs])
 
   if (isOpen) return <CardLiveHover onClose={close} />
+
   return (
     <CardWrapper
       onClick={open}
@@ -95,11 +97,11 @@ export const CardLive = ({
         <Teams>
           <Team>
             <TeamName title={team1Name}>{team1Name}</TeamName>
-            <Score>{team1Score}</Score>
+            {showScore && <Score>{team1Score}</Score>}
           </Team>
           <Team>
             <TeamName title={team2Name}>{team2Name}</TeamName>
-            <Score>{team2Score}</Score>
+            {showScore && <Score>{team2Score}</Score>}
           </Team>
         </Teams>
       </Info>

src/features/MatchCard/hooks.tsx

@@ -0,0 +1,28 @@
+import type { KeyboardEvent } from 'react'
+import { useCallback } from 'react'
+
+import { useToggle } from 'hooks'
+import { useScoreStore } from 'features/ToggleScore'
+
+export const useCard = () => {
+  const {
+    close,
+    isOpen,
+    open,
+  } = useToggle()
+  const { isVisible } = useScoreStore()
+
+  const onKeyPress = useCallback((e: KeyboardEvent<HTMLLIElement>) => {
+    if (e.key === 'Enter') {
+      open()
+    }
+  }, [open])
+
+  return {
+    close,
+    isOpen,
+    onKeyPress,
+    open,
+    showScore: !isVisible,
+  }
+}

src/features/MatchesSlider/hooks.tsx

@@ -1,4 +1,4 @@
-import type { SyntheticEvent, KeyboardEvent } from 'react'
+import type { SyntheticEvent } from 'react'
 import {
   useEffect,
   useRef,
@@ -10,33 +10,11 @@ import throttle from 'lodash/throttle'
 
 import type { Match } from 'features/HeaderFilters'
 import { MATCH_CARD_WIDTH, MATCH_CARD_GAP } from 'features/MatchCard/config'
-import { useToggle } from 'hooks'
 
 const MATCHES_TO_SCROLL = 6
 
 const SCROLLING_DELAY = 750
 
-export const useCard = () => {
-  const {
-    close,
-    isOpen,
-    open,
-  } = useToggle()
-
-  const onKeyPress = useCallback((e: KeyboardEvent<HTMLLIElement>) => {
-    if (e.key === 'Enter') {
-      open()
-    }
-  }, [open])
-
-  return {
-    close,
-    isOpen,
-    onKeyPress,
-    open,
-  }
-}
-
 export const useMatchesSlider = (matches: Array<Match>) => {
   const slidesRef = useRef<HTMLUListElement>(null)