feat(ott-297): tournament matches (#88)

src/features/PlayerPage/hooks.tsx

@@ -39,6 +39,5 @@ export const usePlayerPage = () => {
   return {
     infoItems,
     name: fullName,
-    sportType,
   }
 }

src/features/PlayerPage/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import { ProfileTypes } from 'config'
-import { MainWrapper } from 'features/MainWrapper'
 import { UserFavorites } from 'features/UserFavorites'
 import { ProfileCard } from 'features/ProfileCard'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
@@ -12,20 +11,16 @@ export const PlayerPage = () => {
   const {
     infoItems,
     name,
-    sportType,
   } = usePlayerPage()
 
   return (
     <UserFavoritesStore>
-      <MainWrapper>
-        <UserFavorites />
-        <ProfileCard
-          sportType={sportType}
-          profileType={ProfileTypes.PLAYERS}
-          name={name}
-          infoItems={infoItems}
-        />
-      </MainWrapper>
+      <UserFavorites />
+      <ProfileCard
+        profileType={ProfileTypes.PLAYERS}
+        name={name}
+        infoItems={infoItems}
+      />
     </UserFavoritesStore>
   )
 }

src/features/ProfileCard/hooks.tsx

@@ -5,16 +5,14 @@ import findIndex from 'lodash/findIndex'
 
 import { handleImageError, getProfileLogo } from 'helpers'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
-import { usePageId } from 'hooks'
+import { useSportNameParam, usePageId } from 'hooks'
 
 import type { ProfileCardProps } from './types'
 
-export const useProfileCard = ({
-  profileType,
-  sportType,
-}: ProfileCardProps) => {
+export const useProfileCard = ({ profileType }: ProfileCardProps) => {
   const { addRemoveFavorite, userFavorites } = useUserFavoritesStore()
   const profileId = usePageId()
+  const { sportType } = useSportNameParam()
 
   const isFavorite = findIndex(userFavorites, {
     id: profileId,

src/features/ProfileCard/styled.tsx

@@ -4,6 +4,8 @@ import { ProfileTypes } from 'config'
 
 export const Wrapper = styled.div`
   display: flex;
+  margin-left: 70px;
+  margin-bottom: 50px;
 `
 
 export const Name = styled.h1`

src/features/ProfileCard/types.tsx

@@ -1,8 +1,7 @@
-import { ProfileTypes, SportTypes } from 'config'
+import { ProfileTypes } from 'config'
 
 export type ProfileCardProps = {
   infoItems: Array<string>,
   name: string,
   profileType: ProfileTypes,
-  sportType: SportTypes,
 }

src/features/TournamentPage/hooks.tsx

@@ -41,6 +41,5 @@ export const useTournamentPage = () => {
   return {
     infoItems: [country],
     name,
-    sportType,
   }
 }

src/features/TournamentPage/index.tsx

@@ -2,31 +2,31 @@ import React from 'react'
 
 import { ProfileTypes } from 'config'
 
-import { MainWrapper } from 'features/MainWrapper'
 import { UserFavorites } from 'features/UserFavorites'
 import { ProfileCard } from 'features/ProfileCard'
+import { Matches } from 'features/Matches'
 import { UserFavoritesStore } from 'features/UserFavorites/store'
 
 import { useTournamentPage } from './hooks'
+import { Content } from './styled'
 
 export const TournamentPage = () => {
   const {
     infoItems,
     name,
-    sportType,
   } = useTournamentPage()
 
   return (
     <UserFavoritesStore>
-      <MainWrapper>
-        <UserFavorites />
+      <UserFavorites />
+      <Content>
         <ProfileCard
-          sportType={sportType}
           profileType={ProfileTypes.TOURNAMENTS}
           name={name}
           infoItems={infoItems}
         />
-      </MainWrapper>
+        <Matches />
+      </Content>
     </UserFavoritesStore>
   )
 }

src/features/TournamentPage/styled.tsx

@@ -0,0 +1,5 @@
+import styled from 'styled-components/macro'
+
+export const Content = styled.main`
+  padding: 0 16px;
+`