Ott 435 make clickable (#141)

* feat(ott-435): made team names clickable

* fix(ott-435): added underline

* fix(ott-435): minor bug

* fix(ott-435): changed to immutable

* fix(ott-435): minor bug

* fix(ott-435): minor bug

* fix(ott-435): some minor changes

* fix(ott-435): minor changes

src/features/MatchPage/MatchProfileCard/hooks.tsx

@@ -15,23 +15,32 @@ export const useMatchProfileCard = () => {
   const pageId = usePageId()
   const { suffix } = useLexicsStore()
 
-  const matchProfileNames = {
-    team1Name: matchProfile?.team1[`name_${suffix}` as Name],
-    team2Name: matchProfile?.team2[`name_${suffix}` as Name],
-    tournament: matchProfile?.tournament[`name_${suffix}` as Name],
-  }
+  const addNames = (profile: MatchInfo, suffixArg: string) => (
+    profile
+      ? ({
+        ...profile,
+        team1: {
+          ...profile.team1,
+          name: profile.team1[`name_${suffixArg}` as Name],
+        },
+        team2: {
+          ...profile.team2,
+          name: profile.team2[`name_${suffixArg}` as Name],
+        },
+        tournament: {
+          ...profile.tournament,
+          name: profile.tournament[`name_${suffixArg}` as Name],
+        },
+      })
+      : null
+  )
 
   useEffect(() => {
     getMatchInfo(sportType, pageId)
       .then(setMatchProfile)
-  },
-  [
-    sportType,
-    pageId,
-  ])
+  }, [sportType, pageId])
 
   return {
-    matchProfile,
-    matchProfileNames,
+    matchProfile: addNames(matchProfile, suffix),
   }
 }

src/features/MatchPage/MatchProfileCard/index.tsx

@@ -1,9 +1,12 @@
 import React, { Fragment } from 'react'
 
-import isEmpty from 'lodash/isEmpty'
+import isNull from 'lodash/isNull'
 
+import { getProfileUrl } from 'helpers'
 import { getSportColor } from 'helpers/getSportColor'
 
+import { ProfileTypes } from 'config'
+
 import { SportName } from 'features/Common/SportName'
 import { useScoreStore } from 'features/ToggleScore'
 
@@ -16,32 +19,52 @@ import {
   Score,
   Tournament,
   Dash,
+  StyledLink,
 } from './styled'
 
 export const MatchProfileCard = () => {
   const {
     matchProfile,
-    matchProfileNames: {
-      team1Name,
-      team2Name,
-      tournament,
-    },
   } = useMatchProfileCard()
 
   const { sportName, sportType } = useSportNameParam()
   const { isHidden } = useScoreStore()
 
-  const { team1, team2 } = matchProfile || {}
-
   const color = getSportColor(sportType)
+  const {
+    team1,
+    team2,
+    tournament,
+  } = matchProfile || {}
 
   return (
     <Wrapper>
-      {!isEmpty(matchProfile)
+      {!isNull(matchProfile)
       && (
         <Fragment>
           <Teams>
-            {team1Name} <Dash /> {team2Name}
+            {team1 && (
+              <StyledLink
+                to={getProfileUrl({
+                  id: team1.id,
+                  profileType: ProfileTypes.TEAMS,
+                  sportType,
+                })}
+              >
+                {team1.name}
+              </StyledLink>
+            )}
+            <Dash />
+            {team2 && (
+              <StyledLink to={getProfileUrl({
+                id: team2.id,
+                profileType: ProfileTypes.TEAMS,
+                sportType,
+              })}
+              >
+                {team2.name}
+              </StyledLink>
+            )}
           </Teams>
           {!isHidden && (
             <Score>
@@ -52,7 +75,17 @@ export const MatchProfileCard = () => {
             <SportName
               color={color}
               t={sportName}
-            />{tournament}
+            />
+            {tournament && (
+              <StyledLink to={getProfileUrl({
+                id: tournament.id,
+                profileType: ProfileTypes.TEAMS,
+                sportType,
+              })}
+              >
+                {tournament?.name}
+              </StyledLink>
+            )}
           </Tournament>
         </Fragment>
       )}

src/features/MatchPage/MatchProfileCard/styled.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom'
+
 import styled from 'styled-components/macro'
 
 import { devices } from 'config/devices'
@@ -23,6 +25,14 @@ export const Teams = styled.div`
 
 `
 
+export const StyledLink = styled(Link)`
+  font-weight: bold;
+  color: white;
+  &:hover{
+    text-decoration: underline;
+  }
+`
+
 export const Dash = styled.span`
   position: relative;
   width: 40px;