fix(ui): fix for timezone storage and format

frontend/app/components/BugFinder/SessionList/SessionList.js

@@ -113,9 +113,8 @@ export default class SessionList extends React.PureComponent {
           
             <Loader loading={ loading }>
               { list.map(session => (
-                <>
+                <React.Fragment key={ session.sessionId }>
                 <SessionItem
-                  key={ session.sessionId }
                   session={ session }
                   hasUserFilter={hasUserFilter}
                   onUserClick={this.onUserClick}
@@ -123,7 +122,7 @@ export default class SessionList extends React.PureComponent {
                   lastPlayedSessionId={lastPlayedSessionId}
                 />
                 <div className="border-b" />
-                </>
+                </React.Fragment>
               ))}
             </Loader>
             <div className="w-full flex items-center justify-center py-6">

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({
           </TextEllipsis>
 
           <div className="text-sm color-gray-medium flex items-center">
-            <span style={{ whiteSpace: 'nowrap' }}>{formatDateTimeDefault(startedAt)}</span>
+            <span style={{ whiteSpace: 'nowrap' }}>{formatTimeOrDate(startedAt, timezone)}</span>
             <span className="mx-1 font-bold text-xl">&#183;</span>
             <span>{countries[userCountry]}</span>
             <span className="mx-1 font-bold text-xl">&#183;</span>

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<string, any>;
-    userSessionsCount: number
+    userSessionsCount: number;
     issueTypes: [];
     active: boolean;
   },
@@ -57,7 +57,7 @@ interface Props {
   live?: boolean;
 }
 
-function SessionItem(props: RouteComponentProps<Props>) {
+function SessionItem(props: RouteComponentProps & Props) {
   const { settingsStore } = useStore();
   const { timezone } = settingsStore.sessionSettings;
 

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

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

frontend/tsconfig.json

@@ -26,6 +26,7 @@
       "HOCs/*": ["./app/components/hocs/*"],
       "Types/*": ["./app/types/*"],
       "Duck/*": ["./app/duck/*"],
+      "MOBX/*": ["./app/mstore/*"],
     }
   },
   "include": ["app"]