diff --git a/public/images/match-switch-off.svg b/public/images/match-switch-off.svg new file mode 100644 index 00000000..cc1045c1 --- /dev/null +++ b/public/images/match-switch-off.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/match-switch-on.svg b/public/images/match-switch-on.svg new file mode 100644 index 00000000..1d750ebf --- /dev/null +++ b/public/images/match-switch-on.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/switchOff.svg b/public/images/score-switch-off.svg similarity index 100% rename from public/images/switchOff.svg rename to public/images/score-switch-off.svg diff --git a/public/images/switchOn.svg b/public/images/score-switch-on.svg similarity index 100% rename from public/images/switchOn.svg rename to public/images/score-switch-on.svg diff --git a/src/config/lexics/indexLexics.tsx b/src/config/lexics/indexLexics.tsx index 8a57ed2c..3d8a3e49 100644 --- a/src/config/lexics/indexLexics.tsx +++ b/src/config/lexics/indexLexics.tsx @@ -4,6 +4,8 @@ export const indexLexics = { add_to_favorites: 1701, add_to_favorites_error: 12943, added_to_favorites: 13048, + all_matches_shown: 13386, + available_matches_shown: 13385, basketball: 6960, broadcast: 13049, cm: 817, diff --git a/src/features/App/AuthenticatedApp.tsx b/src/features/App/AuthenticatedApp.tsx index 8c44a720..70a7282d 100644 --- a/src/features/App/AuthenticatedApp.tsx +++ b/src/features/App/AuthenticatedApp.tsx @@ -16,7 +16,7 @@ import { PlayerPage } from 'features/PlayerPage' import { TournamentPage } from 'features/TournamentPage' import { ExtendedSearchStore, ExtendedSearchPage } from 'features/ExtendedSearchPage' import { UserAccount } from 'features/UserAccount' -import { ScoreStore } from 'features/ToggleScore' +import { MatchSwitchesStore } from 'features/MatchSwitches' import { MainWrapper } from 'features/MainWrapper' import { UserFavorites } from 'features/UserFavorites' @@ -29,7 +29,7 @@ export const AuthenticatedApp = () => { const isMobile = useMediaQuery({ query: devices.tablet }) return ( - + @@ -63,7 +63,7 @@ export const AuthenticatedApp = () => { - + ) } diff --git a/src/features/HeaderMobile/index.tsx b/src/features/HeaderMobile/index.tsx index db10991b..82431529 100644 --- a/src/features/HeaderMobile/index.tsx +++ b/src/features/HeaderMobile/index.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom' import { PAGES } from 'config' -import { ToggleScore } from 'features/ToggleScore' +import { ScoreSwitch, AvailableMatchesSwitch } from 'features/MatchSwitches' import { Logo } from 'features/Logo' import { Menu } from 'features/Menu' import { Search } from 'features/Search' @@ -16,7 +16,8 @@ import { export const HeaderMobile = () => ( - + + diff --git a/src/features/HomePage/components/Header/index.tsx b/src/features/HomePage/components/Header/index.tsx index d017ce19..bad49729 100644 --- a/src/features/HomePage/components/Header/index.tsx +++ b/src/features/HomePage/components/Header/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import { Menu } from 'features/Menu' import { LanguageSelect } from 'features/LanguageSelect' -import { ToggleScore } from 'features/ToggleScore' +import { ScoreSwitch, AvailableMatchesSwitch } from 'features/MatchSwitches' import { Search } from 'features/Search' import { DateFilter, @@ -42,7 +42,8 @@ export const Header = () => ( - + + diff --git a/src/features/HomePage/hooks.tsx b/src/features/HomePage/hooks.tsx index 5252f422..5ae0188a 100644 --- a/src/features/HomePage/hooks.tsx +++ b/src/features/HomePage/hooks.tsx @@ -3,6 +3,7 @@ import { useCallback } from 'react' import { getHomeMatches } from 'requests' import { useHeaderFiltersStore } from 'features/HeaderFilters' +import { useMatchSwitchesStore } from 'features/MatchSwitches' export const useHomePage = () => { const { @@ -11,9 +12,11 @@ export const useHomePage = () => { selectedSportTypeId, selectedTournamentId, } = useHeaderFiltersStore() + const { availableMatchesOnly } = useMatchSwitchesStore() const fetchMatches = useCallback( (limit: number, offset: number) => getHomeMatches({ + availableMatchesOnly, date: selectedDateFormatted, limit, matchStatus: selectedMatchStatus, @@ -26,6 +29,7 @@ export const useHomePage = () => { selectedMatchStatus, selectedSportTypeId, selectedTournamentId, + availableMatchesOnly, ], ) diff --git a/src/features/MatchCard/MatchInfoCard/index.tsx b/src/features/MatchCard/MatchInfoCard/index.tsx index 1e4ed4c9..51d10bfa 100644 --- a/src/features/MatchCard/MatchInfoCard/index.tsx +++ b/src/features/MatchCard/MatchInfoCard/index.tsx @@ -5,7 +5,7 @@ import { ProfileTypes } from 'config' import type { Match } from 'features/Matches' import { SportName } from 'features/Common' -import { useScoreStore } from 'features/ToggleScore' +import { useMatchSwitchesStore } from 'features/MatchSwitches' import { useName } from 'features/Name' import { @@ -47,7 +47,7 @@ export const MatchInfoCard = ({ showSportName, }: Props) => { const tournamentName = useName(tournament) - const { isHidden } = useScoreStore() + const { isScoreHidden } = useMatchSwitchesStore() return ( - {!isHidden && {team1.score}} + {!isScoreHidden && {team1.score}} - {!isHidden && {team2.score}} + {!isScoreHidden && {team2.score}} diff --git a/src/features/MatchPage/MatchProfileCard/index.tsx b/src/features/MatchPage/MatchProfileCard/index.tsx index a68457fb..545c8c5a 100644 --- a/src/features/MatchPage/MatchProfileCard/index.tsx +++ b/src/features/MatchPage/MatchProfileCard/index.tsx @@ -7,7 +7,7 @@ import type { MatchInfo } from 'requests' import { ProfileTypes } from 'config' import { SportName } from 'features/Common/SportName' -import { useScoreStore } from 'features/ToggleScore' +import { useMatchSwitchesStore } from 'features/MatchSwitches' import { Name } from 'features/Name' import { useSportNameParam } from 'hooks/useSportNameParam' @@ -30,7 +30,7 @@ type Props = { export const MatchProfileCard = ({ profile }: Props) => { const { sportType } = useSportNameParam() - const { isHidden } = useScoreStore() + const { isScoreHidden } = useMatchSwitchesStore() if (!profile) return @@ -51,7 +51,7 @@ export const MatchProfileCard = ({ profile }: Props) => { { - isHidden + isScoreHidden ? : ( diff --git a/src/features/MatchSwitches/components/AvailableMatchesSwitch/index.tsx b/src/features/MatchSwitches/components/AvailableMatchesSwitch/index.tsx new file mode 100644 index 00000000..5bb0a56a --- /dev/null +++ b/src/features/MatchSwitches/components/AvailableMatchesSwitch/index.tsx @@ -0,0 +1,49 @@ +import React from 'react' + +import styled from 'styled-components/macro' + +import { Tooltip, TooltipWrapper } from 'features/Tooltip' +import { useMatchSwitchesStore } from 'features/MatchSwitches' + +import { + Switch, + Icon, +} from '../../styled' + +const Wrapper = styled.div` + position: relative; + + :hover ${TooltipWrapper} { + display: block; + } +` + +export const AvailableMatchesSwitch = () => { + const { + availableMatchesOnly, + toggleMatchAvailablity, + } = useMatchSwitchesStore() + + const lexic = availableMatchesOnly + ? 'available_matches_shown' + : 'all_matches_shown' + + return ( + + + + + + + + ) +} diff --git a/src/features/MatchSwitches/components/ScoreSwitch/index.tsx b/src/features/MatchSwitches/components/ScoreSwitch/index.tsx new file mode 100644 index 00000000..d34c2253 --- /dev/null +++ b/src/features/MatchSwitches/components/ScoreSwitch/index.tsx @@ -0,0 +1,35 @@ +import React from 'react' + +import styled from 'styled-components/macro' + +import { useMatchSwitchesStore } from 'features/MatchSwitches' + +import { + Switch, + Title, + Icon, +} from '../../styled' + +const Wrapper = styled.div` + margin-right: 27px; + height: 100%; + display: flex; + align-items: center; +` + +export const ScoreSwitch = () => { + const { isScoreHidden, toggleScore } = useMatchSwitchesStore() + + return ( + + + + <Icon iconName='score-switch' isOn={isScoreHidden} /> + </Switch> + </Wrapper> + ) +} diff --git a/src/features/MatchSwitches/hooks.tsx b/src/features/MatchSwitches/hooks.tsx new file mode 100644 index 00000000..e2f20b98 --- /dev/null +++ b/src/features/MatchSwitches/hooks.tsx @@ -0,0 +1,29 @@ +import isBoolean from 'lodash/isBoolean' + +import { useLocalStore } from 'hooks' + +const SCORE_KEY = 'score_hidden' +const MATCH_AVAILABILITY_KEY = 'available_matches_only' + +export const useMatchSwitches = () => { + const [isScoreHidden, setScoreHidden] = useLocalStore({ + defaultValue: false, + key: SCORE_KEY, + validator: isBoolean, + }) + const toggleScore = () => setScoreHidden(!isScoreHidden) + + const [availableMatchesOnly, setAvailableMatchesOnly] = useLocalStore({ + defaultValue: false, + key: MATCH_AVAILABILITY_KEY, + validator: isBoolean, + }) + const toggleMatchAvailablity = () => setAvailableMatchesOnly(!availableMatchesOnly) + + return { + availableMatchesOnly, + isScoreHidden, + toggleMatchAvailablity, + toggleScore, + } +} diff --git a/src/features/MatchSwitches/index.tsx b/src/features/MatchSwitches/index.tsx new file mode 100644 index 00000000..f52ea897 --- /dev/null +++ b/src/features/MatchSwitches/index.tsx @@ -0,0 +1,3 @@ +export * from './store' +export * from './components/ScoreSwitch' +export * from './components/AvailableMatchesSwitch' diff --git a/src/features/MatchSwitches/store.tsx b/src/features/MatchSwitches/store.tsx new file mode 100644 index 00000000..82675b5e --- /dev/null +++ b/src/features/MatchSwitches/store.tsx @@ -0,0 +1,25 @@ +import type { ReactNode } from 'react' +import React, { + createContext, + useContext, +} from 'react' + +import { useMatchSwitches } from './hooks' + +type SwitchStore = ReturnType<typeof useMatchSwitches> + +type Props = { children: ReactNode } + +const Context = createContext({} as SwitchStore) + +export const MatchSwitchesStore = ({ children }: Props) => { + const value = useMatchSwitches() + + return ( + <Context.Provider value={value}> + {children} + </Context.Provider> + ) +} + +export const useMatchSwitchesStore = () => useContext(Context) diff --git a/src/features/ToggleScore/styled.tsx b/src/features/MatchSwitches/styled.tsx similarity index 69% rename from src/features/ToggleScore/styled.tsx rename to src/features/MatchSwitches/styled.tsx index 2c7ba8be..55d45f2f 100644 --- a/src/features/ToggleScore/styled.tsx +++ b/src/features/MatchSwitches/styled.tsx @@ -7,11 +7,6 @@ export const Switch = styled.div` display: flex; align-items: center; cursor: pointer; - margin-right: 135px; - - @media ${devices.laptop} { - margin-right: 12px; - } @media ${devices.tablet} { position: static; @@ -35,23 +30,25 @@ export const Title = styled(T9n)` ` type IconProps = { + height?: number, + iconName: string, isOn: boolean, + width?: number, } export const Icon = styled.div<IconProps>` - width: 28px; - height: 16px; + width: ${({ width = 30 }) => width}px; + height: ${({ height = 18 }) => height}px; color: white; background-repeat: no-repeat; - ${({ isOn }) => ( + background-position-y: 1px; + ${({ iconName, isOn }) => ( isOn ? ` - background-image: url(/images/switchOn.svg); - background-position: 0 -1px; + background-image: url(/images/${iconName}-on.svg); ` : ` - background-image: url(/images/switchOff.svg); - background-position: -2px -1px; + background-image: url(/images/${iconName}-off.svg); ` )}; ` diff --git a/src/features/PlayerPage/hooks.tsx b/src/features/PlayerPage/hooks.tsx index 463c4d80..21387970 100644 --- a/src/features/PlayerPage/hooks.tsx +++ b/src/features/PlayerPage/hooks.tsx @@ -12,12 +12,14 @@ import { getPlayerInfo, getPlayerMatches } from 'requests' import { useName } from 'features/Name' import { useLexicsStore } from 'features/LexicsStore' import { addSportType } from 'features/Matches/helpers/addSportType' +import { useMatchSwitchesStore } from 'features/MatchSwitches' export const usePlayerPage = () => { const [playerProfile, setPlayerProfile] = useState<PlayerProfile>(null) const { sportType } = useSportNameParam() const playerId = usePageId() const { translate } = useLexicsStore() + const { availableMatchesOnly } = useMatchSwitchesStore() const { club_team, @@ -47,12 +49,17 @@ export const usePlayerPage = () => { const fetchMatches = useCallback( (limit: number, offset: number) => getPlayerMatches({ + availableMatchesOnly, limit, offset, playerId, sportType, }).then((matches) => addSportType(matches, sportType)), - [playerId, sportType], + [ + playerId, + sportType, + availableMatchesOnly, + ], ) return { diff --git a/src/features/ProfileHeader/index.tsx b/src/features/ProfileHeader/index.tsx index ec932475..945a721b 100644 --- a/src/features/ProfileHeader/index.tsx +++ b/src/features/ProfileHeader/index.tsx @@ -4,7 +4,7 @@ import { devices } from 'config' import { Menu } from 'features/Menu' import { LanguageSelect } from 'features/LanguageSelect' -import { ToggleScore } from 'features/ToggleScore' +import { ScoreSwitch, AvailableMatchesSwitch } from 'features/MatchSwitches' import { Search } from 'features/Search' import { HeaderMobile } from 'features/HeaderMobile' import { useMediaQuery } from 'features/MediaQuery' @@ -31,7 +31,8 @@ export const ProfileHeader = () => { </HeaderGroup> <HeaderGroup> - <ToggleScore /> + <ScoreSwitch /> + <AvailableMatchesSwitch /> <MenuWrapper> <Menu /> </MenuWrapper> diff --git a/src/features/TeamPage/hooks.tsx b/src/features/TeamPage/hooks.tsx index 3965bd24..a6cd4138 100644 --- a/src/features/TeamPage/hooks.tsx +++ b/src/features/TeamPage/hooks.tsx @@ -11,12 +11,14 @@ import { useSportNameParam, usePageId } from 'hooks' import { useName } from 'features/Name' import { addSportType } from 'features/Matches/helpers/addSportType' +import { useMatchSwitchesStore } from 'features/MatchSwitches' export const useTeamPage = () => { const [teamProfile, setTeamProfile] = useState<TeamInfo>(null) const { sportType } = useSportNameParam() const teamId = usePageId() const country = useName(teamProfile?.country || {}) + const { availableMatchesOnly } = useMatchSwitchesStore() useEffect(() => { getTeamInfo(sportType, teamId) @@ -29,12 +31,17 @@ export const useTeamPage = () => { const fetchMatches = useCallback( (limit: number, offset: number) => getTeamMatches({ + availableMatchesOnly, limit, offset, sportType, teamId, }).then((matches) => addSportType(matches, sportType)), - [teamId, sportType], + [ + teamId, + sportType, + availableMatchesOnly, + ], ) return { diff --git a/src/features/ToggleScore/index.tsx b/src/features/ToggleScore/index.tsx deleted file mode 100644 index 24cffbc7..00000000 --- a/src/features/ToggleScore/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' - -import { useScoreStore } from './store' -import { - Switch, - Title, - Icon, -} from './styled' - -export * from './store' - -export const ToggleScore = () => { - const { isHidden, toggle } = useScoreStore() - - return ( - <Switch - onClick={toggle} - role='switch' - aria-checked={isHidden} - > - <Title t='hide_score' /> - <Icon isOn={isHidden} /> - </Switch> - ) -} diff --git a/src/features/ToggleScore/store.tsx b/src/features/ToggleScore/store.tsx deleted file mode 100644 index 4911202d..00000000 --- a/src/features/ToggleScore/store.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { ReactNode } from 'react' -import React, { - createContext, - useContext, -} from 'react' - -import isBoolean from 'lodash/isBoolean' - -import { useLocalStore } from 'hooks' - -const SCORE_KEY = 'hide_score' - -type ScoreStore = { - isHidden: boolean, - toggle: () => void, -} - -type Props = { children: ReactNode } - -const ScoreContext = createContext({} as ScoreStore) - -export const ScoreStore = ({ children }: Props) => { - const [isOpen, setIsOpen] = useLocalStore({ - defaultValue: false, - key: SCORE_KEY, - validator: isBoolean, - }) - const toggle = () => setIsOpen(!isOpen) - - return ( - <ScoreContext.Provider value={{ isHidden: isOpen, toggle }}> - {children} - </ScoreContext.Provider> - ) -} - -export const useScoreStore = () => useContext(ScoreContext) diff --git a/src/features/TournamentPage/hooks.tsx b/src/features/TournamentPage/hooks.tsx index 0a39b7eb..f22dc39a 100644 --- a/src/features/TournamentPage/hooks.tsx +++ b/src/features/TournamentPage/hooks.tsx @@ -11,12 +11,14 @@ import { useSportNameParam, usePageId } from 'hooks' import { useName } from 'features/Name' import { addSportType } from 'features/Matches/helpers/addSportType' +import { useMatchSwitchesStore } from 'features/MatchSwitches' export const useTournamentPage = () => { const [tournamentProfile, setTournamentProfile] = useState<TournamentInfo>(null) const { sportType } = useSportNameParam() const tournamentId = usePageId() const country = useName(tournamentProfile?.country || {}) + const { availableMatchesOnly } = useMatchSwitchesStore() useEffect(() => { getTournamentInfo(sportType, tournamentId) @@ -29,12 +31,17 @@ export const useTournamentPage = () => { const fetchMatches = useCallback( (limit: number, offset: number) => getTournamentMatches({ + availableMatchesOnly, limit, offset, sportType, tournamentId, }).then((matches) => addSportType(matches, sportType)), - [tournamentId, sportType], + [ + tournamentId, + sportType, + availableMatchesOnly, + ], ) return { diff --git a/src/requests/getMatches/getHomeMatches.tsx b/src/requests/getMatches/getHomeMatches.tsx index 1f662ccd..8c7f8c65 100644 --- a/src/requests/getMatches/getHomeMatches.tsx +++ b/src/requests/getMatches/getHomeMatches.tsx @@ -8,6 +8,7 @@ import { requestMatches } from './request' const proc = PROCEDURES.get_matches type Args = { + availableMatchesOnly: boolean, date: string, limit: number, matchStatus: MatchStatuses | null, @@ -17,6 +18,7 @@ type Args = { } export const getHomeMatches = async ({ + availableMatchesOnly, date, limit, matchStatus, @@ -32,6 +34,7 @@ export const getHomeMatches = async ({ _p_offset: offset, _p_sport: sportType, _p_stream_status: matchStatus, + _p_sub_only: availableMatchesOnly, _p_tournament_id: tournamentId, }, proc, diff --git a/src/requests/getMatches/getPlayerMatches.tsx b/src/requests/getMatches/getPlayerMatches.tsx index b7cae6a4..c1377dce 100644 --- a/src/requests/getMatches/getPlayerMatches.tsx +++ b/src/requests/getMatches/getPlayerMatches.tsx @@ -6,6 +6,7 @@ import { requestMatches } from './request' const proc = PROCEDURES.get_player_matches type Args = { + availableMatchesOnly: boolean, limit: number, offset: number, playerId: number, @@ -13,6 +14,7 @@ type Args = { } export const getPlayerMatches = async ({ + availableMatchesOnly, limit, offset, playerId, @@ -25,6 +27,7 @@ export const getPlayerMatches = async ({ _p_offset: offset, _p_player_id: playerId, _p_sport: sportType, + _p_sub_only: availableMatchesOnly, }, proc, }, diff --git a/src/requests/getMatches/getTeamMatches.tsx b/src/requests/getMatches/getTeamMatches.tsx index dd86ab0c..150bf3f7 100644 --- a/src/requests/getMatches/getTeamMatches.tsx +++ b/src/requests/getMatches/getTeamMatches.tsx @@ -6,6 +6,7 @@ import { requestMatches } from './request' const proc = PROCEDURES.get_team_matches type Args = { + availableMatchesOnly: boolean, limit: number, offset: number, sportType: SportTypes, @@ -13,6 +14,7 @@ type Args = { } export const getTeamMatches = async ({ + availableMatchesOnly, limit, offset, sportType, @@ -24,6 +26,7 @@ export const getTeamMatches = async ({ _p_limit: limit, _p_offset: offset, _p_sport: sportType, + _p_sub_only: availableMatchesOnly, _p_team_id: teamId, }, proc, diff --git a/src/requests/getMatches/getTournamentMatches.tsx b/src/requests/getMatches/getTournamentMatches.tsx index 70369b16..fa760874 100644 --- a/src/requests/getMatches/getTournamentMatches.tsx +++ b/src/requests/getMatches/getTournamentMatches.tsx @@ -6,6 +6,7 @@ import { requestMatches } from './request' const proc = PROCEDURES.get_tournament_matches type Args = { + availableMatchesOnly: boolean, limit: number, offset: number, sportType: SportTypes, @@ -13,6 +14,7 @@ type Args = { } export const getTournamentMatches = async ({ + availableMatchesOnly, limit, offset, sportType, @@ -24,6 +26,7 @@ export const getTournamentMatches = async ({ _p_limit: limit, _p_offset: offset, _p_sport: sportType, + _p_sub_only: availableMatchesOnly, _p_tournament_id: tournamentId, }, proc,