From fed79fcfeade0f8b4c79cd48d4be513b16a0eaea Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sun, 24 Nov 2019 17:01:27 +0200
Subject: [PATCH] Task/event: show current timezone next to events with
 timezones.

We were previously showing the original timezone which was confusing.
---
 src/components/Event.tsx |  4 ++--
 src/components/Task.tsx  |  6 +++---
 src/helpers.tsx          | 10 ++++++++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/Event.tsx b/src/components/Event.tsx
index 32d6379..f5846ba 100644
--- a/src/components/Event.tsx
+++ b/src/components/Event.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import PimItemHeader from './PimItemHeader';
 
-import { formatDateRange } from '../helpers';
+import { formatDateRange, formatOurTimezoneOffset } from '../helpers';
 
 import { EventType } from '../pim-types';
 
@@ -27,7 +27,7 @@ class Event extends React.PureComponent {
     return (
       <React.Fragment>
         <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
-          <div>{formatDateRange(this.props.item.startDate, this.props.item.endDate)} {timezone && <small>({timezone})</small>}</div>
+          <div>{formatDateRange(this.props.item.startDate, this.props.item.endDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
           <br />
           <div><u>{this.props.item.location}</u></div>
         </PimItemHeader>
diff --git a/src/components/Task.tsx b/src/components/Task.tsx
index f05eca5..d9abbb2 100644
--- a/src/components/Task.tsx
+++ b/src/components/Task.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import PimItemHeader from './PimItemHeader';
 
-import { formatDate } from '../helpers';
+import { formatDate, formatOurTimezoneOffset } from '../helpers';
 
 import { TaskType } from '../pim-types';
 
@@ -30,10 +30,10 @@ class Task extends React.PureComponent {
       <React.Fragment>
         <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
           {item.startDate &&
-            <div>Start: {formatDate(item.startDate)} {timezone && <small>({timezone})</small>}</div>
+            <div>Start: {formatDate(item.startDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
           }
           {item.dueDate &&
-            <div>Due: {formatDate(item.dueDate)} {timezone && <small>({timezone})</small>}</div>
+            <div>Due: {formatDate(item.dueDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
           }
           <br />
           <div><u>{this.props.item.location}</u></div>
diff --git a/src/helpers.tsx b/src/helpers.tsx
index 6135480..28de623 100644
--- a/src/helpers.tsx
+++ b/src/helpers.tsx
@@ -90,3 +90,13 @@ export function formatDateRange(start: ICAL.Time, end: ICAL.Time) {
 
   return strStart + ' - ' + strEnd;
 }
+
+export function formatOurTimezoneOffset() {
+  let offset = new Date().getTimezoneOffset();
+  const prefix = (offset > 0) ? '-' : '+';
+  offset = Math.abs(offset);
+  const hours = Math.floor(offset / 60);
+  const minutes = offset % 60;
+
+  return `GMT${prefix}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+}