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

fix(ui): set default timezone as local tz in option select (#633)

Browse source
This commit is contained in:
Delirium 2022-07-21 19:35:50 +03:00 • committed by GitHub
parent 3e6c3306f9
commit b5f65cf6e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
View file

@ -8,36 +8,10 @@ import { toast } from 'react-toastify';
type TimezonesDropdown = Timezone[]
const generateGMTZones = (): TimezonesDropdown => {
const timezones: TimezonesDropdown = []
const positiveNumbers = [...Array(12).keys()];
const negativeNumbers = [...Array(12).keys()].reverse();
negativeNumbers.pop(); // remove trailing zero since we have one in positive numbers array
const combinedArray = [...negativeNumbers, ...positiveNumbers];
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 dropdownValue = `UTC${symbol}${value}`
timezones.push({ label: tz, value: isUTC ? 'UTC' : dropdownValue })
}
timezones.splice(17, 0, { label: 'GMT +05:30', value: 'UTC+05:30' })
return timezones
}
const timezoneOptions: TimezonesDropdown = [...generateGMTZones()]
function DefaultTimezone() {
const [changed, setChanged] = React.useState(false);
const { settingsStore } = useStore();
const timezoneOptions: TimezonesDropdown = settingsStore.sessionSettings.defaultTimezones;
const [timezone, setTimezone] = React.useState(settingsStore.sessionSettings.timezone);
const sessionSettings = useObserver(() => settingsStore.sessionSettings);

74
frontend/app/mstore/types/sessionSettings.ts
View file

@ -1,24 +1,54 @@
import { makeAutoObservable, runInAction, action } from "mobx"
import { SKIP_TO_ISSUE, TIMEZONE, DURATION_FILTER } from 'App/constants/storageKeys'
import { makeAutoObservable, runInAction, action } from 'mobx';
import moment from 'moment';
import { SKIP_TO_ISSUE, TIMEZONE, DURATION_FILTER } from 'App/constants/storageKeys';
export type Timezone = {
label: string,
value: string,
}
label: string;
value: string;
};
export const generateGMTZones = (): Timezone[] => {
const timezones: Timezone[] = [];
const positiveNumbers = [...Array(12).keys()];
const negativeNumbers = [...Array(12).keys()].reverse();
negativeNumbers.pop(); // remove trailing zero since we have one in positive numbers array
const combinedArray = [...negativeNumbers, ...positiveNumbers];
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 dropdownValue = `UTC${symbol}${value}`;
timezones.push({ label: tz, value: isUTC ? 'UTC' : dropdownValue });
}
timezones.splice(17, 0, { label: 'GMT +05:30', value: 'UTC+05:30' });
return timezones;
};
export default class SessionSettings {
defaultTimezones = [...generateGMTZones()]
skipToIssue: boolean = localStorage.getItem(SKIP_TO_ISSUE) === 'true';
timezone: Timezone;
durationFilter: any = JSON.parse(localStorage.getItem(DURATION_FILTER) || '{}');
captureRate: string = '0'
captureAll: boolean = false
captureRate: string = '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)
const userTimezoneOffset = moment().format('Z');
const defaultTimezone = this.defaultTimezones.find(tz => tz.value.includes('UTC' + userTimezoneOffset.slice(0,3))) || { label: 'Local', value: `UTC${userTimezoneOffset}` };
this.timezoneFix(defaultTimezone);
this.timezone = JSON.parse(localStorage.getItem(TIMEZONE)) || defaultTimezone;
makeAutoObservable(this);
}
merge = (settings: any) => {
@ -27,35 +57,35 @@ export default class SessionSettings {
this.updateKey(key, settings[key]);
}
}
}
};
changeCaptureRate = (rate: string) => {
if (!rate) return this.captureRate = '0';
if (!rate) return (this.captureRate = '0');
// react do no see the difference between 01 and 1 decimals, this is why we have to use string casting
if (parseInt(rate, 10) <= 100) this.captureRate = `${parseInt(rate, 10)}`;
}
};
changeCaptureAll = (all: boolean) => {
this.captureAll = all;
}
};
timezoneFix() {
if (localStorage.getItem(TIMEZONE) === '[object Object]') {
localStorage.setItem(TIMEZONE, JSON.stringify({ label: 'UTC / GMT +00:00', value: 'UTC' }));
timezoneFix(defaultTimezone: Record<string, string>) {
if (localStorage.getItem(TIMEZONE) === '[object Object]' || !localStorage.getItem(TIMEZONE)) {
localStorage.setItem(TIMEZONE, JSON.stringify(defaultTimezone));
}
}
updateKey = (key: string, value: any) => {
runInAction(() => {
this[key] = value
})
this[key] = value;
});
if (key === 'captureRate' || key === 'captureAll') return
if (key === 'captureRate' || key === 'captureAll') return;
if (key === 'durationFilter' || key === 'timezone') {
localStorage.setItem(`__$session-${key}$__`, JSON.stringify(value));
} else {
localStorage.setItem(`__$session-${key}$__`, value);
}
}
};
}