(!disableUser && !hasUserFilter) && onUserClick(userId, userAnonymousId)}
>
@@ -111,7 +133,7 @@ function SessionItem(props) {
-
+
·
@@ -145,9 +167,11 @@ function SessionItem(props) {
)}
)}
-
-
-
+
@@ -155,10 +179,7 @@ function SessionItem(props) {
)}
- );
- }
+ )
+}
-export default connect(state => ({
- timezone: localStorage.getItem(TIMEZONE) || '',
- siteId: state.getIn([ 'site', 'siteId' ]),
-}), { toggleFavorite, setSessionPath })(withRouter(SessionItem));
\ No newline at end of file
+export default withRouter(observer(SessionItem))
diff --git a/frontend/app/components/shared/SessionItem/index.js b/frontend/app/components/shared/SessionItem/index.ts
similarity index 100%
rename from frontend/app/components/shared/SessionItem/index.js
rename to frontend/app/components/shared/SessionItem/index.ts
diff --git a/frontend/app/components/shared/SessionItem/sessionItem.css b/frontend/app/components/shared/SessionItem/sessionItem.css
index cb7b87c3a..897ee327f 100644
--- a/frontend/app/components/shared/SessionItem/sessionItem.css
+++ b/frontend/app/components/shared/SessionItem/sessionItem.css
@@ -1,11 +1,9 @@
-@import 'mixins.css';
-
.sessionItem {
background-color: #fff;
- @mixin defaultHover;
user-select: none;
border-radius: 3px;
border: solid thin #EEEEEE;
+ transition: all 0.4s;
& .favorite {
opacity: 0;
@@ -15,6 +13,10 @@
}
&:hover {
+ background-color: $active-blue;
+ border: solid thin $active-blue-border;
+ transition: all 0.2s;
+
& .playLink {
transition: all 0.4s;
opacity: 1;
@@ -103,7 +105,11 @@
letter-spacing: 1px;
}
-.userName:hover {
- text-decoration: underline;
- text-decoration-color: $teal;
-}
\ No newline at end of file
+.userName {
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ text-decoration-color: $teal;
+ }
+}
diff --git a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
index 8e6edee88..1f1299025 100644
--- a/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
+++ b/frontend/app/components/shared/SessionSettings/components/DefaultTimezone.tsx
@@ -5,24 +5,49 @@ import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
const str = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
-const d = str && str[1] || 'UTC';
-const localMachineFormat = new Date().toString().match(/([A-Z]+[\+-][0-9]+)/)
-const middlePoint = localMachineFormat && localMachineFormat[1].length - 2
-const readableLocalTimezone = localMachineFormat && middlePoint ?
- `${localMachineFormat[1].substring(0, 3)} ${localMachineFormat[1].substring(3, middlePoint)}:${localMachineFormat[1].substring(middlePoint)}`
- : null
+interface TimezonesDropdownValue {
+ label: string;
+ value: string;
+}
+type TimezonesDropdown = TimezonesDropdownValue[]
-const timezoneOptions = [
- { label: readableLocalTimezone, value: 'local' },
- { label: 'UTC', value: 'UTC' },
-]
+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 on in positive numbers array
+
+ const combinedArray = [...negativeNumbers, ...positiveNumbers];
+
+ for (let i = 0; i < 23; 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: 'GMT +05:30' })
+ return timezones
+}
+
+const timezoneOptions: TimezonesDropdown = [...generateGMTZones()]
function DefaultTimezone(props) {
const [changed, setChanged] = React.useState(false);
const { settingsStore } = useStore();
const [timezone, setTimezone] = React.useState(settingsStore.sessionSettings.timezone);
- const sessionSettings = useObserver(() => settingsStore.sessionSettings)
+ const sessionSettings = useObserver(() => settingsStore.sessionSettings);
+
+ useEffect(() => {
+ if (!timezone) setTimezone('local');
+ }, []);
return (
<>
diff --git a/frontend/app/date.ts b/frontend/app/date.ts
index 8a9501a86..e32704db1 100644
--- a/frontend/app/date.ts
+++ b/frontend/app/date.ts
@@ -20,7 +20,7 @@ export const durationFormatted = (duration: Duration):string => {
export function durationFromMsFormatted(ms: number): string {
return durationFormatted(Duration.fromMillis(ms || 0));
-}
+}
export const durationFormattedFull = (duration: Duration): string => {
if (duration.as('minutes') < 1) { // show in seconds
@@ -35,7 +35,7 @@ export const durationFormattedFull = (duration: Duration): string => {
} else if (duration.as('months') < 1) { // show in days and hours
let d = duration.toFormat('d');
duration = d + (d > 1 ? ' days' : ' day');
- } else {
+ } else {
let d = Math.trunc(duration.as('months'));
duration = d + (d > 1 ? ' months' : ' month');;
}
@@ -49,7 +49,7 @@ export const msToSec = (ms:number): number => Math.round(ms / 1000);
export const diffFromNowString = (ts:number): string =>
durationFormattedFull(DateTime.fromMillis(Date.now()).diff(DateTime.fromMillis(ts)));
-export const diffFromNowShortString = (ts: number): string =>
+export const diffFromNowShortString = (ts: number): string =>
durationFormatted(DateTime.fromMillis(Date.now()).diff(DateTime.fromMillis(ts)));
export const getDateFromMill = date =>
@@ -69,11 +69,19 @@ export function formatDateTimeDefault(timestamp: number): string {
return isToday(date) ? 'Today' : date.toFormat('LLL dd, yyyy') + ', ' + date.toFormat('hh:mm a')
}
+/**
+ * Formats timestamps into readable date
+ * @param {Number} timestamp
+ * @param {String} timezone fixed offset like UTC+6
+ * @returns {String} formatted date (or time if its today)
+ */
export function formatTimeOrDate(timestamp: number, timezone: string): string {
var date = DateTime.fromMillis(timestamp)
- if (timezone === 'UTC')
- date = date.toUTC();
-
+ if (timezone) {
+ if (timezone === 'UTC') date = date.toUTC();
+ date = date.setZone(timezone)
+ }
+
return isToday(date) ? date.toFormat('hh:mm a') : date.toFormat('LLL dd, yyyy, hh:mm a');
}