feat(ott-348): score is fixed (#113)

src/features/MatchCard/hooks.tsx

@@ -10,7 +10,7 @@ export const useCard = () => {
     isOpen,
     open,
   } = useToggle()
-  const { isVisible } = useScoreStore()
+  const { isHidden } = useScoreStore()
 
   const onKeyPress = useCallback((e: KeyboardEvent<HTMLLIElement>) => {
     if (e.key === 'Enter') {
@@ -23,6 +23,6 @@ export const useCard = () => {
     isOpen,
     onKeyPress,
     open,
-    showScore: !isVisible,
+    showScore: isHidden,
   }
 }

src/features/MatchPage/MatchProfileCard/index.tsx

@@ -5,6 +5,7 @@ import isEmpty from 'lodash/isEmpty'
 import { getSportColor } from 'helpers/getSportColor'
 
 import { SportName } from 'features/Common/SportName'
+import { useScoreStore } from 'features/ToggleScore'
 
 import { useSportNameParam } from 'hooks/useSportNameParam'
 import { useMatchPage } from '../hooks'
@@ -28,6 +29,7 @@ export const MatchProfileCard = () => {
   } = useMatchPage()
 
   const { sportName, sportType } = useSportNameParam()
+  const { isHidden } = useScoreStore()
 
   const { team1, team2 } = matchProfile || {}
 
@@ -41,9 +43,11 @@ export const MatchProfileCard = () => {
           <Teams>
             {team1Name} <Dash /> {team2Name}
           </Teams>
-          <Score>
-            {team1?.score} : {team2?.score}
-          </Score>
+          {!isHidden && (
+            <Score>
+              {team1?.score} : {team2?.score}
+            </Score>
+          )}
           <Tournament>
             <SportName
               color={color}

src/features/ToggleScore/index.tsx

@@ -10,15 +10,16 @@ import {
 export * from './store'
 
 export const ToggleScore = () => {
-  const { isVisible, toggle } = useScoreStore()
+  const { isHidden, toggle } = useScoreStore()
+
   return (
     <Switch
       onClick={toggle}
       role='switch'
-      aria-checked={isVisible}
+      aria-checked={isHidden}
     >
       <Title t='hide_score' />
-      <Icon isOn={isVisible} />
+      <Icon isOn={isHidden} />
     </Switch>
   )
 }

src/features/ToggleScore/store.tsx

@@ -11,7 +11,7 @@ import { useLocalStore } from 'hooks'
 const SCORE_KEY = 'hide_score'
 
 type ScoreStore = {
-  isVisible: boolean,
+  isHidden: boolean,
   toggle: () => void,
 }
 
@@ -28,7 +28,7 @@ export const ScoreStore = ({ children }: Props) => {
   const toggle = () => setIsOpen(!isOpen)
 
   return (
-    <ScoreContext.Provider value={{ isVisible: isOpen, toggle }}>
+    <ScoreContext.Provider value={{ isHidden: isOpen, toggle }}>
       {children}
     </ScoreContext.Provider>
   )