feat(ott-296): team matches (#89)

src/features/HeaderFilters/store/hooks/index.tsx

@@ -53,6 +53,7 @@ export const useFilters = () => {
   const [selectedMatchStatus, setSelectedMatchStatus] = useState<MatchStatuses>(MatchStatuses.Live)
   const [selectedSportTypeId, setSelectedSportTypeId] = useState<SportTypes | null>(null)
   const [selectedTournamentId, setSelectedTournamentId] = useState<number | null>(null)
+  const [teamId, setTeamId] = useState<number | null>(null)
   const [matches, setMatches] = useState<Matches>({
     broadcast: [],
     features: [],
@@ -68,6 +69,7 @@ export const useFilters = () => {
       date: formattedDate,
       matchStatus: selectedMatchStatus,
       sportType: selectedSportTypeId,
+      teamId,
       tournamentId: selectedTournamentId,
     }).then(setMatches)
   }, [
@@ -75,6 +77,7 @@ export const useFilters = () => {
     selectedMatchStatus,
     selectedSportTypeId,
     selectedTournamentId,
+    teamId,
   ])
 
   const prepareMatches = useCallback((content: Array<Content>) => pipe(
@@ -132,12 +135,14 @@ export const useFilters = () => {
     setSelectedMatchStatus,
     setSelectedSportTypeId,
     setSelectedTournamentId,
+    setTeamId,
   }), [
     selectedDate,
     selectedMatchStatus,
     selectedSportTypeId,
     selectedTournamentId,
     setSelectedTournamentId,
+    setTeamId,
     preparedMatches,
   ])
 

src/features/TeamPage/hooks.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react'
+
+import { useHeaderFiltersStore } from 'features/HeaderFilters'
+import { useSportNameParam, usePageId } from 'hooks'
+
+export const useTeamPage = () => {
+  const { sportType } = useSportNameParam()
+  const teamId = usePageId()
+
+  const {
+    setSelectedSportTypeId,
+    setTeamId,
+  } = useHeaderFiltersStore()
+
+  useEffect(() => {
+    setSelectedSportTypeId(sportType)
+    setTeamId(teamId)
+
+    return () => {
+      setSelectedSportTypeId(null)
+      setTeamId(null)
+    }
+  }, [
+    setSelectedSportTypeId,
+    setTeamId,
+    sportType,
+    teamId,
+  ])
+}

src/features/TeamPage/index.tsx

@@ -1,12 +1,21 @@
 import React from 'react'
-import styled from 'styled-components'
 
-const TempPageTitle = styled.span`
-  padding: 20px;
-  font-size: 20px;
-  color: white;
-`
+import { UserFavorites } from 'features/UserFavorites'
+import { Matches } from 'features/Matches'
+import { UserFavoritesStore } from 'features/UserFavorites/store'
 
-export const TeamPage = () => (
-  <TempPageTitle>TEAM PAGE</TempPageTitle>
-)
+import { useTeamPage } from './hooks'
+import { Content } from './styled'
+
+export const TeamPage = () => {
+  useTeamPage()
+
+  return (
+    <UserFavoritesStore>
+      <UserFavorites />
+      <Content>
+        <Matches />
+      </Content>
+    </UserFavoritesStore>
+  )
+}

src/features/TeamPage/styled.tsx

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

src/features/TournamentPage/hooks.tsx

@@ -22,9 +22,6 @@ export const useTournamentPage = () => {
     setSelectedTournamentId,
   } = useHeaderFiltersStore()
 
-  setSelectedSportTypeId(sportType)
-  setSelectedTournamentId(pageId)
-
   const {
     [`name_${suffix}` as Name]: name = '',
   } = tournamentProfile || {}
@@ -36,7 +33,18 @@ export const useTournamentPage = () => {
   useEffect(() => {
     getTournamentInfo(sportType, pageId)
       .then(setTournamentProfile)
-  }, [pageId, sportType])
+    setSelectedSportTypeId(sportType)
+    setSelectedTournamentId(pageId)
+
+    return () => {
+      setSelectedSportTypeId(null)
+      setSelectedTournamentId(null)
+    }
+  }, [pageId,
+    setSelectedSportTypeId,
+    setSelectedTournamentId,
+    sportType,
+  ])
 
   return {
     infoItems: [country],

src/requests/getMatches.tsx

@@ -53,6 +53,7 @@ type Args = {
   date: string,
   matchStatus: MatchStatuses,
   sportType: SportTypes | null,
+  teamId: number | null,
   tournamentId: number | null,
 }
 
@@ -67,6 +68,7 @@ export const getMatches = async ({
   date,
   matchStatus,
   sportType,
+  teamId,
   tournamentId,
 }: Args) => {
   const config = {
@@ -75,6 +77,7 @@ export const getMatches = async ({
         _p_date: date,
         _p_sport: sportType,
         _p_stream_status: matchStatus,
+        _p_team_id: teamId,
         _p_tournament_id: tournamentId,
       },
       proc,