From 09cde2e5ece91f19dbbd6314237f7299b1ef213f Mon Sep 17 00:00:00 2001 From: sylenien Date: Tue, 28 Jun 2022 12:39:25 +0200 Subject: [PATCH] fix(ui): fix for timezone storage and format --- .../BugFinder/SessionList/SessionList.js | 5 ++--- .../Session_/EventsBlock/UserCard/UserCard.js | 8 +++++-- .../shared/SessionItem/SessionItem.tsx | 6 +++--- frontend/app/date.ts | 10 +++++---- frontend/app/mstore/types/sessionSettings.ts | 21 ++++++++++++++++--- frontend/tsconfig.json | 1 + 6 files changed, 36 insertions(+), 15 deletions(-) diff --git a/frontend/app/components/BugFinder/SessionList/SessionList.js b/frontend/app/components/BugFinder/SessionList/SessionList.js index ea5532211..3f6d0b004 100644 --- a/frontend/app/components/BugFinder/SessionList/SessionList.js +++ b/frontend/app/components/BugFinder/SessionList/SessionList.js @@ -113,9 +113,8 @@ export default class SessionList extends React.PureComponent { { list.map(session => ( - <> +
- + ))}
diff --git a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js index e2c445292..e663be9cc 100644 --- a/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js +++ b/frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js @@ -2,8 +2,9 @@ import React, { useState } from 'react' import { connect } from 'react-redux' import { List } from 'immutable' import { countries } from 'App/constants'; +import { useStore } from 'App/mstore'; import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames'; -import { formatTimeOrDate, formatDateTimeDefault } from 'App/date'; +import { formatTimeOrDate } from 'App/date'; import { Avatar, TextEllipsis, SlideModal, Popup, CountryFlag, Icon } from 'UI' import cn from 'classnames' import { withRequest } from 'HOCs' @@ -20,6 +21,9 @@ function UserCard({ similarSessions, loading, }) { + const { settingsStore } = useStore(); + const { timezone } = settingsStore.sessionSettings; + const [showUserSessions, setShowUserSessions] = useState(false) const { userBrowser, @@ -66,7 +70,7 @@ function UserCard({
- {formatDateTimeDefault(startedAt)} + {formatTimeOrDate(startedAt, timezone)} · {countries[userCountry]} · diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index 7faa3096b..ae7c7b56a 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -42,9 +42,9 @@ interface Props { userDeviceType: string; userUuid: string; userNumericHash: number; - live: boolean + live: boolean; metadata: Record; - userSessionsCount: number + userSessionsCount: number; issueTypes: []; active: boolean; }, @@ -57,7 +57,7 @@ interface Props { live?: boolean; } -function SessionItem(props: RouteComponentProps) { +function SessionItem(props: RouteComponentProps & Props) { const { settingsStore } = useStore(); const { timezone } = settingsStore.sessionSettings; diff --git a/frontend/app/date.ts b/frontend/app/date.ts index e32704db1..dd87f1783 100644 --- a/frontend/app/date.ts +++ b/frontend/app/date.ts @@ -1,6 +1,8 @@ // @flow import { DateTime, Duration } from 'luxon'; // TODO +import { toJS } from 'mobx'; +import { Timezone } from 'MOBX/types/sessionSettings'; export const durationFormatted = (duration: Duration):string => { if (duration.as('minutes') < 1) { // show in seconds @@ -72,14 +74,14 @@ export function formatDateTimeDefault(timestamp: number): string { /** * Formats timestamps into readable date * @param {Number} timestamp - * @param {String} timezone fixed offset like UTC+6 + * @param {Object} timezone fixed offset like UTC+6 * @returns {String} formatted date (or time if its today) */ -export function formatTimeOrDate(timestamp: number, timezone: string): string { +export function formatTimeOrDate(timestamp: number, timezone: Timezone): string { var date = DateTime.fromMillis(timestamp) if (timezone) { - if (timezone === 'UTC') date = date.toUTC(); - date = date.setZone(timezone) + if (timezone.value === 'UTC') date = date.toUTC(); + date = date.setZone(timezone.value) } return isToday(date) ? date.toFormat('hh:mm a') : date.toFormat('LLL dd, yyyy, hh:mm a'); diff --git a/frontend/app/mstore/types/sessionSettings.ts b/frontend/app/mstore/types/sessionSettings.ts index 9374b0df1..f89a8ae4b 100644 --- a/frontend/app/mstore/types/sessionSettings.ts +++ b/frontend/app/mstore/types/sessionSettings.ts @@ -1,14 +1,23 @@ -import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx" +import { makeAutoObservable, runInAction, action } from "mobx" import { SKIP_TO_ISSUE, TIMEZONE, DURATION_FILTER } from 'App/constants/storageKeys' +export type Timezone = { + label: string, + value: string, + } + export default class SessionSettings { skipToIssue: boolean = localStorage.getItem(SKIP_TO_ISSUE) === 'true'; - timezone: string = localStorage.getItem(TIMEZONE) || 'UTC'; + timezone: Timezone; durationFilter: any = JSON.parse(localStorage.getItem(DURATION_FILTER) || '{}'); captureRate: number = 0 captureAll: boolean = false constructor() { + // compatibility fix for old timezone storage + // TODO: remove after a while (1.7.1?) + this.timezoneFix() + this.timezone = JSON.parse(localStorage.getItem(TIMEZONE)) || { label: 'UTC / GMT +00:00', value: 'UTC' } makeAutoObservable(this, { updateKey: action }) @@ -21,6 +30,12 @@ export default class SessionSettings { } } } + + timezoneFix() { + if (localStorage.getItem(TIMEZONE) === '[object Object]') { + localStorage.setItem(TIMEZONE, JSON.stringify({ label: 'UTC / GMT +00:00', value: 'UTC' })); + } + } updateKey(key: string, value: any) { runInAction(() => { @@ -29,7 +44,7 @@ export default class SessionSettings { if (key === 'captureRate' || key === 'captureAll') return - if (key === 'durationFilter') { + if (key === 'durationFilter' || key === 'timezone') { localStorage.setItem(`__$session-${key}$__`, JSON.stringify(value)); } else { localStorage.setItem(`__$session-${key}$__`, value); diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index f749f1bd3..137f542e6 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -26,6 +26,7 @@ "HOCs/*": ["./app/components/hocs/*"], "Types/*": ["./app/types/*"], "Duck/*": ["./app/duck/*"], + "MOBX/*": ["./app/mstore/*"], } }, "include": ["app"]