refactor(#302): show team logos for matches with no video (#173)

src/features/MatchCard/CardFinished/index.tsx

@@ -1,23 +1,10 @@
 import React from 'react'
 
 import type { Match } from 'features/Matches'
-import { SportName } from 'features/Common'
 
 import { useCard } from '../hooks'
+import { MatchInfoCard } from '../MatchInfoCard'
 import { CardFinishedHover } from '../CardFinishedHover'
-import {
-  CardWrapper,
-  Info,
-  MatchDate,
-  Preview,
-  PreviewWrapper,
-  Score,
-  Team,
-  TeamName,
-  Teams,
-  Time,
-  TournamentName,
-} from '../styled'
 
 type CardFinishedProps = {
   match: Match,
@@ -25,73 +12,31 @@ type CardFinishedProps = {
 }
 
 export const CardFinished = ({
-  match: {
+  match,
-    date,
-    id,
-    preview,
-    sportName,
-    sportType,
-    team1,
-    team2,
-    time,
-    tournamentName,
-  },
   showSportName,
 }: CardFinishedProps) => {
   const {
     close,
+    flipCard,
     isOpen,
     onKeyPress,
-    open,
+  } = useCard(match.hasVideo)
-    showScore,
-  } = useCard()
 
   if (isOpen) {
     return (
       <CardFinishedHover
-        id={id}
+        match={match}
-        sportName={sportName}
         onClose={close}
       />
     )
   }
 
   return (
-    <CardWrapper
+    <MatchInfoCard
-      onClick={open}
+      match={match}
+      showSportName={showSportName}
+      onClick={flipCard}
       onKeyPress={onKeyPress}
-    >
-      <MatchDate>
-        {date}
-        <Time>
-          {time}
-        </Time>
-      </MatchDate>
-      <PreviewWrapper>
-        <Preview
-          alt={tournamentName}
-          title={tournamentName}
-          src={preview}
     />
-      </PreviewWrapper>
-      <Info>
-        {showSportName && <SportName sport={sportType} />}
-        {tournamentName && (
-          <TournamentName title={tournamentName}>
-            {tournamentName}
-          </TournamentName>
-        )}
-        <Teams>
-          <Team>
-            <TeamName title={team1.name}>{team1.name}</TeamName>
-            {showScore && <Score>{team1.score}</Score>}
-          </Team>
-          <Team>
-            <TeamName title={team2.name}>{team2.name}</TeamName>
-            {showScore && <Score>{team2.score}</Score>}
-          </Team>
-        </Teams>
-      </Info>
-    </CardWrapper>
   )
 }

src/features/MatchCard/CardFinishedHover/index.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { Link } from 'react-router-dom'
 
+import type { Match } from 'features/Matches'
 import { OutsideClick } from 'features/OutsideClick'
 
 import {
@@ -15,9 +16,8 @@ import {
 } from '../styled'
 
 type CardFinishedHoverProps = {
-  id: number,
+  match: Match,
   onClose: () => void,
-  sportName: string,
 }
 
 const stopProp = (e: MouseEvent<HTMLDivElement>) => {
@@ -25,9 +25,12 @@ const stopProp = (e: MouseEvent<HTMLDivElement>) => {
 }
 
 export const CardFinishedHover = ({
+  match: {
+    hasVideo,
     id,
-  onClose,
     sportName,
+  },
+  onClose,
 }: CardFinishedHoverProps) => (
   <OutsideClick onClick={onClose}>
     <CardHoverWrapper onClick={onClose}>

src/features/MatchCard/CardLive/index.tsx

@@ -1,22 +1,9 @@
 import React from 'react'
 
 import type { Match } from 'features/Matches'
-import { SportName } from 'features/Common'
 
 import { useCard } from '../hooks'
-import {
+import { MatchInfoCard } from '../MatchInfoCard'
-  CardWrapper,
-  Info,
-  MatchDate,
-  Preview,
-  PreviewWrapper,
-  Score,
-  Team,
-  TeamName,
-  Teams,
-  Time,
-  TournamentName,
-} from '../styled'
 import { CardLiveHover } from '../CardLiveHover'
 
 type CardLiveProps = {
@@ -25,73 +12,31 @@ type CardLiveProps = {
 }
 
 export const CardLive = ({
-  match: {
+  match,
-    date,
-    id,
-    preview,
-    sportName,
-    sportType,
-    team1,
-    team2,
-    time,
-    tournamentName,
-  },
   showSportName,
 }: CardLiveProps) => {
   const {
     close,
+    flipCard,
     isOpen,
     onKeyPress,
-    open,
+  } = useCard(match.hasVideo)
-    showScore,
-  } = useCard()
 
   if (isOpen) {
     return (
       <CardLiveHover
-        id={id}
+        match={match}
-        sportName={sportName}
         onClose={close}
       />
     )
   }
 
   return (
-    <CardWrapper
+    <MatchInfoCard
-      onClick={open}
+      match={match}
+      showSportName={showSportName}
+      onClick={flipCard}
       onKeyPress={onKeyPress}
-    >
-      <MatchDate>
-        {date}
-        <Time>
-          {time}
-        </Time>
-      </MatchDate>
-      <PreviewWrapper>
-        <Preview
-          alt={tournamentName}
-          title={tournamentName}
-          src={preview}
     />
-      </PreviewWrapper>
-      <Info>
-        {showSportName && <SportName sport={sportType} />}
-        {tournamentName && (
-          <TournamentName title={tournamentName}>
-            {tournamentName}
-          </TournamentName>
-        )}
-        <Teams>
-          <Team>
-            <TeamName title={team1.name}>{team1.name}</TeamName>
-            {showScore && <Score>{team1.score}</Score>}
-          </Team>
-          <Team>
-            <TeamName title={team2.name}>{team2.name}</TeamName>
-            {showScore && <Score>{team2.score}</Score>}
-          </Team>
-        </Teams>
-      </Info>
-    </CardWrapper>
   )
 }

src/features/MatchCard/CardLiveHover/index.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 
 import { Link } from 'react-router-dom'
 
+import type { Match } from 'features/Matches'
 import { RESUME_KEY } from 'features/MatchPage/hooks/useLastPlayPosition'
 import { OutsideClick } from 'features/OutsideClick'
 
@@ -16,9 +17,8 @@ import {
 } from '../styled'
 
 type CardLiveHoverProps = {
-  id: number,
+  match: Match,
   onClose: () => void,
-  sportName: string,
 }
 
 const stopProp = (e: MouseEvent<HTMLDivElement>) => {
@@ -26,9 +26,11 @@ const stopProp = (e: MouseEvent<HTMLDivElement>) => {
 }
 
 export const CardLiveHover = ({
+  match: {
     id,
-  onClose,
     sportName,
+  },
+  onClose,
 }: CardLiveHoverProps) => (
   <OutsideClick onClick={onClose}>
     <CardHoverWrapper onClick={onClose}>

src/features/MatchCard/CardSoon/index.tsx

@@ -2,11 +2,10 @@ import React from 'react'
 
 import styled from 'styled-components/macro'
 
-import { ProfileTypes, devices } from 'config'
+import { ProfileTypes } from 'config'
 
 import type { Match } from 'features/Matches'
 import { SportName } from 'features/Common'
-import { ProfileLogo } from 'features/ProfileLogo'
 
 import {
   MatchDate,
@@ -18,35 +17,14 @@ import {
   TeamName as CommonTeamName,
   Teams,
   TournamentName,
+  TeamLogos,
+  TeamLogo,
 } from '../styled'
 
 const CardWrapper = styled(CommonCardWrapper)`
   cursor: pointer;
 `
 
-const TeamLogos = styled.div`
-  display: flex;
-  padding-left: 24px;
-
-  @media ${devices.mobile} {
-    justify-content: space-between;
-    padding-right: 20px;
-  }
-`
-
-const TeamLogo = styled(ProfileLogo)`
-  width: 60px;
-
-  :last-child {
-    margin-left: 8px;
-  }
-
-  @media ${devices.mobile} {
-    width: 134px;
-  }
-
-`
-
 const TeamName = styled(CommonTeamName)`
   max-width: none;
 `

src/features/MatchCard/MatchInfoCard/index.tsx

@@ -0,0 +1,111 @@
+import type { KeyboardEvent } from 'react'
+import React from 'react'
+
+import { ProfileTypes } from 'config'
+
+import type { Match } from 'features/Matches'
+import { SportName } from 'features/Common'
+import { useScoreStore } from 'features/ToggleScore'
+
+import {
+  CardWrapper,
+  Info,
+  MatchDate,
+  Preview,
+  PreviewWrapper,
+  Score,
+  Team,
+  TeamName,
+  Teams,
+  Time,
+  TournamentName,
+  TeamLogos,
+  TeamLogo,
+} from '../styled'
+
+type Props = {
+  match: Match,
+  onClick: () => void,
+  onKeyPress: (e: KeyboardEvent<HTMLLIElement>) => void,
+  showSportName?: boolean,
+}
+
+export const MatchInfoCard = ({
+  match: {
+    date,
+    hasVideo,
+    preview,
+    sportType,
+    team1,
+    team2,
+    time,
+    tournamentName,
+  },
+  onClick,
+  onKeyPress,
+  showSportName,
+}: Props) => {
+  const { isHidden } = useScoreStore()
+
+  return (
+    <CardWrapper
+      onClick={onClick}
+      onKeyPress={onKeyPress}
+    >
+      <MatchDate>
+        {date}
+        <Time>
+          {time}
+        </Time>
+      </MatchDate>
+      <PreviewWrapper>
+        {
+          hasVideo
+            ? (
+              <Preview
+                alt={tournamentName}
+                title={tournamentName}
+                src={preview}
+              />
+            )
+            : (
+              <TeamLogos>
+                <TeamLogo
+                  id={team1.id}
+                  alt={team1.name}
+                  title={team1.name}
+                  sportType={sportType}
+                  profileType={ProfileTypes.TEAMS}
+                />
+                <TeamLogo
+                  id={team2.id}
+                  alt={team2.name}
+                  title={team2.name}
+                  sportType={sportType}
+                  profileType={ProfileTypes.TEAMS}
+                />
+              </TeamLogos>
+            )
+        }
+      </PreviewWrapper>
+      <Info>
+        {showSportName && <SportName sport={sportType} />}
+        {tournamentName && (
+          <TournamentName title={tournamentName}>
+            {tournamentName}
+          </TournamentName>
+        )}
+        <Teams>
+          <Team>
+            <TeamName title={team1.name}>{team1.name}</TeamName>
+            {!isHidden && <Score>{team1.score}</Score>}
+          </Team>
+          <Team>
+            <TeamName title={team2.name}>{team2.name}</TeamName>
+            {!isHidden && <Score>{team2.score}</Score>}
+          </Team>
+        </Teams>
+      </Info>
+    </CardWrapper>
+  )
+}

src/features/MatchCard/hooks.tsx

@@ -2,27 +2,30 @@ import type { KeyboardEvent } from 'react'
 import { useCallback } from 'react'
 
 import { useToggle } from 'hooks'
-import { useScoreStore } from 'features/ToggleScore'
 
-export const useCard = () => {
+export const useCard = (hasVideo: boolean) => {
   const {
     close,
     isOpen,
     open,
   } = useToggle()
-  const { isHidden } = useScoreStore()
 
   const onKeyPress = useCallback((e: KeyboardEvent<HTMLLIElement>) => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' && hasVideo) {
       open()
     }
-  }, [open])
+  }, [hasVideo, open])
+
+  const flipCard = () => {
+    if (hasVideo) {
+      open()
+    }
+  }
 
   return {
     close,
+    flipCard,
     isOpen,
     onKeyPress,
-    open,
-    showScore: !isHidden,
   }
 }

src/features/MatchCard/styled.tsx

@@ -1,7 +1,10 @@
 import styled from 'styled-components/macro'
 
 import { devices } from 'config/devices'
+
 import { T9n } from 'features/T9n'
+import { ProfileLogo } from 'features/ProfileLogo'
+
 import { MATCH_CARD_WIDTH } from './config'
 
 export const CardWrapper = styled.li.attrs({
@@ -191,3 +194,24 @@ export const CardHoverTitle = styled(T9n)`
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.5);
 `
+
+export const TeamLogos = styled.div`
+  display: flex;
+  padding-left: 24px;
+
+  @media ${devices.mobile} {
+    justify-content: space-between;
+    padding-right: 20px;
+  }
+`
+export const TeamLogo = styled(ProfileLogo)`
+  width: 60px;
+
+  :last-child {
+    margin-left: 8px;
+  }
+
+  @media ${devices.mobile} {
+    width: 134px;
+  }
+`

src/features/Matches/helpers/prepareMatches.tsx

@@ -14,6 +14,7 @@ const prepareTeam = (team: Team, suffix: string) => ({
 
 const prepareMatch = ({
   date,
+  has_video,
   id,
   sport,
   stream_status,
@@ -22,6 +23,7 @@ const prepareMatch = ({
   tournament,
 }: Match, suffix: string) => ({
   date: format(new Date(date), 'dd.MM.yy'),
+  hasVideo: has_video,
   id,
   preview: '/images/preview.png',
   sportName: getSportLexic(sport),