refactor(563): removed match stream_status property usage (#246)

src/features/MatchCard/CardBackSide/index.tsx

@@ -14,7 +14,7 @@ import {
   Rows,
 } from '../styled'
 
-type CardFinishedHoverProps = {
+type Props = {
   match: Match,
   onClose: () => void,
 }
@@ -23,14 +23,13 @@ const stopProp = (e: MouseEvent<HTMLDivElement>) => {
   e.stopPropagation()
 }
 
-export const CardFinishedHover = ({
+export const CardBackside = ({
   match: {
-    hasVideo,
     id,
     sportName,
   },
   onClose,
-}: CardFinishedHoverProps) => (
+}: Props) => (
   <OutsideClick onClick={onClose}>
     <CardHoverWrapper onClick={onClose}>
       <CardHoverInner>

src/features/MatchCard/CardFinished/index.tsx

@@ -1,40 +0,0 @@
-import type { Match } from 'features/Matches'
-
-import { useCard } from '../hooks'
-import { MatchInfoCard } from '../MatchInfoCard'
-import { CardFinishedHover } from '../CardFinishedHover'
-
-type CardFinishedProps = {
-  match: Match,
-  showSportName?: boolean,
-}
-
-export const CardFinished = ({
-  match,
-  showSportName,
-}: CardFinishedProps) => {
-  const {
-    close,
-    flipCard,
-    isOpen,
-    onKeyPress,
-  } = useCard(match)
-
-  if (isOpen) {
-    return (
-      <CardFinishedHover
-        match={match}
-        onClose={close}
-      />
-    )
-  }
-
-  return (
-    <MatchInfoCard
-      match={match}
-      showSportName={showSportName}
-      onClick={flipCard}
-      onKeyPress={onKeyPress}
-    />
-  )
-}

src/features/MatchCard/CardFrontSide/index.tsx

@@ -32,12 +32,11 @@ type Props = {
   showSportName?: boolean,
 }
 
-export const MatchInfoCard = ({
+export const CardFrontside = ({
   match: {
     accessibleBySubscription,
     accessibleInUsersCountry,
     date,
-    hasVideo,
     preview,
     sportType,
     team1,
@@ -59,7 +58,7 @@ export const MatchInfoCard = ({
     >
       <PreviewWrapper>
         {
-          hasVideo
+          preview
             ? (
               <Preview
                 alt={tournamentName}
@@ -108,11 +107,11 @@ export const MatchInfoCard = ({
         <Teams>
           <Team>
             <TeamName nameObj={team1} />
-            {!isScoreHidden && <Score>{team1.score}</Score>}
+            {(!isScoreHidden && team1.score) && <Score>{team1.score}</Score>}
           </Team>
           <Team>
             <TeamName nameObj={team2} />
-            {!isScoreHidden && <Score>{team2.score}</Score>}
+            {(!isScoreHidden && team2.score) && <Score>{team2.score}</Score>}
           </Team>
         </Teams>
       </Info>

src/features/MatchCard/CardLive/index.tsx

@@ -1,40 +0,0 @@
-import type { Match } from 'features/Matches'
-
-import { useCard } from '../hooks'
-import { MatchInfoCard } from '../MatchInfoCard'
-import { CardLiveHover } from '../CardLiveHover'
-
-type CardLiveProps = {
-  match: Match,
-  showSportName?: boolean,
-}
-
-export const CardLive = ({
-  match,
-  showSportName,
-}: CardLiveProps) => {
-  const {
-    close,
-    flipCard,
-    isOpen,
-    onKeyPress,
-  } = useCard(match)
-
-  if (isOpen) {
-    return (
-      <CardLiveHover
-        match={match}
-        onClose={close}
-      />
-    )
-  }
-
-  return (
-    <MatchInfoCard
-      match={match}
-      showSportName={showSportName}
-      onClick={flipCard}
-      onKeyPress={onKeyPress}
-    />
-  )
-}

src/features/MatchCard/CardLiveHover/index.tsx

@@ -1,57 +0,0 @@
-import type { MouseEvent } 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'
-
-import {
-  CardHoverInner,
-  CardHoverTitle,
-  CardHoverWrapper,
-  MoreVideo,
-  Row,
-  Rows,
-} from '../styled'
-
-type CardLiveHoverProps = {
-  match: Match,
-  onClose: () => void,
-}
-
-const stopProp = (e: MouseEvent<HTMLDivElement>) => {
-  e.stopPropagation()
-}
-
-export const CardLiveHover = ({
-  match: {
-    id,
-    sportName,
-  },
-  onClose,
-}: CardLiveHoverProps) => (
-  <OutsideClick onClick={onClose}>
-    <CardHoverWrapper onClick={onClose}>
-      <CardHoverInner>
-        <CardHoverTitle t='match_video' />
-        <Rows onClick={stopProp}>
-          <Row>
-            <Link to={`/${sportName}/matches/${id}`}>
-              <MoreVideo t='watch_now' />
-            </Link>
-            <Link to={`/${sportName}/matches/${id}`}>
-              <MoreVideo t='watch_from_beginning' />
-            </Link>
-          </Row>
-
-          <Row>
-            <Link to={`/${sportName}/matches/${id}?${RESUME_KEY}=true`}>
-              <MoreVideo t='watch_from_last_pause' />
-            </Link>
-          </Row>
-        </Rows>
-      </CardHoverInner>
-    </CardHoverWrapper>
-  </OutsideClick>
-)

src/features/MatchCard/CardSoon/index.tsx

@@ -1,101 +0,0 @@
-import styled from 'styled-components/macro'
-
-import { ProfileTypes } from 'config'
-
-import type { Match } from 'features/Matches'
-import { SportName } from 'features/Common'
-import { useName } from 'features/Name'
-
-import { NoAccessMessage } from '../NoAccessMessage'
-import {
-  MatchDate,
-  CardWrapper as CommonCardWrapper,
-  Time,
-  Info,
-  PreviewWrapper,
-  Team,
-  TeamName as CommonTeamName,
-  Teams,
-  TournamentName,
-  TeamLogos,
-  TeamLogo,
-  BuyMatchButton,
-} from '../styled'
-
-const CardWrapper = styled(CommonCardWrapper)`
-  cursor: pointer;
-`
-
-const TeamName = styled(CommonTeamName)`
-  max-width: none;
-`
-
-type CardSoonProps = {
-  match: Match,
-  showSportName?: boolean,
-}
-
-export const CardSoon = ({
-  match: {
-    accessibleBySubscription,
-    accessibleInUsersCountry,
-    date,
-    sportType,
-    team1,
-    team2,
-    time,
-    tournament,
-  },
-  showSportName,
-}: CardSoonProps) => {
-  const tournamentName = useName(tournament)
-  return (
-    <CardWrapper>
-      <PreviewWrapper>
-        <TeamLogos>
-          <TeamLogo
-            id={team1.id}
-            nameAsTitle
-            altNameObj={team1}
-            sportType={sportType}
-            profileType={ProfileTypes.TEAMS}
-          />
-          <TeamLogo
-            id={team2.id}
-            nameAsTitle
-            altNameObj={team2}
-            sportType={sportType}
-            profileType={ProfileTypes.TEAMS}
-          />
-        </TeamLogos>
-        {!accessibleBySubscription && <BuyMatchButton />}
-        {(accessibleBySubscription && !accessibleInUsersCountry)
-          ? <NoAccessMessage />
-          : (
-            <MatchDate>
-              {date}
-              <Time>
-                {time}
-              </Time>
-            </MatchDate>
-          )}
-      </PreviewWrapper>
-      <Info>
-        {showSportName && <SportName sport={sportType} />}
-        {tournamentName && (
-          <TournamentName title={tournamentName}>
-            {tournamentName}
-          </TournamentName>
-        )}
-        <Teams>
-          <Team>
-            <TeamName nameObj={team1} />
-          </Team>
-          <Team>
-            <TeamName nameObj={team2} />
-          </Team>
-        </Teams>
-      </Info>
-    </CardWrapper>
-  )
-}

src/features/MatchCard/hooks.tsx

@@ -5,28 +5,18 @@ import { useToggle } from 'hooks'
 
 import type { Match } from 'features/Matches'
 
-export const useCard = ({
+export const useCard = (match: Match) => {
-  accessibleBySubscription,
-  accessibleInUsersCountry,
-  hasVideo,
-}: Match) => {
   const {
     close,
     isOpen,
     open,
   } = useToggle()
 
-  const isClickable = (
-    hasVideo
-    && accessibleInUsersCountry
-    && accessibleBySubscription
-  )
-
   const flipCard = useCallback(() => {
-    if (isClickable) {
+    if (match.isClickable) {
       open()
     }
-  }, [isClickable, open])
+  }, [match, open])
 
   const onKeyPress = useCallback((e: KeyboardEvent<HTMLLIElement>) => {
     if (e.key === 'Enter') {

src/features/MatchCard/index.tsx

@@ -3,29 +3,39 @@ import { useRouteMatch } from 'react-router'
 import { PAGES } from 'config'
 
 import type { Match } from 'features/Matches'
-import { MatchStatuses } from 'features/HeaderFilters'
 
-import { CardLive } from './CardLive'
+import { CardFrontside } from './CardFrontside'
-import { CardFinished } from './CardFinished'
+import { CardBackside } from './CardBackside'
-import { CardSoon } from './CardSoon'
+import { useCard } from './hooks'
 
-type MatchCardProps = {
+type Props = {
   match: Match,
 }
 
-const cards = {
+export const MatchCard = ({ match }: Props) => {
-  [MatchStatuses.Finished]: CardFinished,
-  [MatchStatuses.Live]: CardLive,
-  [MatchStatuses.Soon]: CardSoon,
-}
-
-export const MatchCard = ({ match }: MatchCardProps) => {
   const isHomePage = useRouteMatch(PAGES.home)?.isExact
-  const Card = cards[match.streamStatus]
+  const {
+    close,
+    flipCard,
+    isOpen,
+    onKeyPress,
+  } = useCard(match)
+
+  if (isOpen) {
+    return (
+      <CardBackside
+        match={match}
+        onClose={close}
+      />
+    )
+  }
+
   return (
-    <Card
+    <CardFrontside
       match={match}
       showSportName={isHomePage}
+      onClick={flipCard}
+      onKeyPress={onKeyPress}
     />
   )
 }

src/features/Matches/helpers/prepareMatches.tsx

@@ -10,9 +10,10 @@ const prepareMatch = ({
   date,
   has_video,
   id,
+  live,
   preview,
   sport,
-  stream_status,
+  storage,
   sub,
   team1,
   team2,
@@ -23,10 +24,14 @@ const prepareMatch = ({
   date: format(new Date(date), 'dd.MM.yy'),
   hasVideo: has_video,
   id,
+  isClickable: (sub && access && (
+    has_video
+    || live
+    || storage
+  )),
   preview,
   sportName: getSportLexic(sport),
   sportType: sport,
-  streamStatus: stream_status,
   team1,
   team2,
   time: format(new Date(date), 'HH:mm'),

src/requests/getMatches/getPreviews.tsx

@@ -6,8 +6,6 @@ import map from 'lodash/map'
 import type { PreviewsData, Previews } from 'requests'
 import { getMatchesPreviewImages } from 'requests'
 
-import { MatchStatuses } from 'features/HeaderFilters'
-
 import type { MatchesBySection, Matches } from './types'
 
 const combinePreviews = (matches: Matches, previews: Previews) => (
@@ -30,9 +28,8 @@ const getPreviews = async (matches: Matches) => {
       has_video,
       id,
       sport,
-      stream_status,
     }) => {
-      if (has_video && stream_status === MatchStatuses.Finished) {
+      if (has_video) {
         acc.push({
           match_id: id,
           sport_id: sport,

src/requests/getMatches/types.tsx

@@ -1,7 +1,5 @@
 import { SportTypes } from 'config'
 
-import { MatchStatuses } from 'features/HeaderFilters'
-
 type Tournament = {
   id: number,
   name_eng: string,
@@ -18,12 +16,16 @@ export type Team = {
 export type Match = {
   access: boolean,
   date: string,
+  /** наличие mp4 видео */
   has_video: boolean,
   id: number,
+  /** наличие hls стрима */
+  live: boolean,
   preview?: string,
   round_id: number | null,
   sport: SportTypes,
-  stream_status: MatchStatuses,
+  /** наличие завершенного hls стрима */
+  storage: boolean,
   sub: boolean,
   team1: Team,
   team2: Team,