From 00d14c20bb4225d559348ea8d6bb10884eef1f73 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Thu, 8 Jun 2023 10:56:07 +0200
Subject: [PATCH] feat(ui): remove city from the list and show only in player

---
 .../Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js    | 6 +++++-
 frontend/app/components/shared/SessionItem/SessionItem.tsx  | 3 +--
 frontend/app/components/ui/CountryFlag/CountryFlag.js       | 3 +--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
index 0da9620f8..ca49bf47e 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
@@ -21,6 +21,7 @@ function UserCard({ className, request, session, width, height, similarSessions,
         userDevice,
         userCountry,
         userCity,
+        userState,
         userBrowserVersion,
         userOs,
         userOsVersion,
@@ -71,7 +72,10 @@ function UserCard({ className, request, session, width, height, similarSessions,
                         </span>
                         <span className="mx-1 font-bold text-xl">&#183;</span>
                         {userCity && (
-                            <span className="mr-2">{userCity},</span>
+                            <span className="mr-1">{userCity},</span>
+                        )}
+                        {userState && (
+                            <span className="mr-1">{userState},</span>
                         )}
                         <span>{countries[userCountry]}</span>
                         <span className="mx-1 font-bold text-xl">&#183;</span>
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 0aecebfa2..6f23776c7 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -93,7 +93,6 @@ function SessionItem(props: RouteComponentProps & Props) {
     userAnonymousId,
     userDisplayName,
     userCountry,
-    userCity,
     startedAt,
     duration,
     eventsCount,
@@ -219,7 +218,7 @@ function SessionItem(props: RouteComponentProps & Props) {
             </div>
             <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
               <div style={{ height: '21px' }}>
-                <CountryFlag city={userCity} country={userCountry} style={{ paddingTop: '4px' }} label />
+                <CountryFlag country={userCountry} style={{ paddingTop: '4px' }} label />
               </div>
               <div className="color-gray-medium flex items-center py-1">
                 <span className="capitalize" style={{ maxWidth: '70px' }}>
diff --git a/frontend/app/components/ui/CountryFlag/CountryFlag.js b/frontend/app/components/ui/CountryFlag/CountryFlag.js
index 0af4419f6..4e4ba4cba 100644
--- a/frontend/app/components/ui/CountryFlag/CountryFlag.js
+++ b/frontend/app/components/ui/CountryFlag/CountryFlag.js
@@ -4,7 +4,7 @@ import { countries } from 'App/constants';
 import { Icon } from 'UI';
 import stl from './countryFlag.module.css';
 
-const CountryFlag = ({ city = '', country = '', className = '', style = {}, label = false, width = 22, height = 15}) => {
+const CountryFlag = ({ country = '', className = '', style = {}, label = false, width = 22, height = 15}) => {
 	const knownCountry = !!country && country !== 'UN';
   	const countryFlag = knownCountry ? country.toLowerCase() : '';
   	const countryName = knownCountry ? countries[ country ] : 'Unknown Country';
@@ -19,7 +19,6 @@ const CountryFlag = ({ city = '', country = '', className = '', style = {}, labe
 						<div className="ml-2 leading-none" style={{ whiteSpace: 'nowrap'}}>Unknown Country</div>
 					</div>
 			)}
-			{ city && <div className={ cn(stl.label, 'ml-2') }>{ city }, </div> }
 			{ knownCountry && label && <div className={ cn(stl.label, 'ml-1') }>{ countryName }</div> }
 		</div>
 	);