feat(in-235): match player filter

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,
   }

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<Number>,
 }
 
-export const useFiltersPopup = () => {
+type Props = {
+  events: Events,
+  matchPlaylists: Playlists,
+}
+
+export const useFiltersPopup = ({
+  events,
+  matchPlaylists,
+}: Props) => {
   const [isOpen, setIsOpen] = useState(false)
   const [activeEvents, setActiveEvents] = useState<Array<Number>>([])
   const [activeFirstTeamPlayers, setActiveFirstTeamPlayers] = useState<Array<Number>>([])
   const [activeSecondTeamPlayers, setActiveSecondTeamPlayers] = useState<Array<Number>>([])
   const [activeFilters, setActiveFilters] = useState<TFilters>({ 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,
   }
 }

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 (
     <ItemText>
-      <PlayerNumber>
+      <PlayerNumber checked={checked}>
         {num}
       </PlayerNumber>
       <Name nameObj={player} />
@@ -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 = () => {
     <PopupContainer>
       <PopupInner>
         <CloseButtonContainer>
-          <CloseButton onClick={closePopup} />
+          <CloseButton
+            size={isMobileDevice ? 8 : 16}
+            onClick={closePopup}
+          />
         </CloseButtonContainer>
         <PopupHeader>
           <HeaderText>
@@ -80,8 +85,9 @@ export const FiltersPopup = () => {
         <PartBlock>
           <MainCheckboxContainer>
             <Checkbox
-              onChange={resetEvents}
-              checked={isEmpty(activeEvents)}
+              isMainCheckbox
+              onChange={allActionsToggle}
+              checked={isAllActionsChecked}
               labelLexic='all_actions'
             />
           </MainCheckboxContainer>
@@ -100,41 +106,49 @@ export const FiltersPopup = () => {
         <PartBlock>
           <MainCheckboxContainer>
             <Checkbox
-              checked={isEmpty(activeFirstTeamPlayers)}
+              isMainCheckbox
+              checked={isFirstTeamPlayersChecked}
               label={team1Name}
-              onChange={resetPlayers('team1')}
+              onChange={allPlayersToggle('team1')}
             />
           </MainCheckboxContainer>
           <ItemsContainer>
-            {map(matchPlaylists.players.team1, ((player) => (
-              <ItemBlock key={player.id}>
-                <Checkbox
-                  onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
-                  checked={includes(activeFirstTeamPlayers, player.id)}
-                  label={(<Label player={player} />)}
-                />
-              </ItemBlock>
-            )))}
+            {map(matchPlaylists.players.team1, ((player) => {
+              const isCheckboxChecked = includes(activeFirstTeamPlayers, player.id)
+              return (
+                <ItemBlock key={player.id}>
+                  <Checkbox
+                    onChange={toggleActivePlayers({ id: player.id, team: 'team1' })}
+                    checked={isCheckboxChecked}
+                    label={(<Label checked={isCheckboxChecked} player={player} />)}
+                  />
+                </ItemBlock>
+              )
+            }))}
           </ItemsContainer>
         </PartBlock>
         <PartBlock>
           <MainCheckboxContainer>
             <Checkbox
-              checked={isEmpty(activeSecondTeamPlayers)}
+              isMainCheckbox
+              checked={isSecondTeamPlayersChecked}
               label={team2Name}
-              onChange={resetPlayers('team2')}
+              onChange={allPlayersToggle('team2')}
             />
           </MainCheckboxContainer>
           <ItemsContainer>
-            {map(matchPlaylists.players.team2, ((player) => (
-              <ItemBlock key={player.id}>
-                <Checkbox
-                  onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
-                  checked={includes(activeSecondTeamPlayers, player.id)}
-                  label={(<Label player={player} />)}
-                />
-              </ItemBlock>
-            )))}
+            {map(matchPlaylists.players.team2, ((player) => {
+              const isCheckboxChecked = includes(activeSecondTeamPlayers, player.id)
+              return (
+                <ItemBlock key={player.id}>
+                  <Checkbox
+                    onChange={toggleActivePlayers({ id: player.id, team: 'team2' })}
+                    checked={isCheckboxChecked}
+                    label={(<Label checked={isCheckboxChecked} player={player} />)}
+                  />
+                </ItemBlock>
+              )
+            }))}
           </ItemsContainer>
         </PartBlock>
       </PopupInner>

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)<CheckboxProps>`
   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<PlayerNumberProps>`
+  color: ${({ checked }) => (checked ? '#fff' : 'rgba(255, 255, 255,  0.3)')};
   margin-right: 5px;
   min-width: 14px;
   font-size: 11px;

src/features/PopupComponents/BaseButton/index.tsx

@@ -31,8 +31,8 @@ export const BaseButton = styled.button<Props>`
 
   ${isMobileDevice
     ? css`
-      width: 18px;
-      height: 18px;
+      width: 20px;
+      height: 20px;
       padding: 4px;
       position: absolute;
       top: -20px;