From 8fe00141552dca814a639eb8011bbe7641c094b6 Mon Sep 17 00:00:00 2001
From: Zoia <43918051+zizi62@users.noreply.github.com>
Date: Tue, 6 Apr 2021 07:37:52 +0300
Subject: [PATCH] Ott 995 color for players (#349)

* feat(ott-995): add color

* feat(ott-995): add color

* feat(ott-995): fix comments
---
 src/features/MatchPage/helpers/buildPlaylists.tsx      | 10 ++++++++--
 src/features/MatchPage/types.tsx                       | 10 ++++++++--
 .../MatchPopup/components/GroupedPlayersList/index.tsx |  4 ++++
 .../MatchPopup/components/PlayersList/index.tsx        |  4 +++-
 .../MatchPopup/components/PlayersList/styled.tsx       |  8 ++------
 .../MatchPopup/components/PlayersListDesktop/index.tsx |  6 ++++--
 .../MatchPopup/components/PlayersListMobile/index.tsx  |  3 ++-
 src/features/MatchSidePlaylists/index.tsx              |  4 ++--
 src/requests/getMatchPlaylists.tsx                     |  2 ++
 9 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/features/MatchPage/helpers/buildPlaylists.tsx b/src/features/MatchPage/helpers/buildPlaylists.tsx
index 26b1e4a2..fa84c9b4 100644
--- a/src/features/MatchPage/helpers/buildPlaylists.tsx
+++ b/src/features/MatchPage/helpers/buildPlaylists.tsx
@@ -48,8 +48,14 @@ export const buildPlaylists = (matchPlaylists: MatchPlaylists | null) => {
     lexics: matchPlaylists?.lexics,
     match: getMatchPlaylists(matchPlaylists),
     players: {
-      team1: getPlayerPlaylists(matchPlaylists?.players1),
-      team2: getPlayerPlaylists(matchPlaylists?.players2),
+      team1: {
+        color: matchPlaylists?.color1 || '222222',
+        list: getPlayerPlaylists(matchPlaylists?.players1),
+      },
+      team2: {
+        color: matchPlaylists?.color2 || 'FFFFFF',
+        list: getPlayerPlaylists(matchPlaylists?.players2),
+      },
     },
   }
   return playlists
diff --git a/src/features/MatchPage/types.tsx b/src/features/MatchPage/types.tsx
index cbea283d..70af1fda 100644
--- a/src/features/MatchPage/types.tsx
+++ b/src/features/MatchPage/types.tsx
@@ -46,7 +46,13 @@ export type Playlists = {
   lexics?: Lexics,
   match: MatchPlaylistOptions,
   players: {
-    team1: PlayerPlaylistOptions,
-    team2: PlayerPlaylistOptions,
+    team1: {
+      color: string,
+      list: PlayerPlaylistOptions,
+    },
+    team2: {
+      color: string,
+      list: PlayerPlaylistOptions,
+    },
   },
 }
diff --git a/src/features/MatchPopup/components/GroupedPlayersList/index.tsx b/src/features/MatchPopup/components/GroupedPlayersList/index.tsx
index 9e3438a5..a7b2308e 100644
--- a/src/features/MatchPopup/components/GroupedPlayersList/index.tsx
+++ b/src/features/MatchPopup/components/GroupedPlayersList/index.tsx
@@ -36,11 +36,13 @@ const useItemsLoadedState = (items: PlayerPlaylistOptions) => {
 type Props = {
   players: PlayerPlaylistOptions,
   team: Teams,
+  teamColor: string,
 }
 
 export const GroupedPlayersList = ({
   players,
   team,
+  teamColor,
 }: Props) => {
   const { allLoaded, onLoad } = useItemsLoadedState(players)
 
@@ -60,12 +62,14 @@ export const GroupedPlayersList = ({
       }
       <PlayersList
         team={team}
+        teamColor={teamColor}
         players={startingPlayers}
         allLoaded={allLoaded}
         onLoad={onLoad}
       />
       <PlayersList
         team={team}
+        teamColor={teamColor}
         players={benchedPlayers}
         allLoaded={allLoaded}
         onLoad={onLoad}
diff --git a/src/features/MatchPopup/components/PlayersList/index.tsx b/src/features/MatchPopup/components/PlayersList/index.tsx
index 2b121eac..348b2b85 100644
--- a/src/features/MatchPopup/components/PlayersList/index.tsx
+++ b/src/features/MatchPopup/components/PlayersList/index.tsx
@@ -24,6 +24,7 @@ type Props = {
   onLoad: (id: number) => void,
   players: PlayerPlaylistOptions,
   team: Teams,
+  teamColor: string,
 }
 
 export const PlayersList = ({
@@ -31,6 +32,7 @@ export const PlayersList = ({
   onLoad,
   players,
   team,
+  teamColor,
 }: Props) => {
   const { handlePlayerClick, match } = useMatchPopupStore()
 
@@ -47,7 +49,7 @@ export const PlayersList = ({
                   id={player.id}
                   sportType={match.sportType}
                   profileType={ProfileTypes.PLAYERS}
-                  team={team}
+                  teamColor={teamColor}
                   onLoad={() => onLoad(player.id)}
                 />
                 {player.gk && (
diff --git a/src/features/MatchPopup/components/PlayersList/styled.tsx b/src/features/MatchPopup/components/PlayersList/styled.tsx
index 41f7285b..f23338b3 100644
--- a/src/features/MatchPopup/components/PlayersList/styled.tsx
+++ b/src/features/MatchPopup/components/PlayersList/styled.tsx
@@ -72,7 +72,7 @@ export const Button = styled.button`
 `
 
 type LogoProps = {
-  team: Teams,
+  teamColor: string,
 }
 
 export const Logo = styled(ProfileLogo)<LogoProps>`
@@ -80,11 +80,7 @@ export const Logo = styled(ProfileLogo)<LogoProps>`
   height: 100%;
   object-fit: contain;
   border-radius: 50%;
-  background-color: ${({ team }) => (
-    team === Teams.TEAM1
-      ? '#222222'
-      : '#FFFFFF'
-  )};
+  background-color: ${({ teamColor }) => `#${teamColor}`};
 `
 
 export const NameWrapper = styled.span`
diff --git a/src/features/MatchPopup/components/PlayersListDesktop/index.tsx b/src/features/MatchPopup/components/PlayersListDesktop/index.tsx
index a69c2291..0bff89cc 100644
--- a/src/features/MatchPopup/components/PlayersListDesktop/index.tsx
+++ b/src/features/MatchPopup/components/PlayersListDesktop/index.tsx
@@ -43,11 +43,13 @@ export const PlayersListDesktop = () => {
       <ListsWrapper>
         <GroupedPlayersList
           team={Teams.TEAM1}
-          players={matchPlaylists.players.team1}
+          teamColor={matchPlaylists.players.team1.color}
+          players={matchPlaylists.players.team1.list}
         />
         <GroupedPlayersList
           team={Teams.TEAM2}
-          players={matchPlaylists.players.team2}
+          teamColor={matchPlaylists.players.team2.color}
+          players={matchPlaylists.players.team2.list}
         />
       </ListsWrapper>
     </Wrapper>
diff --git a/src/features/MatchPopup/components/PlayersListMobile/index.tsx b/src/features/MatchPopup/components/PlayersListMobile/index.tsx
index 4ac02382..c9b92404 100644
--- a/src/features/MatchPopup/components/PlayersListMobile/index.tsx
+++ b/src/features/MatchPopup/components/PlayersListMobile/index.tsx
@@ -47,7 +47,8 @@ export const PlayersListMobile = () => {
       </Tabs>
       <GroupedPlayersList
         team={selectedTeam}
-        players={players}
+        players={players.list}
+        teamColor={players.color}
       />
     </Wrapper>
   )
diff --git a/src/features/MatchSidePlaylists/index.tsx b/src/features/MatchSidePlaylists/index.tsx
index cda34d7a..172160f0 100644
--- a/src/features/MatchSidePlaylists/index.tsx
+++ b/src/features/MatchSidePlaylists/index.tsx
@@ -69,13 +69,13 @@ export const MatchSidePlaylists = ({
             <List>
               <PlayersPlaylists
                 teamName={profile?.team1}
-                players={playlists.players.team1}
+                players={playlists.players.team1.list}
                 selectedMathPlaylist={selectedPlaylist}
                 onSelect={onSelect}
               />
               <PlayersPlaylists
                 teamName={profile?.team2}
-                players={playlists.players.team2}
+                players={playlists.players.team2.list}
                 selectedMathPlaylist={selectedPlaylist}
                 onSelect={onSelect}
               />
diff --git a/src/requests/getMatchPlaylists.tsx b/src/requests/getMatchPlaylists.tsx
index 45a62f24..48df798d 100644
--- a/src/requests/getMatchPlaylists.tsx
+++ b/src/requests/getMatchPlaylists.tsx
@@ -56,6 +56,8 @@ export type Lexics = {
 
 export type MatchPlaylists = {
   ball_in_play: PlaylistWithDuration,
+  color1?: string,
+  color2?: string,
   full_game: PlaylistWithDuration,
   goals: PlaylistWithDuration,
   highlights: PlaylistWithDuration,