23 files changed, 560 insertions, 637 deletions
diff --git a/src/Analyze.js b/src/Analyze.tsx
index 98e3ce2..5450998 100644
--- a/src/Analyze.js
+++ b/src/Analyze.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import 'react-dates/initialize';
 import 'react-dates/lib/css/_datepicker.css';
 import { DateRangePicker } from 'react-dates';
-import { withStyles } from '@material-ui/core/styles';
+import { Theme, withStyles } from '@material-ui/core/styles';
 import cyan from '@material-ui/core/colors/cyan';
 import deepOrange from '@material-ui/core/colors/deepOrange';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -15,51 +15,55 @@ import Grid from '@material-ui/core/Grid';
 import AddCircleIcon from '@material-ui/icons/AddCircle';
 import IconButton from '@material-ui/core/IconButton';
 import * as gapi from './gapi';
-import { msgType, MsgClient } from './msg';
+import { MsgType, MsgClient } from './msg';
 import { Pattern, PatternEntry } from './pattern';
 import { AnalyzePieChart, getChartData } from './Chart';
 import PatternTable from './PatternTable';
 import Snackbar from './Snackbar';
 import AlertDialog from './Dialog';
+import moment from 'moment';
 
 const default_chart_data = [
 {name: 'Work', value: 10, color: cyan[300]},
 {name: 'Wasted', value: 10, color: deepOrange[300]}];
 
-const styles = theme => ({
+const styles = (theme: Theme) => ({
 buttonSpacer: {
 marginBottom: theme.spacing.unit * 4,
 },
 });
 
 class Analyze extends React.Component {
+ msgClient: MsgClient;
+
 state = {
- patterns: [],
+ patterns: [] as PatternEntry[],
 calendars: {},
- startDate: null,
- endDate: null,
+ startDate: null as moment.Moment,
+ endDate: null as moment.Moment,
 patternGraphData: default_chart_data,
 calendarGraphData: default_chart_data,
 snackBarOpen: false,
 snackBarMsg: 'unknown',
 snackBarVariant: 'error',
 dialogOpen: false,
- dialogMsg: {title: '', message: ''},
+ dialogMsg: {title: '', message: ''}
 };
 
- constructor(props) {
+ constructor(props: any) {
 super(props);
+
 this.msgClient = new MsgClient('main');
 
 this.msgClient.sendMsg({
- type: msgType.getPatterns,
+ type: MsgType.getPatterns,
 data: { id: 'analyze' }
 }).then(msg => {
 this.setState({ patterns: msg.data.map(p => PatternEntry.inflate(p)) });
 });
 
 this.msgClient.sendMsg({
- type: msgType.getCalendars,
+ type: MsgType.getCalendars,
 data: { enabledOnly: true }
 }).then(msg => {
 this.setState({ calendars: msg.data });
@@ -71,20 +75,20 @@ class Analyze extends React.Component {
 this.dialogPromiseResolver = null;
 }
 
- loadPatterns = patterns => {
+ loadPatterns = (patterns: PatternEntry[]) => {
 this.msgClient.sendMsg({
- type: msgType.updatePatterns,
+ type: MsgType.updatePatterns,
 data: { id: 'analyze', patterns: patterns.map(p => p.deflate()) }
 }).then(() => this.setState({ patterns }));
 };
 
- updatePattern = (field, idx, value) => {
+ updatePattern = (field: string, idx: number, value: PatternEntry[]) => {
 let patterns = this.state.patterns;
 patterns[idx][field] = value;
 this.loadPatterns(patterns);
 };
 
- removePattern = idx => {
+ removePattern = (idx: number) => {
 let patterns = this.state.patterns;
 patterns.splice(idx, 1);
 for (let i = 0; i < patterns.length; i++)
@@ -99,8 +103,8 @@ class Analyze extends React.Component {
 this.loadPatterns(patterns);
 };
 
- getCalEvents = (id, start, end) => {
- return this.msgClient.sendMsg({ type: msgType.getCalEvents, data: { id,
+ getCalEvents = (id: string, start: Date, end: Date) => {
+ return this.msgClient.sendMsg({ type: MsgType.getCalEvents, data: { id,
 start: start.getTime(),
 end: end.getTime() } })
 .then(({ data }) => data.map(e => {
diff --git a/src/Chart.js b/src/Chart.tsx
index b1c36ed..b1c36ed 100644
--- a/src/Chart.js
+++ b/src/Chart.tsx
diff --git a/src/Dashboard.js b/src/Dashboard.tsx
index 04ced46..04ced46 100644
--- a/src/Dashboard.js
+++ b/src/Dashboard.tsx
diff --git a/src/Dialog.js b/src/Dialog.tsx
index 7e24176..7e24176 100644
--- a/src/Dialog.js
+++ b/src/Dialog.tsx
diff --git a/src/Logo.js b/src/Logo.tsx
index a4036a9..a4036a9 100644
--- a/src/Logo.js
+++ b/src/Logo.tsx
diff --git a/src/PatternTable.js b/src/PatternTable.tsx
index 93be293..93be293 100644
--- a/src/PatternTable.js
+++ b/src/PatternTable.tsx
diff --git a/src/RegexField.js b/src/RegexField.tsx
index e3fa9f4..e3fa9f4 100644
--- a/src/RegexField.js
+++ b/src/RegexField.tsx
diff --git a/src/Settings.js b/src/Settings.tsx
index 2835483..83f1da6 100644
--- a/src/Settings.js
+++ b/src/Settings.tsx
@@ -20,7 +20,7 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import Checkbox from '@material-ui/core/Checkbox';
 import * as gapi from './gapi';
-import { msgType, MsgClient } from './msg';
+import { MsgType, MsgClient } from './msg';
 import { Pattern, PatternEntry } from './pattern';
 import PatternTable from './PatternTable';
 import Snackbar from './Snackbar';
@@ -137,21 +137,21 @@ class Settings extends React.Component {
 this.msgClient = new MsgClient('main');
 
 this.msgClient.sendMsg({
- type: msgType.getPatterns,
+ type: MsgType.getPatterns,
 data: { id: 'main' }
 }).then(msg => {
 this.setState({ patterns: msg.data.map(p => PatternEntry.inflate(p)) });
 });
 
 this.msgClient.sendMsg({
- type: msgType.getCalendars,
+ type: MsgType.getCalendars,
 data: { enabledOnly: false }
 }).then(msg => {
 this.setState({ calendars: msg.data });
 });
 
 this.msgClient.sendMsg({
- type: msgType.getConfig,
+ type: MsgType.getConfig,
 data: ['trackedPeriods']
 }).then(msg => {
 let config = {
@@ -191,7 +191,7 @@ class Settings extends React.Component {
 var calendars = {...this.state.calendars};
 calendars[id].enabled = !calendars[id].enabled;
 this.msgClient.sendMsg({
- type: msgType.updateCalendars,
+ type: MsgType.updateCalendars,
 data: calendars
 }).then(() => this.setState({ calendars }));
 }
@@ -240,14 +240,14 @@ class Settings extends React.Component {
 calendars[id].enabled = this.state.calendars[id].enabled;
 }
 this.msgClient.sendMsg({
- type: msgType.updateCalendars,
+ type: MsgType.updateCalendars,
 data: calendars
 }).then(() => this.setState({ calendars }));
 };
 
 loadPatterns = (patterns, id) => {
 this.msgClient.sendMsg({
- type: msgType.updatePatterns,
+ type: MsgType.updatePatterns,
 data: { id, patterns: patterns.map(p => p.deflate()) }
 }).then(() => this.setState({ patterns }));
 };
@@ -297,7 +297,7 @@ class Settings extends React.Component {
 
 updateTrackedPeriods = trackedPeriods => {
 this.msgClient.sendMsg({
- type: msgType.updateConfig,
+ type: MsgType.updateConfig,
 data: { trackedPeriods: trackedPeriods.map(p => ({
 name: p.name,
 start: p.start.deflate(),
diff --git a/src/Snackbar.js b/src/Snackbar.tsx
index f17863c..f17863c 100644
--- a/src/Snackbar.js
+++ b/src/Snackbar.tsx
diff --git a/src/background.js b/src/background.ts
index f22970e..2a23b57 100644
--- a/src/background.js
+++ b/src/background.ts
@@ -5,7 +5,7 @@ import moment from 'moment';
 import { getChartData } from './Chart';
 import { PatternEntry } from './pattern';
 
-let mainPatterns = [];
+let mainPatterns: number[] = [];
 let analyzePatterns = [];
 let calendars = {};
 let calData = {};
diff --git a/src/decl.ts b/src/decl.ts
new file mode 100644
index 0000000..5b3daa3
--- /dev/null
+++ b/src/decl.ts
@@ -0,0 +1 @@
+declare module 'react-dates';
diff --git a/src/duration.js b/src/duration.js
deleted file mode 100644
index 53de0ad..0000000
--- a/src/duration.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import moment from 'moment';
-
-export class Duration {
- constructor(value, unit) {
- this.value = value
- this.unit = unit
- }
-
- toMoment() {
- let m = moment.duration(this.value, this.unit);
- if (m.isValid()) return m;
- return null;
- }
-
- static days(n) { return new Duration(n, 'days'); }
- static weeks(n) { return new Duration(n, 'weeks'); }
- static months(n) { return new Duration(n, 'months'); }
-
- deflate() { return { value: this.value, unit: this.unit }; }
- static inflate = obj => new Duration(obj.value, obj.unit);
-}
diff --git a/src/duration.ts b/src/duration.ts
new file mode 100644
index 0000000..18849a0
--- /dev/null
+++ b/src/duration.ts
@@ -0,0 +1,26 @@
+import moment from 'moment';
+
+export type TimeUnit = moment.unitOfTime.DurationConstructor;
+
+export class Duration {
+ value: number;
+ unit: TimeUnit;
+ constructor(value: number, unit: TimeUnit) {
+ this.value = value
+ this.unit = unit
+ }
+
+ isValid() { return moment.duration(this.value, this.unit).isValid(); }
+ toMoment() {
+ let m = moment.duration(this.value, this.unit);
+ if (m.isValid()) return m;
+ return null;
+ }
+
+ static days(n: number) { return new Duration(n, 'days'); }
+ static weeks(n: number) { return new Duration(n, 'weeks'); }
+ static months(n: number) { return new Duration(n, 'months'); }
+
+ deflate() { return { value: this.value, unit: this.unit }; }
+ static inflate = (obj: { value: number, unit: TimeUnit }) => new Duration(obj.value, obj.unit);
+}
diff --git a/src/gapi.js b/src/gapi.js
deleted file mode 100644
index 3938864..0000000
--- a/src/gapi.js
+++ /dev/null
@@ -1,335 +0,0 @@
-/* global chrome */
-import LRU from "lru-cache";
-const gapi_base = 'https://www.googleapis.com/calendar/v3';
-
-const GApiError = Object.freeze({
- invalidSyncToken: Symbol("invalidSyncToken"),
- notLoggedIn: Symbol("notLoggedIn"),
- notLoggedOut: Symbol("notLoggedOut"),
- otherError: Symbol("otherError"),
-});
-
-function to_params(dict) {
- return Object.entries(dict).filter(([k, v]) => v).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&');
-}
-
-let loggedIn = null;
-
-function _getAuthToken(interactive = false) {
- return new Promise(resolver =>
- chrome.identity.getAuthToken(
- { interactive }, token => resolver([token, !chrome.runtime.lastError])))
- .then(([token, ok]) => {
- if (ok) return token;
- else throw GApiError.notLoggedIn;
- });
-}
-
-function _removeCachedAuthToken(token) {
- return new Promise(resolver =>
- chrome.identity.removeCachedAuthToken({ token }, () => resolver()));
-}
-
-export function getLoggedIn() {
- if (loggedIn === null)
- {
- return _getAuthToken(false)
- .then(() => loggedIn = true)
- .catch(() => loggedIn = false)
- .then(() => loggedIn);
- }
- else return Promise.resolve(loggedIn);
-}
-
-export function getAuthToken() {
- return getLoggedIn().then(b => {
- if (b) return _getAuthToken(false);
- else throw GApiError.notLoggedIn;
- });
-}
-
-export function login() {
- return getLoggedIn().then(b => {
- if (!b) return _getAuthToken(true).then(() => loggedIn = true);
- else throw GApiError.notLoggedOut;
- });
-}
-
-export function logout() {
- return getAuthToken().then(token => {
- return fetch(`https://accounts.google.com/o/oauth2/revoke?${to_params({ token })}`,
- { method: 'GET', async: true }).then(response => {
- //if (response.status === 200)
- return _removeCachedAuthToken(token);
- //else throw GApiError.otherError;
- });
- }).then(() => loggedIn = false);
-}
-
-export function getCalendars(token) {
- return fetch(`${gapi_base}/users/me/calendarList?${to_params({access_token: token})}`,
- { method: 'GET', async: true })
- .then(response => response.json())
- .then(data => data.items);
-}
-
-export function getColors(token) {
- return fetch(`${gapi_base}/colors?${to_params({access_token: token})}`,
- { method: 'GET', async: true })
- .then(response => response.json());
-}
-
-function getEvent(calId, eventId, token) {
- return fetch(`${gapi_base}/calendars/${calId}/events/${eventId}?${to_params({access_token: token})}`,
- { method: 'GET', async: true })
- .then(response => response.json());
-}
-
-function getEvents(calId, token, syncToken=null, timeMin=null, timeMax=null, resultsPerRequest=100) {
- let results = [];
- const singleFetch = (pageToken, syncToken) => fetch(`${gapi_base}/calendars/${calId}/events?${to_params({
- access_token: token,
- pageToken,
- syncToken,
- timeMin,
- timeMax,
- maxResults: resultsPerRequest
- })}`, { method: 'GET', async: true })
- .then(response => {
- if (response.status === 200)
- return response.json();
- else if (response.status === 410)
- throw GApiError.invalidSyncToken;
- else throw GApiError.otherError;
- })
- .then(data => {
- results.push(...data.items);
- if (data.nextPageToken) {
- return singleFetch(data.nextPageToken, '');
- } else {
- return ({
- nextSyncToken: data.nextSyncToken,
- results
- });
- }
- })
-
- return singleFetch('', syncToken);
-}
-
-export class GCalendar {
- constructor(calId, name, options={maxCachedItems: 100, nDaysPerSlot: 10, largeQuery: 10}) {
- this.calId = calId;
- this.name = name;
- this.syncToken = '';
- this.cache = new LRU({
- max: options.maxCachedItems,
- dispose: (k, v) => this.onRemoveSlot(k, v)
- });
- this.eventMeta = {};
- this.options = options;
- this.divider = 8.64e7 * this.options.nDaysPerSlot;
- }
-
- get token() { return getAuthToken(); }
-
- dateToCacheKey(date) {
- return Math.floor(date / this.divider);
- }
-
- dateRangeToCacheKeys(range) {
- return {
- start: this.dateToCacheKey(range.start),
- end: this.dateToCacheKey(new Date(range.end.getTime() - 1))
- };
- }
-
- getSlot(k) {
- if (!this.cache.has(k))
- {
- let res = {};
- this.cache.set(k, res);
- return res;
- }
- else return this.cache.get(k);
- }
-
- onRemoveSlot(k, v) {
- for (let id in v) {
- console.assert(this.eventMeta[id]);
- let keys = this.eventMeta[id].keys;
- keys.delete(k);
- if (keys.size === 0)
- delete this.eventMeta[id];
- }
- }
-
- slotStartDate(k) { return new Date(k * this.divider); }
- slotEndDate(k) { return new Date((k + 1) * this.divider); }
-
- addEvent(e, evict = false) {
- //console.log('adding event', e);
- if (this.eventMeta.hasOwnProperty(e.id))
- this.removeEvent(e);
- let r = this.dateRangeToCacheKeys(e);
- let ks = r.start;
- let ke = r.end;
- let t = this.cache.length;
- let keys = new Set();
- for (let i = ks; i <= ke; i++)
- {
- keys.add(i);
- if (!this.cache.has(i)) t++;
- }
- this.eventMeta[e.id] = {
- keys,
- summary: e.summary,
- };
- if (!evict && t > this.options.maxCachedItems) return;
- if (ks === ke)
- this.getSlot(ks)[e.id] = {
- start: e.start,
- end: e.end,
- id: e.id };
- else
- {
- this.getSlot(ks)[e.id] = {
- start: e.start,
- end: this.slotEndDate(ks),
- id: e.id };
- this.getSlot(ke)[e.id] = {
- start: this.slotStartDate(ke),
- end: e.end,
- id: e.id };
- for (let k = ks + 1; k < ke; k++)
- this.getSlot(k)[e.id] = {
- start: this.slotStartDate(k),
- end: this.slotEndDate(k),
- id: e.id};
- }
- }
-
- removeEvent(e) {
- let keys = this.eventMeta[e.id].keys;
- console.assert(keys);
- keys.forEach(k => delete this.getSlot(k)[e.id]);
- delete this.eventMeta[e.id];
- }
-
- getSlotEvents(k, start, end) {
- let s = this.getSlot(k);
- //console.log(s);
- let results = [];
- for (let id in s) {
- if (!(s[id].start >= end || s[id].end <= start))
- {
- results.push({
- id,
- start: s[id].start < start ? start: s[id].start,
- end: s[id].end > end ? end: s[id].end,
- summary: this.eventMeta[id].summary
- });
- }
- }
- return results;
- }
-
- getCachedEvents(_r) {
- let r = this.dateRangeToCacheKeys(_r);
- let ks = r.start;
- let ke = r.end;
- let results = this.getSlotEvents(ks, _r.start, _r.end);
- for (let k = ks + 1; k < ke; k++)
- {
- let s = this.getSlot(k);
- for (let id in s)
- results.push(s[id]);
- }
- if (ke > ks)
- results.push(...this.getSlotEvents(ke, _r.start, _r.end));
- return results;
- }
-
- sync() {
- return this.token.then(token => getEvents(this.calId, token, this.syncToken).then(r => {
- let pms = r.results.map(e => e.start ? Promise.resolve(e) : getEvent(this.calId, e.id, token));
- return Promise.all(pms).then(results => {
- results.forEach(e => {
- e.start = new Date(e.start.dateTime);
- e.end = new Date(e.end.dateTime);
- if (e.status === 'confirmed')
- this.addEvent(e);
- else if (e.status === 'cancelled')
- this.removeEvent(e);
- });
- this.syncToken = r.nextSyncToken;
- });
- })).catch(e => {
- if (e === GApiError.invalidSyncToken) {
- this.syncToken = '';
- this.sync();
- } else throw e;
- });
- }
-
- getEvents(start, end) {
- let r = this.dateRangeToCacheKeys({ start, end });
- let query = {};
- for (let k = r.start; k <= r.end; k++)
- if (!this.cache.has(k))
- {
- if (!query.hasOwnProperty('start'))
- query.start = k;
- query.end = k;
- }
- //console.log(`start: ${start} end: ${end}`);
- if (query.hasOwnProperty('start'))
- {
- console.assert(query.start <= query.end);
- if (query.end - query.start + 1 > this.options.largeQuery) {
- console.log(`encounter large query, use direct fetch`);
- return this.token.then(token => getEvents(this.calId, token, null,
- start.toISOString(), end.toISOString()).then(r => {
- let results = [];
- r.results.forEach(e => {
- console.assert(e.start);
- e.start = new Date(e.start.dateTime);
- e.end = new Date(e.end.dateTime);
- results.push(e);
- });
- return results.filter(e => !(e.start >= end || e.end <= start)).map(e => {
- return {
- id: e.id,
- start: e.start < start ? start: e.start,
- end: e.end > end ? end: e.end,
- summary: e.summary,
- };
- });
- }));
- }
-
- console.log(`fetching short event list`);
- return this.token.then(token => getEvents(this.calId, token, null,
- this.slotStartDate(query.start).toISOString(),
- this.slotEndDate(query.end).toISOString()).then(r => {
- r.results.forEach(e => {
- if (e.status === 'confirmed')
- {
- console.assert(e.start);
- e.start = new Date(e.start.dateTime);
- e.end = new Date(e.end.dateTime);
- this.addEvent(e, true);
- }
- });
- if (this.syncToken === '')
- this.syncToken = r.nextSyncToken;
- })).then(() => this.sync())
- .then(() => this.getCachedEvents({ start, end }));
- }
- else
- {
- console.log(`cache hit`);
- return this.sync().then(() => this.getCachedEvents({ start, end }));
- }
- }
-}
diff --git a/src/gapi.ts b/src/gapi.ts
new file mode 100644
index 0000000..bf45ffc
--- /dev/null
+++ b/src/gapi.ts
@@ -0,0 +1,369 @@
+/* global chrome */
+
+import LRU from "lru-cache";
+
+const gapiBase = 'https://www.googleapis.com/calendar/v3';
+
+enum GApiError {
+ invalidSyncToken = "invalidSyncToken",
+ notLoggedIn = "notLoggedIn",
+ notLoggedOut = "notLoggedOut",
+ otherError = "otherError",
+}
+
+function to_params(dict: Object) {
+ return Object.entries(dict).filter(([k, v] : string[]) => v)
+ .map(([k, v]: string[]) => (
+ `${encodeURIComponent(k)}=${encodeURIComponent(v)}`
+ )).join('&');
+}
+
+let loggedIn = false;
+
+function _getAuthToken(interactive = false): Promise<string> {
+ return new Promise(resolver =>
+ chrome.identity.getAuthToken(
+ { interactive }, token => resolver([token, !chrome.runtime.lastError])))
+ .then(([token, ok] : [string, boolean]) => {
+ if (ok) return token;
+ else throw GApiError.notLoggedIn;
+ });
+}
+
+function _removeCachedAuthToken(token: string) {
+ return new Promise(resolver =>
+ chrome.identity.removeCachedAuthToken({ token }, () => resolver()));
+}
+
+export function getLoggedIn() {
+ if (loggedIn === null)
+ {
+ return _getAuthToken(false)
+ .then(() => loggedIn = true)
+ .catch(() => loggedIn = false)
+ .then(() => loggedIn);
+ }
+ else return Promise.resolve(loggedIn);
+}
+
+export function getAuthToken(): Promise<string> {
+ return getLoggedIn().then(b => {
+ if (b) return _getAuthToken(false);
+ else throw GApiError.notLoggedIn;
+ });
+}
+
+export function login() {
+ return getLoggedIn().then(b => {
+ if (!b) return _getAuthToken(true).then(() => loggedIn = true);
+ else throw GApiError.notLoggedOut;
+ });
+}
+
+export async function logout() {
+ let token = await getAuthToken();
+ let response = await fetch(
+ `https://accounts.google.com/o/oauth2/revoke?${to_params({ token })}`, { method: 'GET' });
+ //if (response.status === 200)
+ await _removeCachedAuthToken(token);
+ //else throw GApiError.otherError;
+ loggedIn = false;
+}
+
+export async function getCalendars(token: string) {
+ let response = await fetch(
+ `${gapiBase}/users/me/calendarList?${to_params({access_token: token})}`, { method: 'GET' });
+ return (await response.json()).items;
+}
+
+export async function getColors(token: string) {
+ let response = await fetch(
+ `${gapiBase}/colors?${to_params({access_token: token})}`, { method: 'GET' });
+ return response.json();
+}
+
+async function getEvent(calId: string, eventId: string, token: string) {
+ let response = await fetch(
+ `${gapiBase}/calendars/${calId}/events/${eventId}?${to_params({access_token: token})}`,
+ { method: 'GET' });
+ return response.json();
+}
+
+function getEvents(calId: string, token: string,
+ syncToken=null as string,
+ timeMin=null as string,
+ timeMax=null as string,
+ resultsPerRequest=100 as number):
+ Promise<{ results: any[], nextSyncToken: string }> {
+ let results = [] as any[];
+ const singleFetch = async (pageToken: string, syncToken: string):
+ Promise<{nextSyncToken: string, results: any[]}> => {
+ let response = await fetch(`${gapiBase}/calendars/${calId}/events?${to_params({
+ access_token: token,
+ pageToken,
+ syncToken,
+ timeMin,
+ timeMax,
+ maxResults: resultsPerRequest
+ })}`, { method: 'GET' });
+ if (response.status === 200)
+ {
+ let data = await response.json();
+ results.push(...data.items);
+ if (data.nextPageToken) {
+ return singleFetch(data.nextPageToken, '');
+ } else {
+ return ({
+ nextSyncToken: data.nextSyncToken,
+ results
+ });
+ }
+ }
+ else if (response.status === 410)
+ throw GApiError.invalidSyncToken;
+ else throw GApiError.otherError;
+ };
+
+ return singleFetch('', syncToken);
+}
+
+type GCalendarOptions = {
+ maxCachedItems: number,
+ nDaysPerSlot: number,
+ largeQuery: number
+};
+
+type GCalendarEvent = {
+ start: Date,
+ end: Date,
+ id: string
+};
+
+type GCalendarSlot = { [id: string]: GCalendarEvent };
+
+export class GCalendar {
+ calId: string;
+ name: string;
+ syncToken: string;
+ cache: LRU<number, GCalendarSlot>;
+ eventMeta: { [id: string]: { keys: Set<number>, summary: string } };
+ options: GCalendarOptions;
+ divider: number;
+
+ constructor(calId: string, name: string,
+ options={maxCachedItems: 100, nDaysPerSlot: 10, largeQuery: 10}) {
+ this.calId = calId;
+ this.name = name;
+ this.syncToken = '';
+ this.cache = new LRU<number, GCalendarSlot>({
+ max: options.maxCachedItems,
+ dispose: (k, v) => this.onRemoveSlot(k, v)
+ });
+ this.eventMeta = {};
+ this.options = options;
+ this.divider = 8.64e7 * this.options.nDaysPerSlot;
+ }
+
+ get token() { return getAuthToken(); }
+
+ dateToCacheKey(date: Date) {
+ return Math.floor(date.getTime() / this.divider);
+ }
+
+ dateRangeToCacheKeys(range: { start: Date, end: Date }) {
+ return {
+ start: this.dateToCacheKey(range.start),
+ end: this.dateToCacheKey(new Date(range.end.getTime() - 1))
+ };
+ }
+
+ getSlot(k: number) {
+ if (!this.cache.has(k))
+ {
+ let res = {};
+ this.cache.set(k, res);
+ return res;
+ }
+ else return this.cache.get(k);
+ }
+
+ onRemoveSlot(k: number, v: GCalendarSlot) {
+ for (let id in v) {
+ console.assert(this.eventMeta.hasOwnProperty(id));
+ let keys = this.eventMeta[id].keys;
+ keys.delete(k);
+ if (keys.size === 0)
+ delete this.eventMeta[id];
+ }
+ }
+
+ slotStartDate(k: number) { return new Date(k * this.divider); }
+ slotEndDate(k: number) { return new Date((k + 1) * this.divider); }
+
+ addEvent(e: {start: Date, end: Date, id: string, summary: string}, evict = false) {
+ //console.log('adding event', e);
+ if (this.eventMeta.hasOwnProperty(e.id))
+ this.removeEvent(e);
+ let r = this.dateRangeToCacheKeys(e);
+ let ks = r.start;
+ let ke = r.end;
+ let t = this.cache.length;
+ let keys = new Set();
+ for (let i = ks; i <= ke; i++)
+ {
+ keys.add(i);
+ if (!this.cache.has(i)) t++;
+ }
+ this.eventMeta[e.id] = {
+ keys,
+ summary: e.summary,
+ };
+ if (!evict && t > this.options.maxCachedItems) return;
+ if (ks === ke)
+ this.getSlot(ks)[e.id] = {
+ start: e.start,
+ end: e.end,
+ id: e.id };
+ else
+ {
+ this.getSlot(ks)[e.id] = {
+ start: e.start,
+ end: this.slotEndDate(ks),
+ id: e.id };
+ this.getSlot(ke)[e.id] = {
+ start: this.slotStartDate(ke),
+ end: e.end,
+ id: e.id };
+ for (let k = ks + 1; k < ke; k++)
+ this.getSlot(k)[e.id] = {
+ start: this.slotStartDate(k),
+ end: this.slotEndDate(k),
+ id: e.id};
+ }
+ }
+
+ removeEvent(e: {id: string}) {
+ let keys = this.eventMeta[e.id].keys;
+ keys.forEach(k => delete this.getSlot(k)[e.id]);
+ delete this.eventMeta[e.id];
+ }
+
+ getSlotEvents(k: number, r: {start: Date, end: Date}) {
+ let s = this.getSlot(k);
+ //console.log(s);
+ let results = [];
+ for (let id in s) {
+ if (!(s[id].start >= r.end || s[id].end <= r.start))
+ {
+ results.push({
+ id,
+ start: s[id].start < r.start ? r.start: s[id].start,
+ end: s[id].end > r.end ? r.end: s[id].end,
+ summary: this.eventMeta[id].summary
+ });
+ }
+ }
+ return results;
+ }
+
+ getCachedEvents(_r: {start: Date, end: Date}) {
+ let r = this.dateRangeToCacheKeys(_r);
+ let ks = r.start;
+ let ke = r.end;
+ let results = this.getSlotEvents(ks, _r);
+ for (let k = ks + 1; k < ke; k++)
+ {
+ let s = this.getSlot(k);
+ for (let id in s)
+ results.push({...s[id], summary: this.eventMeta[id].summary});
+ }
+ if (ke > ks)
+ results.push(...this.getSlotEvents(ke, _r));
+ return results;
+ }
+
+ async sync() {
+ try {
+ let token = await this.token;
+ let r = await getEvents(this.calId, token, this.syncToken);
+ let results = await Promise.all(
+ r.results.map(e => e.start ? Promise.resolve(e) : getEvent(this.calId, e.id, token)));
+ results.forEach(e => {
+ e.start = new Date(e.start.dateTime);
+ e.end = new Date(e.end.dateTime);
+ if (e.status === 'confirmed')
+ this.addEvent(e);
+ else if (e.status === 'cancelled')
+ this.removeEvent(e);
+ });
+ this.syncToken = r.nextSyncToken;
+ } catch(err) {
+ if (err === GApiError.invalidSyncToken) {
+ this.syncToken = '';
+ this.sync();
+ } else throw err;
+ }
+ }
+
+ async getEvents(start: Date, end: Date) {
+ let r = this.dateRangeToCacheKeys({ start, end });
+ let query = {
+ start: null as number,
+ end: null as number
+ };
+ for (let k = r.start; k <= r.end; k++)
+ if (!this.cache.has(k))
+ {
+ if (query.start === null)
+ query.start = k;
+ query.end = k;
+ }
+ //console.log(`start: ${start} end: ${end}`);
+ if (query.start !== null)
+ {
+ console.assert(query.start <= query.end);
+ if (query.end - query.start + 1 > this.options.largeQuery) {
+ console.log(`encounter large query, use direct fetch`);
+ let token = await this.token;
+ let r = await getEvents(this.calId, token, null,
+ start.toISOString(), end.toISOString());
+ return r.results.map(e => {
+ console.assert(e.start);
+ e.start = new Date(e.start.dateTime);
+ e.end = new Date(e.end.dateTime);
+ return e;
+ }).filter(e => !(e.start >= end || e.end <= start)).map(e => ({
+ id: e.id,
+ start: e.start < start ? start: e.start,
+ end: e.end > end ? end: e.end,
+ summary: e.summary,
+ }));
+ }
+
+ console.log(`fetching short event list`);
+ let token = await this.token;
+ let r = await getEvents(this.calId, token, null,
+ this.slotStartDate(query.start).toISOString(),
+ this.slotEndDate(query.end).toISOString());
+ r.results.forEach(e => {
+ if (e.status === 'confirmed')
+ {
+ console.assert(e.start);
+ e.start = new Date(e.start.dateTime);
+ e.end = new Date(e.end.dateTime);
+ this.addEvent(e, true);
+ }
+ });
+ if (this.syncToken === '')
+ this.syncToken = r.nextSyncToken;
+ await this.sync();
+ return this.getCachedEvents({ start, end });
+ }
+ else
+ {
+ console.log(`cache hit`);
+ await this.sync();
+ return this.getCachedEvents({ start, end });
+ }
+ }
+}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index adcb634..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Dashboard from './Dashboard';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(<Dashboard />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..f5c836b
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Dashboard from './Dashboard';
+
+ReactDOM.render(<Dashboard />, document.getElementById('root'));
diff --git a/src/msg.js b/src/msg.js
deleted file mode 100644
index 2e72ea7..0000000
--- a/src/msg.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/* global chrome */
-const _updatePatterns = "updatePatterns";
-const _getPatterns = "getPatterns";
-const _updateCalendars = "updateCalendars";
-const _getCalendars = "getCalendars";
-const _getCalEvents = "getCalEvents";
-const _updateConfig = "updateConfig";
-const _getConfig = "getConfig";
-const _getGraphData = "getGraphData";
-
-export const msgType = Object.freeze({
- updatePatterns: Symbol(_updatePatterns),
- getPatterns: Symbol(_getPatterns),
- updateCalendars: Symbol(_updateCalendars),
- getCalendars: Symbol(_getCalendars),
- getCalEvents: Symbol(_getCalEvents),
- updateConfig: Symbol(_updateConfig),
- getConfig: Symbol(_getConfig),
- getGraphData: Symbol(_getGraphData),
-});
-
-function stringifyMsgType(mt) {
- switch (mt) {
- case msgType.updatePatterns: return _updatePatterns;
- case msgType.getPatterns: return _getPatterns;
- case msgType.updateCalendars: return _updateCalendars;
- case msgType.getCalendars: return _getCalendars;
- case msgType.getCalEvents: return _getCalEvents;
- case msgType.updateConfig: return _updateConfig;
- case msgType.getConfig: return _getConfig;
- case msgType.getGraphData: return _getGraphData;
- default: console.error("unreachable");
- }
-}
-
-function parseMsgType(s) {
- switch(s) {
- case _updatePatterns: return msgType.updatePatterns;
- case _getPatterns: return msgType.getPatterns;
- case _updateCalendars: return msgType.updateCalendars;
- case _getCalendars: return msgType.getCalendars;
- case _getCalEvents: return msgType.getCalEvents;
- case _updateConfig: return msgType.updateConfig;
- case _getConfig: return msgType.getConfig;
- case _getGraphData: return msgType.getGraphData;
- default: console.error("unreachable");
- }
-}
-
-export class Msg {
- constructor(id, type, data) {
- this.id = id;
- this.type = type;
- this.data = data;
- }
- genResp(data) { return new Msg(this.id, this.type, data); }
- deflate() {
- return {
- id: this.id,
- type: stringifyMsgType(this.type),
- data: this.data
- }
- }
- static inflate = obj => new Msg(obj.id, parseMsgType(obj.type), obj.data);
-}
-
-export class MsgClient {
- constructor(channelName) {
- let port = chrome.runtime.connect({name: channelName});
- const getCallBack = rcb => this.requestCallback;
- port.onMessage.addListener(function(msg) {
- console.log(msg);
- let rcb = getCallBack(msg.type);
- let cb = rcb.inFlight[msg.id];
- console.assert(cb !== undefined);
- rcb.ids.push(msg.id);
- cb(msg);
- });
- this.port = port;
- this.requestCallback = {inFlight: {}, ids: [], maxId: 0};
- }
-
- sendMsg = ({ type, data }) => {
- let rcb = this.requestCallback;
- let cb;
- let pm = new Promise(resolve => { cb = resolve; });
- let id;
- if (rcb.ids.length > 0) {
- id = rcb.ids.pop();
- } else {
- id = rcb.maxId++;
- }
- rcb.inFlight[id] = cb;
- this.port.postMessage((new Msg(id, type, data)).deflate());
- return pm;
- }
-}
diff --git a/src/msg.ts b/src/msg.ts
new file mode 100644
index 0000000..12eb2bc
--- /dev/null
+++ b/src/msg.ts
@@ -0,0 +1,87 @@
+/* global chrome */
+
+export enum MsgType {
+ updatePatterns = "updatePatterns",
+ getPatterns = "getPatterns",
+ updateCalendars = "updateCalendars",
+ getCalendars = "getCalendars",
+ getCalEvents = "getCalEvents",
+ updateConfig = "updateConfig",
+ getConfig = "getConfig",
+ getGraphData = "getGraphData"
+}
+
+function stringifyMsgType(mt: MsgType): string { return MsgType[mt]; }
+
+function parseMsgType(s: string): MsgType {
+ switch (s) {
+ case "updatePatterns": return MsgType.updatePatterns;
+ case "getPatterns": return MsgType.getPatterns;
+ case "updateCalendars" : return MsgType.updateCalendars;
+ case "getCalendars": return MsgType.getCalendars;
+ case "updateConfig": return MsgType.updateConfig;
+ case "getConfig": return MsgType.getConfig;
+ case "getGraphData": return MsgType.getGraphData;
+ default: console.error("unreachable");
+ }
+}
+
+export class Msg<T> {
+ id: number;
+ mt: MsgType;
+ data: T;
+ constructor(id: number, mt: MsgType, data: T) {
+ this.id = id;
+ this.mt = mt;
+ this.data = data;
+ }
+ genResp(data: T) { return new Msg(this.id, this.mt, data); }
+ deflate() {
+ return {
+ id: this.id,
+ mt: stringifyMsgType(this.mt),
+ data: this.data
+ }
+ }
+ static inflate = <T>(obj: {id: number, mt: MsgType, data: T}) => (
+ new Msg(obj.id, parseMsgType(obj.mt), obj.data)
+ );
+}
+
+export class MsgClient {
+ requestCallback: {
+ ids: number[],
+ inFlight: {[id: number]: (msg: Msg<any>) => any; },
+ maxId: number
+ };
+ port: chrome.runtime.Port;
+
+ constructor(channelName: string) {
+ let port = chrome.runtime.connect({name: channelName});
+ const rcb = this.requestCallback;
+ port.onMessage.addListener(function(msg) {
+ console.log(msg);
+ let cb = rcb.inFlight[msg.id];
+ console.assert(cb !== undefined);
+ rcb.ids.push(msg.id);
+ cb(msg);
+ });
+ this.port = port;
+ this.requestCallback = {inFlight: {}, ids: [], maxId: 0};
+ }
+
+ sendMsg({ mt, data }: { mt: MsgType, data: any }) {
+ const rcb = this.requestCallback;
+ let cb;
+ let pm = new Promise(resolve => { cb = resolve; });
+ let id;
+ if (rcb.ids.length > 0) {
+ id = rcb.ids.pop();
+ } else {
+ id = rcb.maxId++;
+ }
+ rcb.inFlight[id] = cb;
+ this.port.postMessage((new Msg(id, mt, data)).deflate());
+ return pm;
+ }
+}
diff --git a/src/pattern.js b/src/pattern.ts
index 858f2a3..cae35a9 100644
--- a/src/pattern.js
+++ b/src/pattern.ts
@@ -1,5 +1,17 @@
+interface PatternFlat {
+ id: number | string;
+ isRegex: boolean;
+ value: string;
+ label: string;
+}
+
 export class Pattern {
- constructor(id, isRegex, value, label) {
+ id: number | string;
+ isRegex: boolean;
+ value: string;
+ label: string;
+
+ constructor(id: number | string, isRegex: boolean, value: string, label: string) {
 this.id = id;
 this.isRegex = isRegex;
 this.value = value;
@@ -18,11 +30,31 @@ export class Pattern {
 }
 static emptyPattern = () => new Pattern(0, true, '', null);
 static anyPattern = () => new Pattern('any', true, '.*', 'Any');
- static inflate = obj => new Pattern(obj.id, obj.isRegex, obj.value, obj.label);
+ static inflate = (obj: PatternFlat) => new Pattern(obj.id, obj.isRegex, obj.value, obj.label);
+}
+
+interface PatternEntryColor {
+ background: string
+}
+
+interface PatternEntryFlat {
+ name: string;
+ idx: number;
+ cal: PatternFlat;
+ event: PatternFlat;
+ color: PatternEntryColor;
 }
 
 export class PatternEntry {
- constructor(name, idx, calPattern, eventPattern, color) {
+ name: string;
+ idx: number;
+ cal: Pattern;
+ event: Pattern; 
+ color: PatternEntryColor;
+
+ constructor(name: string, idx: number,
+ calPattern: Pattern, eventPattern: Pattern,
+ color: PatternEntryColor) {
 this.name = name;
 this.idx = idx;
 this.cal = calPattern;
@@ -40,8 +72,12 @@ export class PatternEntry {
 };
 }
 
- static defaultPatternEntry = (idx) => new PatternEntry('', idx, Pattern.emptyPattern(), Pattern.anyPattern(), {background: null});
- static inflate = obj => new PatternEntry(
+ static defaultPatternEntry = (idx: number) => (
+ new PatternEntry('', idx,
+ Pattern.emptyPattern(),
+ Pattern.anyPattern(), {background: null}));
+
+ static inflate = (obj: PatternEntryFlat) => new PatternEntry(
 obj.name, obj.idx,
 Pattern.inflate(obj.cal), Pattern.inflate(obj.event),
 obj.color);
diff --git a/src/popup.js b/src/popup.tsx
index c93ce91..5474476 100644
--- a/src/popup.js
+++ b/src/popup.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import * as serviceWorker from './serviceWorker';
 import { withStyles, MuiThemeProvider } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
@@ -11,7 +10,7 @@ import { theme } from './theme';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { PatternEntry } from './pattern';
 import { Duration } from './duration';
-import { msgType, MsgClient } from './msg';
+import { MsgType, MsgClient } from './msg';
 import { StyledPatternPieChart } from './Chart';
 import Divider from '@material-ui/core/Divider';
 import moment from 'moment';
@@ -49,7 +48,7 @@ class Popup extends React.Component {
 
 loadGraphData(sync) {
 return this.msgClient.sendMsg({
- type: msgType.getGraphData,
+ type: MsgType.getGraphData,
 data: { sync }
 }).then(msg => {
 this.setState({ patternGraphData: msg.data.map(d => ({
@@ -111,8 +110,3 @@ class Popup extends React.Component {
 const StyledPopup = withStyles(styles)(Popup);
 
 ReactDOM.render(<StyledPopup />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
diff --git a/src/serviceWorker.js b/src/serviceWorker.js
deleted file mode 100644
index 2283ff9..0000000
--- a/src/serviceWorker.js
+++ /dev/null
@@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read http://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
- window.location.hostname === 'localhost' ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === '[::1]' ||
- // 127.0.0.1/8 is considered localhost for IPv4.
- window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
- )
-);
-
-export function register(config) {
- if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
- // The URL constructor is available in all browsers that support SW.
- const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
- if (publicUrl.origin !== window.location.origin) {
- // Our service worker won't work if PUBLIC_URL is on a different origin
- // from what our page is served on. This might happen if a CDN is used to
- // serve assets; see https://github.com/facebook/create-react-app/issues/2374
- return;
- }
-
- window.addEventListener('load', () => {
- const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
- if (isLocalhost) {
- // This is running on localhost. Let's check if a service worker still exists or not.
- checkValidServiceWorker(swUrl, config);
-
- // Add some additional logging to localhost, pointing developers to the
- // service worker/PWA documentation.
- navigator.serviceWorker.ready.then(() => {
- console.log(
- 'This web app is being served cache-first by a service ' +
- 'worker. To learn more, visit http://bit.ly/CRA-PWA'
- );
- });
- } else {
- // Is not localhost. Just register service worker
- registerValidSW(swUrl, config);
- }
- });
- }
-}
-
-function registerValidSW(swUrl, config) {
- navigator.serviceWorker
- .register(swUrl)
- .then(registration => {
- registration.onupdatefound = () => {
- const installingWorker = registration.installing;
- if (installingWorker == null) {
- return;
- }
- installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
- if (navigator.serviceWorker.controller) {
- // At this point, the updated precached content has been fetched,
- // but the previous service worker will still serve the older
- // content until all client tabs are closed.
- console.log(
- 'New content is available and will be used when all ' +
- 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
- );
-
- // Execute callback
- if (config && config.onUpdate) {
- config.onUpdate(registration);
- }
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log('Content is cached for offline use.');
-
- // Execute callback
- if (config && config.onSuccess) {
- config.onSuccess(registration);
- }
- }
- }
- };
- };
- })
- .catch(error => {
- console.error('Error during service worker registration:', error);
- });
-}
-
-function checkValidServiceWorker(swUrl, config) {
- // Check if the service worker can be found. If it can't reload the page.
- fetch(swUrl)
- .then(response => {
- // Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get('content-type');
- if (
- response.status === 404 ||
- (contentType != null && contentType.indexOf('javascript') === -1)
- ) {
- // No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister().then(() => {
- window.location.reload();
- });
- });
- } else {
- // Service worker found. Proceed as normal.
- registerValidSW(swUrl, config);
- }
- })
- .catch(() => {
- console.log(
- 'No internet connection found. App is running in offline mode.'
- );
- });
-}
-
-export function unregister() {
- if ('serviceWorker' in navigator) {
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister();
- });
- }
-}
diff --git a/src/theme.js b/src/theme.tsx
index 0269fd3..0269fd3 100644
--- a/src/theme.js
+++ b/src/theme.tsx