Task/event: show current timezone next to events with timezones.

We were previously showing the original timezone which was confusing.

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>

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>

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')}`;
+}