feat(ott-350): redirect to matches page (#117)

src/features/MatchCard/CardFinished/index.tsx

@@ -33,7 +33,7 @@ type CardFinishedProps = {
 
 export const CardFinished = ({
   match: {
-    date,
+    id,
     preview,
     sportName,
     sportType,
@@ -52,7 +52,15 @@ export const CardFinished = ({
     showScore,
   } = useCard()
 
-  if (isOpen) return <CardFinishedHover onClose={close} />
+  if (isOpen) {
+    return (
+      <CardFinishedHover
+        id={id}
+        sportName={sportName}
+        onClose={close}
+      />
+    )
+  }
 
   return (
     <CardWrapper

src/features/MatchCard/CardFinishedHover/index.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { Link } from 'react-router-dom'
+
 import { CloseButton } from 'features/Common'
 
 import {
@@ -12,17 +14,25 @@ import {
 } from '../styled'
 
 type CardFinishedHoverProps = {
+  id: number,
   onClose: () => void,
+  sportName: string,
 }
 
-export const CardFinishedHover = ({ onClose }: CardFinishedHoverProps) => (
+export const CardFinishedHover = ({
+  id,
+  onClose,
+  sportName,
+}: CardFinishedHoverProps) => (
   <CardHoverWrapper>
     <CardHoverInner>
       <CloseButton onClick={onClose} />
       <CardHoverTitle t='match_video' />
       <Rows>
         <Row>
-          <MoreVideo t='full_game' />
+          <Link to={`${sportName}/matches/${id}`}>
+            <MoreVideo t='full_game' />
+          </Link>
           <MoreVideo t='game_time' />
         </Row>
 

src/features/MatchCard/CardLive/index.tsx

@@ -33,7 +33,6 @@ type CardLiveProps = {
 
 export const CardLive = ({
   match: {
-    date,
     id,
     preview,
     sportName,
@@ -53,7 +52,15 @@ export const CardLive = ({
     showScore,
   } = useCard()
 
-  if (isOpen) return <CardLiveHover onClose={close} />
+  if (isOpen) {
+    return (
+      <CardLiveHover
+        id={id}
+        sportName={sportName}
+        onClose={close}
+      />
+    )
+  }
 
   return (
     <CardWrapper

src/features/MatchCard/CardLiveHover/index.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import type { MouseEvent } from 'react'
 
+import { Link } from 'react-router-dom'
+
 import { CloseButton } from 'features/Common'
 
 import {
@@ -13,26 +15,38 @@ import {
 } from '../styled'
 
 type CardLiveHoverProps = {
+  id: number,
   onClose: () => void,
+  sportName: string,
 }
 
 const stopProp = (e: MouseEvent<HTMLDivElement>) => {
   e.stopPropagation()
 }
 
-export const CardLiveHover = ({ onClose }: CardLiveHoverProps) => (
+export const CardLiveHover = ({
+  id,
+  onClose,
+  sportName,
+}: CardLiveHoverProps) => (
   <CardHoverWrapper onClick={onClose}>
     <CardHoverInner>
       <CloseButton onClick={onClose} />
       <CardHoverTitle t='match_video' />
       <Rows onClick={stopProp}>
         <Row>
-          <MoreVideo t='watch_now' />
-          <MoreVideo t='watch_from_beginning' />
+          <Link to={`${sportName}/matches/${id}`}>
+            <MoreVideo t='watch_now' />
+          </Link>
+          <Link to={`${sportName}/matches/${id}`}>
+            <MoreVideo t='watch_from_beginning' />
+          </Link>
         </Row>
 
         <Row>
-          <MoreVideo t='watch_from_last_pause' />
+          <Link to={`${sportName}/matches/${id}`}>
+            <MoreVideo t='watch_from_last_pause' />
+          </Link>
         </Row>
       </Rows>
     </CardHoverInner>