From 0222a2b05f5df7fa27dbd491f460c2eed5c749fa Mon Sep 17 00:00:00 2001 From: sylenien Date: Fri, 26 Aug 2022 12:38:05 +0200 Subject: [PATCH] change(ui): add datetime tooltip --- .../Session_/EventsBlock/UserCard/UserCard.js | 18 ++++++++++-------- .../shared/SessionItem/SessionItem.tsx | 12 +++++++++--- frontend/app/components/ui/Avatar/Avatar.js | 2 +- .../components/ui/CountryFlag/CountryFlag.js | 6 +++--- frontend/app/date.ts | 9 ++++++++- frontend/app/mstore/types/sessionSettings.ts | 3 +-- 6 files changed, 32 insertions(+), 18 deletions(-) diff --git a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js index a7faa7625..480cd4e67 100644 --- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js +++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js @@ -5,11 +5,10 @@ import { countries } from 'App/constants'; import { useStore } from 'App/mstore'; import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames'; import { formatTimeOrDate } from 'App/date'; -import { Avatar, TextEllipsis, SlideModal, Popup, CountryFlag, Icon } from 'UI'; +import { Avatar, TextEllipsis, CountryFlag, Icon } from 'UI'; import cn from 'classnames'; import { withRequest } from 'HOCs'; import SessionInfoItem from '../../SessionInfoItem'; -import SessionList from '../Metadata/SessionList'; import { Tooltip } from 'react-tippy'; import { useModal } from 'App/components/Modal'; import UserSessionsModal from 'Shared/UserSessionsModal'; @@ -18,7 +17,6 @@ function UserCard({ className, request, session, width, height, similarSessions, const { settingsStore } = useStore(); const { timezone } = settingsStore.sessionSettings; - const [showUserSessions, setShowUserSessions] = useState(false); const { userBrowser, userDevice, @@ -36,10 +34,6 @@ function UserCard({ className, request, session, width, height, similarSessions, } = session; const hasUserDetails = !!userId || !!userAnonymousId; - const showSimilarSessions = () => { - setShowUserSessions(true); - request({ key: !userId ? 'USERANONYMOUSID' : 'USERID', value: userId || userAnonymousId }); - }; const getDimension = (width, height) => { return width && height ? ( @@ -66,7 +60,15 @@ function UserCard({ className, request, session, width, height, similarSessions,
- {formatTimeOrDate(startedAt, timezone)} + + + {formatTimeOrDate(startedAt, timezone)} + + + · {countries[userCountry]} · diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index 67e6b772b..7b66a6bd9 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -12,6 +12,7 @@ import PlayLink from './PlayLink'; import ErrorBars from './ErrorBars'; import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes'; import { capitalize } from 'App/utils'; +import { Tooltip } from 'react-tippy'; const ASSIST_ROUTE = assistRoute(); const ASSIST_LIVE_SESSION = liveSession(); @@ -58,7 +59,6 @@ interface Props { function SessionItem(props: RouteComponentProps & Props) { const { settingsStore } = useStore(); const { timezone } = settingsStore.sessionSettings; - const [isIframe, setIsIframe] = React.useState(false); const { session, @@ -132,7 +132,13 @@ function SessionItem(props: RouteComponentProps & Props) { )}
- + {/* @ts-ignore */} + + +
{!isAssist && ( @@ -203,4 +209,4 @@ function SessionItem(props: RouteComponentProps & Props) { ); } -export default withRouter(observer(SessionItem)); +export default withRouter(observer(SessionItem)); diff --git a/frontend/app/components/ui/Avatar/Avatar.js b/frontend/app/components/ui/Avatar/Avatar.js index be4efdbb9..71327fafa 100644 --- a/frontend/app/components/ui/Avatar/Avatar.js +++ b/frontend/app/components/ui/Avatar/Avatar.js @@ -4,7 +4,7 @@ import { avatarIconName } from 'App/iconNames'; import stl from './avatar.module.css'; import { Icon, Popup } from 'UI'; -const Avatar = ({ isActive = false, isAssist = false, className, width = '38px', height = '38px', iconSize = 26, seed }) => { +const Avatar = ({ isActive = false, isAssist = false, width = '38px', height = '38px', iconSize = 26, seed }) => { var iconName = avatarIconName(seed); return ( diff --git a/frontend/app/components/ui/CountryFlag/CountryFlag.js b/frontend/app/components/ui/CountryFlag/CountryFlag.js index 632775859..09192f070 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 = React.memo(({ country, className, style = {}, label = false }) => { +const CountryFlag = ({ country = '', className = '', style = {}, label = false }) => { const knownCountry = !!country && country !== 'UN'; const countryFlag = knownCountry ? country.toLowerCase() : ''; const countryName = knownCountry ? countries[ country ] : 'Unknown Country'; @@ -22,8 +22,8 @@ const CountryFlag = React.memo(({ country, className, style = {}, label = false { knownCountry && label &&
{ countryName }
}
); -}) +} CountryFlag.displayName = "CountryFlag"; -export default CountryFlag; +export default React.memo(CountryFlag); diff --git a/frontend/app/date.ts b/frontend/app/date.ts index ef7443625..59704ad2d 100644 --- a/frontend/app/date.ts +++ b/frontend/app/date.ts @@ -77,12 +77,19 @@ export function formatDateTimeDefault(timestamp: number): string { * @param {Object} timezone fixed offset like UTC+6 * @returns {String} formatted date (or time if its today) */ -export function formatTimeOrDate(timestamp: number, timezone: Timezone): string { +export function formatTimeOrDate(timestamp: number, timezone: Timezone, isFull = false): string { var date = DateTime.fromMillis(timestamp) if (timezone) { if (timezone.value === 'UTC') date = date.toUTC(); date = date.setZone(timezone.value) } + + if (isFull) { + const strHead = date.toFormat('LLL dd, yyyy, ') + const strTail = date.toFormat('hh:mma').toLowerCase() + return strHead + strTail; + } + if (isToday(date)) { return date.toFormat('hh:mma').toLowerCase() } diff --git a/frontend/app/mstore/types/sessionSettings.ts b/frontend/app/mstore/types/sessionSettings.ts index 493edd523..bcb57a9f2 100644 --- a/frontend/app/mstore/types/sessionSettings.ts +++ b/frontend/app/mstore/types/sessionSettings.ts @@ -19,10 +19,9 @@ export const generateGMTZones = (): Timezone[] => { for (let i = 0; i < combinedArray.length; i++) { let symbol = i < 11 ? '-' : '+'; let isUTC = i === 11; - let prefix = isUTC ? 'UTC / GMT' : 'GMT'; let value = String(combinedArray[i]).padStart(2, '0'); - let tz = `${prefix} ${symbol}${String(combinedArray[i]).padStart(2, '0')}:00`; + let tz = `UTC ${symbol}${String(combinedArray[i]).padStart(2, '0')}:00`; let dropdownValue = `UTC${symbol}${value}`; timezones.push({ label: tz, value: isUTC ? 'UTC' : dropdownValue });