jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): city state in more details, and list

Browse source
This commit is contained in:
Shekar Siri 2023-06-13 16:09:21 +02:00
parent ad1abfb7ff
commit 61644f73af
4 changed files with 47 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/UserCard/UserCard.js
View file

@ -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} />

2
frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx
View file

@ -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>
)
}

6
frontend/app/components/shared/SessionItem/SessionItem.tsx
View file

@ -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' }}>

54
frontend/app/components/ui/CountryFlag/CountryFlag.js
View file

@ -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);