diff --git a/src/features/HeaderFilters/store/helpers/isValidMatchStatus/index.tsx b/src/features/HeaderFilters/store/helpers/isValidMatchStatus/index.tsx index 1410ffba..3a11cb65 100644 --- a/src/features/HeaderFilters/store/helpers/isValidMatchStatus/index.tsx +++ b/src/features/HeaderFilters/store/helpers/isValidMatchStatus/index.tsx @@ -4,6 +4,6 @@ import values from 'lodash/values' import { MatchStatuses } from '../../hooks' -export const isValidMatchStatus = (value: number) => ( +export const isValidMatchStatus = (value: number | null) => ( isNumber(value) && includes(values(MatchStatuses), value) ) diff --git a/src/features/HeaderFilters/store/hooks/index.tsx b/src/features/HeaderFilters/store/hooks/index.tsx index bbf1b7c2..9de28cc6 100644 --- a/src/features/HeaderFilters/store/hooks/index.tsx +++ b/src/features/HeaderFilters/store/hooks/index.tsx @@ -1,4 +1,4 @@ -import { useMemo } from 'react' +import { useMemo, useCallback } from 'react' import isNumber from 'lodash/isNumber' import format from 'date-fns/format' @@ -30,13 +30,24 @@ export const useFilters = () => { const [ selectedMatchStatus, - setSelectedMatchStatus, - ] = useQueryParamStore({ - defaultValue: MatchStatuses.Live, + setMatchStatus, + ] = useQueryParamStore({ + defaultValue: null, key: filterKeys.MATCH_STATUS, validator: isValidMatchStatus, }) + const setSelectedMatchStatus = useCallback((status: MatchStatuses) => { + if (status === selectedMatchStatus) { + setMatchStatus(null) + } else { + setMatchStatus(status) + } + }, [ + selectedMatchStatus, + setMatchStatus, + ]) + const [ selectedSportTypeId, setSelectedSportTypeId, diff --git a/src/requests/getMatches.tsx b/src/requests/getMatches.tsx index dc67070d..550f51f6 100644 --- a/src/requests/getMatches.tsx +++ b/src/requests/getMatches.tsx @@ -51,7 +51,7 @@ export type Team = { type Args = { date: string, - matchStatus: MatchStatuses, + matchStatus: MatchStatuses | null, playerId?: number | null, sportType: SportTypes | null, teamId?: number | null,