fix(837): match profile micro bug fixes (#306)

src/features/MatchPage/helpers/buildPlaylists.tsx

@@ -36,8 +36,6 @@ const getMatchPlaylists = (matchPlaylists: MatchPlaylists | null): MatchPlaylist
 const getPlayerPlaylists = (players?: Players): PlayerPlaylistOptions => (
   map(players, (player) => ({
     ...player,
-    name_eng: `${player.num} ${player.name_eng}`,
-    name_rus: `${player.num} ${player.name_rus}`,
     type: PlaylistTypes.PLAYER,
   }))
 )

src/features/MatchPage/types.tsx

@@ -19,6 +19,7 @@ export type PlayerPlaylistOption = {
   id: number,
   name_eng: string,
   name_rus: string,
+  num: string,
   start?: boolean,
   type: PlaylistTypes.PLAYER,
 }

src/features/MatchPopup/components/PlayersList/index.tsx

@@ -3,6 +3,7 @@ import map from 'lodash/map'
 import { ProfileTypes } from 'config'
 
 import { T9n } from 'features/T9n'
+import { Name } from 'features/Name'
 import { PlayerPlaylistOptions } from 'features/MatchPage/types'
 import { useMatchPopupStore } from 'features/MatchPopup/store'
 
@@ -11,7 +12,8 @@ import {
   List,
   Item,
   Logo,
-  PlayerName,
+  NameWrapper,
+  ShirtNumber,
   Button,
   PlayerPhoto,
   PlayerGk,
@@ -54,7 +56,10 @@ export const PlayersList = ({
                   </PlayerGk>
                 )}
               </PlayerPhoto>
-              <PlayerName nameObj={player} />
+              <NameWrapper>
+                <ShirtNumber>{player.num}</ShirtNumber>
+                <Name nameObj={player} />
+              </NameWrapper>
             </Button>
           </Item>
         ))

src/features/MatchPopup/components/PlayersList/styled.tsx

@@ -2,7 +2,6 @@ import styled from 'styled-components/macro'
 
 import { devices } from 'config'
 
-import { Name } from 'features/Name'
 import { ProfileLogo } from 'features/ProfileLogo'
 
 import { Teams } from '../../types'
@@ -65,7 +64,6 @@ export const Button = styled.button`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: space-between;
 
   @media ${devices.mobile} {
     flex-direction: row;
@@ -87,14 +85,12 @@ export const Logo = styled(ProfileLogo)<LogoProps>`
   )};
 `
 
-export const PlayerName = styled(Name)`
-  width: 100%;
-  font-weight: bold;
-  font-size: 10px;
+export const NameWrapper = styled.span`
+  color: #fff;
   line-height: 10px;
+  font-size: 10px;
   text-align: center;
   letter-spacing: 0.02em;
-  color: #fff;
 
   @media ${devices.mobile} {
     text-align: start;
@@ -104,6 +100,11 @@ export const PlayerName = styled(Name)`
   }
 `
 
+export const ShirtNumber = styled.span`
+  font-weight: bold;
+  margin-right: 6px;
+`
+
 export const PlayerPhoto = styled.div`
   position: relative;
   width: 65px;

src/features/MatchSidePlaylists/components/DropdownSection/index.tsx

@@ -14,22 +14,23 @@ import {
 
 type Props = {
   children: ReactNode,
+  isOpen?: boolean,
   itemsCount: number,
   title?: string | number,
 }
 
-export const DropdownSection = (props: Props) => {
+export const DropdownSection = ({
+  children,
+  isOpen: isOpenInitial,
+  itemsCount,
+  title,
+}: Props) => {
   const {
     isOpen,
     toggle,
-  } = useToggle()
+  } = useToggle(isOpenInitial)
 
-  const {
-    children,
-    itemsCount,
-    title,
-  } = props
-  if (!title) return null
+  if (!title || itemsCount === 0) return null
 
   return (
     <Wrapper>

src/features/MatchSidePlaylists/components/DropdownSection/styled.tsx

@@ -8,12 +8,6 @@ export const Wrapper = styled.div`
   margin-bottom: 10px;
 `
 
-export const Item = styled.li`
-  margin-top: 15px;
-  width: 100%;
-  height: 50px;
-`
-
 export const SectionWrapper = styled.div<Props>`
   overflow: hidden;
   transition: .3s;

src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx

@@ -1,19 +1,25 @@
+import { useRef, useEffect } from 'react'
+
 import styled from 'styled-components/macro'
 
 import map from 'lodash/map'
+import find from 'lodash/find'
 
 import type { Team } from 'requests'
-import type { PlaylistOption } from 'features/MatchPage/types'
+import type {
+  PlayerPlaylistOptions,
+  PlayerPlaylistOption,
+  PlaylistOption,
+} from 'features/MatchPage/types'
 
 import { Name } from 'features/Name'
 import { isEqual } from 'features/MatchSidePlaylists'
 
 import { PlayButton } from '../PlayButton'
-import { Item } from '../DropdownSection/styled'
 
 type Props = {
-  onSelect: (selectedMathPlaylist: PlaylistOption) => void,
-  players: Array<PlaylistOption>,
+  onSelect: (selectedMathPlaylist: PlayerPlaylistOption) => void,
+  players: PlayerPlaylistOptions,
   selectedMathPlaylist?: PlaylistOption,
   teamName?: Team,
 }
@@ -24,9 +30,12 @@ const Wrapper = styled.div`
 
 const List = styled.ul``
 
-const PlayersItem = styled(Item)`
-    margin-top: 10px
+const PlayersItem = styled.li`
+  width: 100%;
+  height: 50px;
+  margin-top: 10px;
 `
+
 const Title = styled.span`
   font-weight: 300;
   font-size: 16px;
@@ -35,13 +44,28 @@ const Title = styled.span`
   color: #ffffff;
 `
 
-export const PlayersPlaylists = (props: Props) => {
-  const {
-    onSelect,
-    players,
-    selectedMathPlaylist,
-    teamName,
-  } = props
+const ShirtNumber = styled.span`
+  font-weight: bold;
+  margin-right: 6px;
+`
+
+export const PlayersPlaylists = ({
+  onSelect,
+  players,
+  selectedMathPlaylist,
+  teamName,
+}: Props) => {
+  const listRef = useRef<HTMLUListElement>(null)
+
+  useEffect(() => {
+    const found = find(
+      players,
+      (player) => isEqual(player, selectedMathPlaylist),
+    )
+    if (found) {
+      listRef.current?.scrollIntoView()
+    }
+  }, [players, selectedMathPlaylist])
 
   if (!selectedMathPlaylist || !teamName) return null
 
@@ -50,7 +74,7 @@ export const PlayersPlaylists = (props: Props) => {
       <Title>
         <Name nameObj={teamName} />
       </Title>
-      <List>
+      <List ref={listRef}>
         {
           map(players, (player) => (
             <PlayersItem key={player.id}>
@@ -58,6 +82,7 @@ export const PlayersPlaylists = (props: Props) => {
                 onClick={() => onSelect(player)}
                 active={isEqual(player, selectedMathPlaylist)}
               >
+                <ShirtNumber>{player.num}</ShirtNumber>
                 <Name nameObj={player} />
               </PlayButton>
             </PlayersItem>

src/features/MatchSidePlaylists/index.tsx

@@ -1,5 +1,6 @@
 import size from 'lodash/size'
 
+import { PlaylistTypes } from 'features/MatchPage/types'
 import type { PlaylistOption, Playlists } from 'features/MatchPage/types'
 import type { MatchInfo } from 'requests'
 
@@ -54,6 +55,7 @@ export const MatchSidePlaylists = ({
             />
           </DropdownSection>
           <DropdownSection
+            isOpen={selectedPlaylist?.type === PlaylistTypes.PLAYER}
             itemsCount={playersCount}
             title={playlists.lexics?.players}
           >