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"]