From 61644f73af85d5ca24beae75dca56f644f6b02d3 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 13 Jun 2023 16:09:21 +0200
Subject: [PATCH] change(ui): city state in more details, and list

---
 .../EventsBlock/UserCard/UserCard.js          |  7 ++-
 .../SessionInfoItem/SessionInfoItem.tsx       |  2 +-
 .../shared/SessionItem/SessionItem.tsx        |  6 ++-
 .../components/ui/CountryFlag/CountryFlag.js  | 54 ++++++++++++-------
 4 files changed, 47 insertions(+), 22 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 ca49bf47e..020272303 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
@@ -89,7 +89,12 @@ function UserCard({ className, request, session, width, height, similarSessions,
                                     <SessionInfoItem
                                         comp={<CountryFlag country={userCountry} height={11} />}
                                         label={countries[userCountry]}
-                                        value={<span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt)}</span>}
+                                        value={<span style={{ whiteSpace: 'nowrap' }}>{
+                                            <>
+                                            {userCity && <span className="mr-1">{userCity},</span>}
+                                            {userState && <span className="mr-1">{userState}</span>}
+                                            </>
+                                        }</span>}
                                     />
                                     <SessionInfoItem icon={browserIcon(userBrowser)} label={userBrowser} value={`v${userBrowserVersion}`} />
                                     <SessionInfoItem icon={osIcon(userOs)} label={userOs} value={userOsVersion} />
diff --git a/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx b/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
index b29730215..a71eb7c65 100644
--- a/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
+++ b/frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
@@ -18,7 +18,7 @@ export default function SessionInfoItem(props: Props) {
                 { comp && comp }
             </div>
             <div className="px-2 capitalize" style={{ minWidth: '160px' }}>{label}</div>
-            <div className="color-gray-medium px-2" style={{ minWidth: '130px' }}>{value}</div>
+            <div className="color-gray-medium px-2" style={{ minWidth: '160px' }}>{value}</div>
         </div>
     )
 }
diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index 6f23776c7..a842be074 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -35,6 +35,8 @@ interface Props {
     userAnonymousId: string;
     userDisplayName: string;
     userCountry: string;
+    userCity: string;
+    usetState: string;
     startedAt: number;
     duration: Duration;
     eventsCount: number;
@@ -93,6 +95,8 @@ function SessionItem(props: RouteComponentProps & Props) {
     userAnonymousId,
     userDisplayName,
     userCountry,
+    userCity,
+    userState,
     startedAt,
     duration,
     eventsCount,
@@ -218,7 +222,7 @@ function SessionItem(props: RouteComponentProps & Props) {
             </div>
             <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
               <div style={{ height: '21px' }}>
-                <CountryFlag country={userCountry} style={{ paddingTop: '4px' }} label />
+                <CountryFlag userCity={userCity} userState={userState} 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 4e4ba4cba..f22a37e27 100644
--- a/frontend/app/components/ui/CountryFlag/CountryFlag.js
+++ b/frontend/app/components/ui/CountryFlag/CountryFlag.js
@@ -4,26 +4,42 @@ import { countries } from 'App/constants';
 import { Icon } from 'UI';
 import stl from './countryFlag.module.css';
 
-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';
+const CountryFlag = ({
+  userCity = '',
+  userState = '',
+  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';
 
-	return (
-		<div className="flex items-center" style={style}>
-			{knownCountry
-				?  <div className={ cn(`flag flag-${ countryFlag }`, className) } style={{ width: `${width}px`, height: `${height}px` }} />
-				: (
-					<div className="flex items-center w-full">
-						<Icon name="flag-na" size="22" className="" />
-						<div className="ml-2 leading-none" style={{ whiteSpace: 'nowrap'}}>Unknown Country</div>
-					</div>
-			)}
-			{ knownCountry && label && <div className={ cn(stl.label, 'ml-1') }>{ countryName }</div> }
-		</div>
-	);
-}
+  return (
+    <div className="flex items-center" style={style}>
+      {knownCountry ? (
+        <div
+          className={cn(`flag flag-${countryFlag}`, className)}
+          style={{ width: `${width}px`, height: `${height}px` }}
+        />
+      ) : (
+        <div className="flex items-center w-full">
+          <Icon name="flag-na" size="22" className="" />
+          <div className="ml-2 leading-none" style={{ whiteSpace: 'nowrap' }}>
+            Unknown Country
+          </div>
+        </div>
+      )}
+      {userCity && <span className="mr-1">{userCity},</span>}
+      {userState && <span className="mr-1">{userState},</span>}
+      {knownCountry && label && <div className={cn(stl.label, 'ml-1')}>{countryName}</div>}
+    </div>
+  );
+};
 
-CountryFlag.displayName = "CountryFlag";
+CountryFlag.displayName = 'CountryFlag';
 
 export default React.memo(CountryFlag);