From c4904601d84b9bf0c152e968268494adfec5e8f7 Mon Sep 17 00:00:00 2001
From: Ruslan Khayrullin <ruslfm08@gmail.com>
Date: Tue, 18 Aug 2020 14:20:30 +0300
Subject: [PATCH] feat(ott-279): hide score if ToggleScore is activated (#86)

---
 src/features/MatchCard/CardFinished/index.tsx |  7 +++--
 src/features/MatchCard/CardLive/index.tsx     |  8 ++++--
 src/features/MatchCard/hooks.tsx              | 28 +++++++++++++++++++
 src/features/MatchesSlider/hooks.tsx          | 24 +---------------
 4 files changed, 38 insertions(+), 29 deletions(-)
 create mode 100644 src/features/MatchCard/hooks.tsx

diff --git a/src/features/MatchCard/CardFinished/index.tsx b/src/features/MatchCard/CardFinished/index.tsx
index 221a0ad7..6315c378 100644
--- a/src/features/MatchCard/CardFinished/index.tsx
+++ b/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>
diff --git a/src/features/MatchCard/CardLive/index.tsx b/src/features/MatchCard/CardLive/index.tsx
index 5adb12d3..0c96dbf7 100644
--- a/src/features/MatchCard/CardLive/index.tsx
+++ b/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>
diff --git a/src/features/MatchCard/hooks.tsx b/src/features/MatchCard/hooks.tsx
new file mode 100644
index 00000000..b766a963
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/src/features/MatchesSlider/hooks.tsx b/src/features/MatchesSlider/hooks.tsx
index bce44cf7..89e2fc5e 100644
--- a/src/features/MatchesSlider/hooks.tsx
+++ b/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)