From 474cad59252b4ccc8bac1b17a2cdd9d7fac4228e Mon Sep 17 00:00:00 2001 From: Margarita Date: Tue, 17 Jan 2023 22:23:02 +0400 Subject: [PATCH] feat(in-235): match player filter --- src/features/MatchPage/store/hooks/index.tsx | 41 +++++---- .../MatchPage/store/hooks/useFitersPopup.tsx | 66 +++++++++++--- .../components/FiltersPopup/index.tsx | 88 +++++++++++-------- .../components/FiltersPopup/styled.tsx | 59 +++++++++---- .../PopupComponents/BaseButton/index.tsx | 4 +- 5 files changed, 175 insertions(+), 83 deletions(-) diff --git a/src/features/MatchPage/store/hooks/index.tsx b/src/features/MatchPage/store/hooks/index.tsx index 01e483bd..94dd2a44 100644 --- a/src/features/MatchPage/store/hooks/index.tsx +++ b/src/features/MatchPage/store/hooks/index.tsx @@ -41,22 +41,39 @@ export const useMatchPage = () => { open: showProfileCard, } = useToggle(true) + const { + events, + handlePlaylistClick, + matchPlaylists, + selectedPlaylist, + setFullMatchPlaylistDuration, + } = useMatchData(matchProfile) + + const profile = matchProfile + const { activeEvents, activeFirstTeamPlayers, activeSecondTeamPlayers, + allActionsToggle, + allPlayersToggle, applyFilters, close: closePopup, countOfFilters, filters, + isAllActionsChecked, isEmptyFilters, + isFirstTeamPlayersChecked, isOpen: isOpenFiltersPopup, - resetEvents, - resetPlayers, + isSecondTeamPlayersChecked, toggle: togglePopup, toggleActiveEvents, toggleActivePlayers, - } = useFiltersPopup() + uniqEvents, + } = useFiltersPopup({ + events, + matchPlaylists, + }) useEffect(() => { getMatchInfo(sportType, matchId).then(setMatchProfile) @@ -113,16 +130,6 @@ export const useMatchPage = () => { return () => clearInterval(getIntervalMatch) }) - const { - events, - handlePlaylistClick, - matchPlaylists, - selectedPlaylist, - setFullMatchPlaylistDuration, - } = useMatchData(matchProfile) - - const profile = matchProfile - const isStarted = useMemo(() => ( profile?.date ? parseDate(profile.date) < new Date() @@ -202,6 +209,8 @@ export const useMatchPage = () => { activeFirstTeamPlayers, activeSecondTeamPlayers, activeStatus, + allActionsToggle, + allPlayersToggle, applyFilters, closePopup, countOfFilters, @@ -210,10 +219,13 @@ export const useMatchPage = () => { filteredEvents, handlePlaylistClick, hideProfileCard, + isAllActionsChecked, isEmptyFilters, + isFirstTeamPlayersChecked, isLiveMatch, isOpenFiltersPopup, isPlayFilterEpisodes, + isSecondTeamPlayersChecked, isStarted, likeImage, likeToggle, @@ -223,8 +235,6 @@ export const useMatchPage = () => { playNextEpisode, profile, profileCardShown, - resetEvents, - resetPlayers, reversedGroupEvents, selectedPlaylist, setFullMatchPlaylistDuration, @@ -238,6 +248,7 @@ export const useMatchPage = () => { toggleActivePlayers, togglePopup, tournamentData, + uniqEvents, user, watchAllEpisodesTimer, } diff --git a/src/features/MatchPage/store/hooks/useFitersPopup.tsx b/src/features/MatchPage/store/hooks/useFitersPopup.tsx index 78fa4e06..37b096ab 100644 --- a/src/features/MatchPage/store/hooks/useFitersPopup.tsx +++ b/src/features/MatchPage/store/hooks/useFitersPopup.tsx @@ -4,6 +4,13 @@ import includes from 'lodash/includes' import filter from 'lodash/filter' import isEmpty from 'lodash/isEmpty' import size from 'lodash/size' +import uniq from 'lodash/uniq' +import difference from 'lodash/difference' +import map from 'lodash/map' +import every from 'lodash/every' + +import type { Events } from 'requests' +import type { Playlists } from 'features/MatchPage/types' type TTogglePlayers = { id: Number, @@ -15,13 +22,36 @@ type TFilters = { players: Array, } -export const useFiltersPopup = () => { +type Props = { + events: Events, + matchPlaylists: Playlists, +} + +export const useFiltersPopup = ({ + events, + matchPlaylists, +}: Props) => { const [isOpen, setIsOpen] = useState(false) const [activeEvents, setActiveEvents] = useState>([]) const [activeFirstTeamPlayers, setActiveFirstTeamPlayers] = useState>([]) const [activeSecondTeamPlayers, setActiveSecondTeamPlayers] = useState>([]) const [activeFilters, setActiveFilters] = useState({ events: [], players: [] }) + const currentEvents = filter(events, (event) => event.pl !== undefined + && event.t !== undefined) + + const uniqEvents = uniq(map(currentEvents, ({ l }) => l)) + const uniqPlayersTeam1 = uniq(map(matchPlaylists.players.team1, ({ id }) => id)) + const uniqPlayersTeam2 = uniq(map(matchPlaylists.players.team2, ({ id }) => id)) + + const isAllActionsChecked = every(uniqEvents, (el) => (includes(activeEvents, el))) + const isFirstTeamPlayersChecked = every( + uniqPlayersTeam1, (el) => (includes(activeFirstTeamPlayers, el)), + ) + const isSecondTeamPlayersChecked = every( + uniqPlayersTeam2, (el) => (includes(activeSecondTeamPlayers, el)), + ) + const toggle = () => { setIsOpen(!isOpen) } @@ -50,22 +80,28 @@ export const useFiltersPopup = () => { : [...teamState, id]) } - const resetPlayers = (team: string) => () => { - const teamState = team === 'team1' - ? activeFirstTeamPlayers - : activeSecondTeamPlayers - + const allPlayersToggle = (team: string) => () => { const setterTeamState = team === 'team1' ? setActiveFirstTeamPlayers : setActiveSecondTeamPlayers - if (isEmpty(teamState)) return - setterTeamState([]) + const uniqValues = team === 'team1' + ? uniqPlayersTeam1 + : uniqPlayersTeam2 + + const isAllPlayersChecked = team === 'team1' + ? isFirstTeamPlayersChecked + : isSecondTeamPlayersChecked + + isAllPlayersChecked + ? setterTeamState((currentValues) => difference(currentValues, uniqValues)) + : setterTeamState((currentValues) => uniq([...currentValues, ...uniqValues])) } - const resetEvents = () => { - if (isEmpty(activeEvents)) return - setActiveEvents([]) + const allActionsToggle = () => { + isAllActionsChecked + ? setActiveEvents((currentValues) => difference(currentValues, uniqEvents)) + : setActiveEvents((currentValues) => uniq([...currentValues, ...uniqEvents])) } const applyFilters = () => { @@ -86,16 +122,20 @@ export const useFiltersPopup = () => { activeEvents, activeFirstTeamPlayers, activeSecondTeamPlayers, + allActionsToggle, + allPlayersToggle, applyFilters, close, countOfFilters, filters: activeFilters, + isAllActionsChecked, isEmptyFilters, + isFirstTeamPlayersChecked, isOpen, - resetEvents, - resetPlayers, + isSecondTeamPlayersChecked, toggle, toggleActiveEvents, toggleActivePlayers, + uniqEvents, } } diff --git a/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx b/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx index e5106500..4cac7015 100644 --- a/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx +++ b/src/features/MatchSidePlaylists/components/FiltersPopup/index.tsx @@ -1,8 +1,7 @@ -import uniq from 'lodash/uniq' import map from 'lodash/map' -import isEmpty from 'lodash/isEmpty' import includes from 'lodash/includes' -import filter from 'lodash/filter' + +import { isMobileDevice } from 'config/userAgent' import { T9n } from 'features/T9n' import { useMatchPageStore } from 'features/MatchPage/store' @@ -28,14 +27,18 @@ import { } from './styled' type TLabelProps = { + checked: boolean, player: PlayerPlaylistOption, } -const Label = ({ player }: TLabelProps) => { +const Label = ({ + checked, + player, +}: TLabelProps) => { const { num } = player return ( - + {num} @@ -48,20 +51,19 @@ export const FiltersPopup = () => { activeEvents, activeFirstTeamPlayers, activeSecondTeamPlayers, + allActionsToggle, + allPlayersToggle, applyFilters, closePopup, - events, + isAllActionsChecked, + isFirstTeamPlayersChecked, + isSecondTeamPlayersChecked, matchPlaylists, profile, - resetEvents, - resetPlayers, toggleActiveEvents, toggleActivePlayers, + uniqEvents, } = useMatchPageStore() - const currentEvents = filter(events, (event) => event.pl !== undefined - && event.t !== undefined) - - const uniqEvents = uniq(map(currentEvents, ({ l }) => l)) const team1Name = useName(profile!.team1) const team2Name = useName(profile!.team2) @@ -70,7 +72,10 @@ export const FiltersPopup = () => { - + @@ -80,8 +85,9 @@ export const FiltersPopup = () => { @@ -100,41 +106,49 @@ export const FiltersPopup = () => { - {map(matchPlaylists.players.team1, ((player) => ( - - )} - /> - - )))} + {map(matchPlaylists.players.team1, ((player) => { + const isCheckboxChecked = includes(activeFirstTeamPlayers, player.id) + return ( + + )} + /> + + ) + }))} - {map(matchPlaylists.players.team2, ((player) => ( - - )} - /> - - )))} + {map(matchPlaylists.players.team2, ((player) => { + const isCheckboxChecked = includes(activeSecondTeamPlayers, player.id) + return ( + + )} + /> + + ) + }))} diff --git a/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx b/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx index 0c96635d..3bcc1709 100644 --- a/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx +++ b/src/features/MatchSidePlaylists/components/FiltersPopup/styled.tsx @@ -8,6 +8,15 @@ import { NameStyled } from 'features/Name' import { isMobileDevice } from 'config/userAgent' import { BaseButton } from 'features/PopupComponents' +type CheckboxProps = { + checked: boolean, + isMainCheckbox?: boolean, +} + +type PlayerNumberProps = { + checked: boolean, +} + export const PopupContainer = styled.div` background: #333333; box-shadow: 0px 2px 40px rgba(0, 0, 0, 0.6); @@ -35,6 +44,8 @@ export const PopupInner = styled.div` max-height: 100%; height: 100%; overflow-y: auto; + padding-bottom: ${(isMobileDevice ? '20%' : '')}; + ${customScrollbar} ` @@ -81,8 +92,16 @@ export const HeaderText = styled.div` export const PartBlock = styled.div` flex: 1 0 auto; - border-bottom: 1px solid #505050; padding: 17px 22px 17px 22px; + + ${isMobileDevice + ? css` + border-bottom: 1px solid #505050;` + : css` + :not(:last-child) { + border-bottom: 1px solid #505050; + } + `}; ` export const ItemsContainer = styled.ul` @@ -92,7 +111,7 @@ export const ItemsContainer = styled.ul` ` export const MainCheckboxContainer = styled.div` - margin-bottom: 15px; + margin-bottom: ${(isMobileDevice ? '10px' : '15px')}; display: flex; ` @@ -107,14 +126,13 @@ export const ItemBlock = styled.div` flex: 0 0 33.33%;`} ` -export const Checkbox = styled(BaseCheckbox)` +export const Checkbox = styled(BaseCheckbox)` height: 28px; display: block; ${Label} { height: 100%; font-style: normal; - font-weight: 400; ${isMobileDevice ? css` @@ -123,18 +141,28 @@ export const Checkbox = styled(BaseCheckbox)` : css` font-size: 14px; line-height: 16px;`} - - ${({ checked }) => (checked - ? css`` + + ${({ checked, isMainCheckbox }) => (isMainCheckbox + ? css` + font-weight: 500;` : css` - color: rgba(255, 255, 255, 0.6);` + color: ${checked ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.3)'}; + font-weight: 400;` )} } ${CheckboxSvg} { + ${({ checked, isMainCheckbox }) => (isMainCheckbox + ? css` + width: ${(isMobileDevice ? '23px' : '20px')}; + height: ${(isMobileDevice ? '23px' : '20px')};` + : css` + fill: ${checked ? 'rgba(255, 255, 255, 0.6)' : 'rgba(255, 255, 255, 0.3)'}; + width: ${(isMobileDevice ? '18px' : '14px')}; + height: ${(isMobileDevice ? '18px' : '14px')}; + margin-left: ${(isMobileDevice ? '2px' : '3px')};` + )} margin-right: 8px; - width: 20px; - height: 20px; } ` @@ -157,8 +185,6 @@ export const ItemText = styled.div` width: 130px;`} ` -export const TeamBlock = styled.div`` - export const ButtonConatiner = styled.div` display: flex; align-items: center; @@ -171,7 +197,8 @@ export const ButtonConatiner = styled.div` bottom: 14px; left: 50%; transform: translate(-50%, 0);` - : css``} + : css` + border-top: 1px solid #505050;`} ` export const Button = styled.button` @@ -191,12 +218,12 @@ export const Button = styled.button` ${isMobileDevice ? css` - width: 301px;` + width: 190px;` : css` width: 167px;`} ` -export const PlayerNumber = styled.span` - color: rgba(255, 255, 255, 0.7); +export const PlayerNumber = styled.span` + color: ${({ checked }) => (checked ? '#fff' : 'rgba(255, 255, 255, 0.3)')}; margin-right: 5px; min-width: 14px; font-size: 11px; diff --git a/src/features/PopupComponents/BaseButton/index.tsx b/src/features/PopupComponents/BaseButton/index.tsx index 1b2d73d9..76684a1b 100644 --- a/src/features/PopupComponents/BaseButton/index.tsx +++ b/src/features/PopupComponents/BaseButton/index.tsx @@ -31,8 +31,8 @@ export const BaseButton = styled.button` ${isMobileDevice ? css` - width: 18px; - height: 18px; + width: 20px; + height: 20px; padding: 4px; position: absolute; top: -20px;