feat(cardfrontside): hiding score in future matches (#283)

* feat(cardfrontside): hiding score in future matches

* refactor(cardfrontside): refactoring code

* refactor(cardfrontside): renamed variable

src/features/MatchCard/CardFrontside/index.tsx

@@ -26,6 +26,7 @@ import {
   TeamLogo,
   BuyMatchButton,
 } from '../styled'
+import { MatchStatuses, useHeaderFiltersStore } from '../../HeaderFilters'
 
 type Props = {
   match: Match,
@@ -55,7 +56,10 @@ export const CardFrontside = ({
 }: Props) => {
   const tournamentName = useName(tournament)
   const { isScoreHidden } = useMatchSwitchesStore()
+  const { selectedMatchStatus } = useHeaderFiltersStore()
   const unixTimeOfMatch = getUnixTime(date)
+  const isInFuture = unixTimeOfMatch > getUnixTime(new Date())
+  const isFutureMatch = isInFuture || selectedMatchStatus === MatchStatuses.Soon
 
   return (
     <CardWrapper
@@ -95,12 +99,8 @@ export const CardFrontside = ({
         {(accessibleBySubscription && !accessibleInUsersCountry) && <NoAccessMessage />}
         <MatchDate>
           {formattedDate}
-          {unixTimeOfMatch > getUnixTime(new Date()) && (!hasVideo || !storage)
-            ? (
-              <Time>
-                {time}
-              </Time>
-            )
+          {(isInFuture && (!hasVideo || !storage))
+            ? <Time>{time}</Time>
             : null}
         </MatchDate>
       </PreviewWrapper>
@@ -114,11 +114,11 @@ export const CardFrontside = ({
         <Teams>
           <Team>
             <TeamName nameObj={team1} />
-            {!isScoreHidden && <Score>{team1.score}</Score>}
+            {isFutureMatch ? null : !isScoreHidden && <Score>{team1.score}</Score>}
           </Team>
           <Team>
             <TeamName nameObj={team2} />
-            {!isScoreHidden && <Score>{team2.score}</Score>}
+            {isFutureMatch ? null : !isScoreHidden && <Score>{team2.score}</Score>}
           </Team>
         </Teams>
       </Info>