Ott 141 match status filters (#56)

src/config/lexics/authenticated.tsx

@@ -4,6 +4,9 @@ export const authenticatedLexics = {
   hide_score: 12982,
   hockey: 6959,
   logout: 4306,
+  match_status_finished: 12985,
+  match_status_live: 12984,
+  match_status_soon: 12986,
   player: 630,
   team: 658,
   tournament: 1009,

src/features/DateFilter/hooks/index.tsx

@@ -1,69 +0,0 @@
-import {
-  useState,
-  useCallback,
-  useEffect,
-} from 'react'
-
-import debounce from 'lodash/debounce'
-import format from 'date-fns/format'
-import addDays from 'date-fns/addDays'
-import startOfDay from 'date-fns/startOfDay'
-
-import { getMatches } from 'requests'
-import { useToggle } from 'hooks'
-import { useLexicsStore } from 'features/LexicsStore'
-
-import { getDisplayDate } from '../helpers'
-
-const dateFormat = 'dd/MM/yyyy HH:mm:ss'
-
-export const useDateFilter = () => {
-  const { lang } = useLexicsStore()
-  const {
-    close,
-    isOpen,
-    open,
-  } = useToggle()
-  const fetchMatches = useCallback(debounce(getMatches, 300), [])
-  const [currentDate, setCurrentDate] = useState(new Date())
-
-  const date = getDisplayDate({
-    date: currentDate,
-    lang,
-  })
-
-  const onPreviousClick = () => {
-    setCurrentDate(addDays(currentDate, -1))
-  }
-
-  const onNextClick = () => {
-    setCurrentDate(addDays(currentDate, 1))
-  }
-
-  const onDateChange = (newDate: Date | null) => {
-    if (newDate) {
-      setCurrentDate(newDate)
-      close()
-    }
-  }
-
-  useEffect(() => {
-    const formattedDate = format(startOfDay(currentDate), dateFormat)
-    fetchMatches({
-      date: formattedDate,
-      sportType: 1,
-      tournamentId: 8,
-    })
-  }, [fetchMatches, currentDate])
-
-  return {
-    close,
-    currentDate,
-    date,
-    isOpen,
-    onDateChange,
-    onNextClick,
-    onPreviousClick,
-    open,
-  }
-}

src/features/HeaderFilters/components/DateFilter/hooks/index.tsx

@@ -0,0 +1,48 @@
+import addDays from 'date-fns/addDays'
+
+import { useToggle } from 'hooks'
+import { useLexicsStore } from 'features/LexicsStore'
+import { useHeaderFiltersStore } from 'features/HeaderFilters'
+
+import { getDisplayDate } from '../helpers'
+
+export const useDateFilter = () => {
+  const { selectedDate, setSelectedDate } = useHeaderFiltersStore()
+  const { lang } = useLexicsStore()
+  const {
+    close,
+    isOpen,
+    open,
+  } = useToggle()
+
+  const date = getDisplayDate({
+    date: selectedDate,
+    lang,
+  })
+
+  const onPreviousClick = () => {
+    setSelectedDate(addDays(selectedDate, -1))
+  }
+
+  const onNextClick = () => {
+    setSelectedDate(addDays(selectedDate, 1))
+  }
+
+  const onDateChange = (newDate: Date | null) => {
+    if (newDate) {
+      setSelectedDate(newDate)
+      close()
+    }
+  }
+
+  return {
+    close,
+    date,
+    isOpen,
+    onDateChange,
+    onNextClick,
+    onPreviousClick,
+    open,
+    selectedDate,
+  }
+}

src/features/HeaderFilters/components/DateFilter/index.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { OutsideClick } from 'features/OutsideClick'
 
 import { useDateFilter } from './hooks'
-import { DatePicker } from './components/DatePicker'
+import { DatePicker } from '../DatePicker'
 import {
   Wrapper,
   Button,
@@ -19,13 +19,13 @@ import {
 export const DateFilter = () => {
   const {
     close,
-    currentDate,
     date,
     isOpen,
     onDateChange,
     onNextClick,
     onPreviousClick,
     open,
+    selectedDate,
   } = useDateFilter()
   return (
     <Wrapper active={isOpen}>
@@ -42,7 +42,7 @@ export const DateFilter = () => {
         </DateButton>
         <DatePicker
           open={isOpen}
-          selected={currentDate}
+          selected={selectedDate}
           onChange={onDateChange}
         />
       </OutsideClick>

src/features/HeaderFilters/components/DatePicker/index.tsx

@@ -7,8 +7,8 @@ import 'react-datepicker/dist/react-datepicker.css'
 import addMonths from 'date-fns/addMonths'
 
 import { useLexicsStore } from 'features/LexicsStore'
-import { getDisplayDate, getMonthName } from 'features/DateFilter/helpers'
 
+import { getDisplayDate, getMonthName } from '../DateFilter/helpers'
 import { useDatepickerLocales } from './hooks'
 import {
   Wrapper,

src/features/HeaderFilters/components/MatchStatusFilter/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import { T9n } from 'features/T9n'
+
+import { MatchStatuses, useHeaderFiltersStore } from '../../store'
+import {
+  RadioButtonGroup,
+  RadioButton,
+} from './styled'
+
+export const MatchStatusFilter = () => {
+  const { selectedMatchStatus, setSelectedMatchStatus } = useHeaderFiltersStore()
+  return (
+    <RadioButtonGroup>
+      <RadioButton
+        selected={selectedMatchStatus === MatchStatuses.Live}
+        onClick={() => setSelectedMatchStatus(MatchStatuses.Live)}
+        buttonWidth={80}
+      >
+        <T9n t='match_status_live' />
+      </RadioButton>
+      <RadioButton
+        selected={selectedMatchStatus === MatchStatuses.Finished}
+        onClick={() => setSelectedMatchStatus(MatchStatuses.Finished)}
+        buttonWidth={121}
+      >
+        <T9n t='match_status_finished' />
+      </RadioButton>
+      <RadioButton
+        selected={selectedMatchStatus === MatchStatuses.Soon}
+        onClick={() => setSelectedMatchStatus(MatchStatuses.Soon)}
+        buttonWidth={87}
+      >
+        <T9n t='match_status_soon' />
+      </RadioButton>
+    </RadioButtonGroup>
+  )
+}

src/features/HeaderFilters/components/MatchStatusFilter/styled.tsx

@@ -0,0 +1,47 @@
+import styled from 'styled-components/macro'
+
+export const RadioButtonGroup = styled.div`
+  height: 100%;
+  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+  border-radius: 2px;
+  overflow: hidden;
+`
+
+type RadioButtonProps = {
+  buttonWidth?: number,
+  selected?: boolean,
+}
+
+export const RadioButton = styled.button<RadioButtonProps>`
+  border: none;
+  outline: none;
+  height: 100%;
+  width: ${({ buttonWidth }) => (buttonWidth ? `${buttonWidth}px` : '')};
+  font-weight: 600;
+  font-size: 18px;
+  cursor: pointer;
+
+  ${({ selected }) => (
+    selected
+      ? `
+        background-color: #666666;
+        color: #ffffff;
+      `
+      : `
+        background-color: #3F3F3F;
+        color: #999999;
+
+        :hover {
+          background-color: #484848;
+        }
+      `
+  )}
+
+  :first-child {
+    text-transform: uppercase;
+  }
+
+  :not(:last-child) {
+    border-right: 1px solid #222222;
+  }
+`

src/features/HeaderFilters/index.tsx

@@ -0,0 +1,5 @@
+export * from './components/DateFilter'
+export * from './components/MatchStatusFilter'
+export * from './components/SportTypeFilter'
+export * from './components/TournamentFilter'
+export * from './store'

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

@@ -0,0 +1,69 @@
+import {
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+} from 'react'
+
+import debounce from 'lodash/debounce'
+import format from 'date-fns/format'
+import startOfDay from 'date-fns/startOfDay'
+
+import { getMatches } from 'requests'
+
+import { useTournaments } from './useTournaments'
+
+export enum MatchStatuses {
+  Live = 1,
+  Finished = 2,
+  Soon = 3,
+}
+
+export enum SportTypes {
+  Football = 1,
+  Basketball = 2,
+  Hockey = 3,
+}
+
+const dateFormat = 'dd/MM/yyyy HH:mm:ss'
+
+export const useFilters = () => {
+  const [selectedDate, setSelectedDate] = useState(new Date())
+  const [selectedMatchStatus, setSelectedMatchStatus] = useState<MatchStatuses>(MatchStatuses.Live)
+  const [selectedSportType, setSelectedSportTypes] = useState<SportTypes>(SportTypes.Football)
+  const tournaments = useTournaments()
+  const fetchMatches = useCallback(debounce(getMatches, 300), [])
+
+  // временно здесь запрашиваются матчи при изменении фильтров,
+  // можно эту логику вырезать и вставить в компонент матчей
+  useEffect(() => {
+    const formattedDate = format(startOfDay(selectedDate), dateFormat)
+    fetchMatches({
+      date: formattedDate,
+      matchStatus: selectedMatchStatus,
+      sportType: selectedSportType,
+      tournamentId: 8,
+    })
+  }, [
+    selectedDate,
+    selectedMatchStatus,
+    selectedSportType,
+    fetchMatches,
+  ])
+
+  const store = useMemo(() => ({
+    selectedDate,
+    selectedMatchStatus,
+    selectedSportType,
+    setSelectedDate,
+    setSelectedMatchStatus,
+    setSelectedSportTypes,
+    tournaments,
+  }), [
+    selectedDate,
+    selectedMatchStatus,
+    selectedSportType,
+    tournaments,
+  ])
+  return store
+}

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

@@ -0,0 +1,14 @@
+type TournamentOption = {}
+
+type Tournaments = {
+  options: Array<TournamentOption>,
+  selected: TournamentOption | null,
+}
+
+const initialState: Tournaments = {
+  options: [],
+  selected: null,
+}
+
+// доделаем на таске по турнирам
+export const useTournaments = () => initialState

src/features/HeaderFilters/store/index.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+import React, {
+  useContext,
+  createContext,
+} from 'react'
+
+import { useFilters } from './hooks'
+
+export * from './hooks'
+
+type HeaderFiltersStore = ReturnType<typeof useFilters>
+
+const FiltersContext = createContext({} as HeaderFiltersStore)
+
+type Props = { children: ReactNode }
+
+export const HeaderFiltersStore = ({ children }: Props) => {
+  const filters = useFilters()
+  return (
+    <FiltersContext.Provider value={filters}>
+      {children}
+    </FiltersContext.Provider>
+  )
+}
+
+export const useHeaderFiltersStore = () => useContext(FiltersContext)

src/features/HomePage/index.tsx

@@ -1,12 +1,15 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
 import { Header } from 'features/Header'
 import { MainWrapper } from 'features/MainWrapper'
 import { Search } from 'features/Search'
-import { DateFilter } from 'features/DateFilter'
-import { MatchStatusFilter } from 'features/MatchStatusFilter'
-import { SportTypeFilter } from 'features/SportTypeFilter'
-import { TournamentFilter } from 'features/TournamentFilter'
+import {
+  DateFilter,
+  MatchStatusFilter,
+  SportTypeFilter,
+  TournamentFilter,
+  HeaderFiltersStore,
+} from 'features/HeaderFilters'
 import { UserSportFav } from 'features/UserSportFav'
 
 import {
@@ -14,7 +17,7 @@ import {
 } from './styled'
 
 export const HomePage = () => (
-  <Fragment>
+  <HeaderFiltersStore>
     <MainWrapper>
       <UserSportFav />
       <Header>
@@ -36,5 +39,5 @@ export const HomePage = () => (
         </FilterWrapper>
       </Header>
     </MainWrapper>
-  </Fragment>
+  </HeaderFiltersStore>
 )

src/features/MatchStatusFilter/index.tsx

@@ -1,5 +0,0 @@
-import React from 'react'
-
-import { Wrapper } from './styled'
-
-export const MatchStatusFilter = () => <Wrapper />

src/features/TournamentFilter/styled.tsx

@@ -1,3 +0,0 @@
-import styled from 'styled-components/macro'
-
-export const Wrapper = styled.div``

src/helpers/handleImg/index.tsx

@@ -21,7 +21,9 @@ export const DATA_TYPES = {
 } as const
 
 export const handleImageError = (arg: imageErrorArgs): void => {
+  // eslint-disable-next-line no-param-reassign
   arg.e.target.onError = ''
   // @ts-expect-error
+  // eslint-disable-next-line no-param-reassign
   arg.e.target.src = LOGOS_FALLBACKS[SPORT_TYPES[arg.sport]][DATA_TYPES[arg.type]]
 }

src/helpers/index.tsx

@@ -3,4 +3,3 @@ export * from './callApi/getResponseData'
 export * from './token'
 export * from './getLogo'
 export * from './handleImg'
-

src/requests/getMatches.tsx

@@ -1,6 +1,8 @@
 import { DATA_URL, PROCEDURES } from 'config'
 import { callApi, getResponseData } from 'helpers'
 
+import { MatchStatuses } from 'features/HeaderFilters'
+
 const proc = PROCEDURES.get_matches
 
 export type Item = {
@@ -29,12 +31,14 @@ export type Team = {
 
 type Args = {
   date: string,
+  matchStatus: MatchStatuses,
   sportType: number,
   tournamentId: number,
 }
 
 export const getMatches = ({
   date,
+  matchStatus,
   sportType,
   tournamentId,
 }: Args): Promise<Array<Item>> => {
@@ -43,6 +47,7 @@ export const getMatches = ({
       params: {
         _p_date: date,
         _p_sport: sportType,
+        _p_stream_status: matchStatus,
         _p_tournament_id: tournamentId,
       },
       proc,