clean up more

8 files changed, 110 insertions, 96 deletions

diff --git a/src/Dialog.tsx b/src/Dialog.tsx
index 984ecbb..50fd05d 100644
--- a/src/Dialog.tsx
+++ b/src/Dialog.tsx
@@ -15,7 +15,7 @@ function Transition(props: any) {
 
 type AlertDialogProps = {
     open: boolean,
-    handleClose: (r: boolean) => any,
+    handleClose: (r: boolean) => void,
     title: string,
     message: string
 };
diff --git a/src/PatternTable.tsx b/src/PatternTable.tsx
index 2b05287..3aef72f 100644
--- a/src/PatternTable.tsx
+++ b/src/PatternTable.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Theme, withStyles, withTheme, StyleRules } from '@material-ui/core/styles';
 import TextField from '@material-ui/core/TextField';
 import Table from '@material-ui/core/Table';
@@ -11,6 +10,7 @@ import TablePagination from '@material-ui/core/TablePagination';
 import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlined';
 import Popover from '@material-ui/core/Popover';
 import MaterialColorPicker from 'react-material-color-picker';
+
 import { CalendarField, EventField } from './RegexField';
 import { theme, defaultChartColor } from './theme';
 import { PatternEntry, PatternEntryColor } from './pattern';
@@ -52,12 +52,14 @@ let nameFieldstyles = {
     }
 };
 
-function NameField(props: {
-        value: PatternEntry,
-        classes: { colorSample: string },
-        colorOnClick: (e: React.MouseEvent<HTMLDivElement>) => void,
-        onChange: (f: string, v: string) => void
-    }) {
+type NameFieldProps = {
+    value: PatternEntry,
+    classes: { colorSample: string },
+    colorOnClick: (e: React.MouseEvent<HTMLDivElement>) => void,
+    onChange: (f: string, v: string) => void
+};
+
+function NameField(props: NameFieldProps) {
     let color = props.value.color;
     return (
         <span>
@@ -72,25 +74,27 @@ function NameField(props: {
         </span>);
 }
 
-const patternHead = [
+const patternHead: {label: string, elem: any}[] = [
     {label: "Name", elem: withStyles(nameFieldstyles)(NameField)},
     {label: "Calendar", elem: withTheme()(CalendarField)},
-    {label: "Event", elem: withTheme()(EventField)}] as {label: string, elem: any}[];
+    {label: "Event", elem: withTheme()(EventField)}];
+
+type PatternTableProps = {
+    classes: {
+        deleteButton: string,
+        deleteButtonHide: string,
+        deleteButtonShow: string,
+        deleteIcon: string,
+        patternTableWrapper: string,
+        patternTable: string,
+    },
+    calendars: { [id: string]: GCalendarMeta },
+    patterns: PatternEntry[],
+    onRemovePattern: (idx: number) => void,
+    onUpdatePattern: (field: string, idx: number, value: any) => void
+};
 
-class PatternTable extends React.Component<{
-            classes: {
-                deleteButton: string,
-                deleteButtonHide: string,
-                deleteButtonShow: string,
-                deleteIcon: string,
-                patternTableWrapper: string,
-                patternTable: string,
-            },
-            calendars: { [id: string]: GCalendarMeta },
-            patterns: PatternEntry[],
-            onRemovePattern: (idx: number) => void,
-            onUpdatePattern: (field: string, idx: number, value: any) => void
-        }> {
+class PatternTable extends React.Component<PatternTableProps> {
 
     activeColorPattern: number;
     chosenColor: string;
@@ -103,20 +107,19 @@ class PatternTable extends React.Component<{
         colorPickerDefault: defaultChartColor
     };
 
-    handleChangePage = (event: React.MouseEvent<HTMLButtonElement>, page: number) => {
+    handleChangePage = (event: React.MouseEvent<{}>, page: number) => {
         this.setState({ page });
     }
 
-    handleChangeRowsPerPage = (event: any) => {
+    handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({ rowsPerPage: event.target.value });
     }
 
     handleColorPickerClose = () => {
         this.setState({ colorPickerOpen: false });
-        this.activeColorPattern !== null &&
-            this.chosenColor &&
+        this.activeColorPattern !== null && this.chosenColor !== null &&
             this.props.onUpdatePattern('color', this.activeColorPattern,
-                {background: this.chosenColor})
+                { background: this.chosenColor });
     }
 
     render() {
@@ -147,7 +150,7 @@ class PatternTable extends React.Component<{
                                     value={p}
                                     calendars={calendars}
                                     onChange={(field: string, value: any) => this.props.onUpdatePattern(field, p.idx, value)}
-                                    colorOnClick={(event: any) => {
+                                    colorOnClick={(event: React.MouseEvent<{}>) => {
                                         this.activeColorPattern = p.idx;
                                         this.setState({
                                             anchorEl: event.currentTarget,
@@ -178,7 +181,7 @@ class PatternTable extends React.Component<{
                     }}>
                     <MaterialColorPicker
                         initColor={this.state.colorPickerDefault}
-                        onSelect={(event: { target: { value: any }}) => {
+                        onSelect={(event: React.ChangeEvent<HTMLInputElement>) => {
                             console.log("select");
                             this.chosenColor = event.target.value;
                         }}
diff --git a/src/RegexField.tsx b/src/RegexField.tsx
index 9483103..77c57ab 100644
--- a/src/RegexField.tsx
+++ b/src/RegexField.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Theme, withStyles } from '@material-ui/core/styles';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import FormControl from '@material-ui/core/FormControl';
+
 import { Pattern, PatternEntry } from './pattern';
 import { GCalendarMeta } from './gapi';
 
@@ -17,16 +17,18 @@ const styles = (theme: Theme) => ({
     }
 });
 
-class RegexField extends React.Component<{
-            classes: {
-                fieldRegex: string,
-                fieldNoRegex: string
-            },
-            options: {[id: string]: Pattern},
-            theme: Theme,
-            value: Pattern,
-            onChange: (p: Pattern) => void
-        }>{
+type RegexFieldProps = {
+    classes: {
+        fieldRegex: string,
+        fieldNoRegex: string
+    },
+    options: {[id: string]: Pattern},
+    theme: Theme,
+    value: Pattern,
+    onChange: (p: Pattern) => void
+};
+
+class RegexField extends React.Component<RegexFieldProps> {
     render() {
         const { classes } = this.props;
         let items: React.ReactElement<typeof MenuItem>[] = [];
@@ -39,7 +41,7 @@ class RegexField extends React.Component<{
                 <span style={{color: this.props.theme.palette.primary.dark}}>Custom</span>;
             items.push(<MenuItem key={id} value={id}>{label}</MenuItem>);
         }
-        const selectOnClick = (event: { target: { value: any }}) => {
+        const selectOnClick = (event: React.ChangeEvent<HTMLSelectElement>) => {
             let value;
             if (pitems[event.target.value].label == null) {
                 value = new Pattern(0, true,
@@ -52,8 +54,9 @@ class RegexField extends React.Component<{
             this.props.onChange(value);
         };
 
-        const regexTextOnChange = (event: { target: { value: any }}) => this.props.onChange(
-            new Pattern(0, true, event.target.value, null));
+        const regexTextOnChange = (event: React.ChangeEvent<HTMLInputElement>) => (
+            this.props.onChange(new Pattern(0, true, event.target.value, null))
+        );
 
         const className = this.props.value.isRegex ? classes.fieldRegex: classes.fieldNoRegex;
         return (
@@ -76,12 +79,14 @@ class RegexField extends React.Component<{
 
 const RegexFieldWithStyles = withStyles(styles)(RegexField);
 
-export function CalendarField(props: {
-            calendars: {[id: string]: GCalendarMeta},
-            theme: Theme,
-            onChange: (field: string, value: Pattern) => void,
-            value: PatternEntry
-        }) {
+type CalendarFieldProps = {
+    calendars: {[id: string]: GCalendarMeta},
+    theme: Theme,
+    onChange: (field: string, value: Pattern) => void,
+    value: PatternEntry
+};
+
+export function CalendarField(props: CalendarFieldProps) {
     let options: {[id: string]: Pattern} = {};
     for (let id in props.calendars) {
         options[id] = new Pattern(id, false,
@@ -96,11 +101,13 @@ export function CalendarField(props: {
             theme={props.theme} />);
 }
 
-export function EventField(props: {
-            theme: Theme,
-            value: PatternEntry,
-            onChange: (field: string, value: Pattern) => void
-        }) {
+type EventFieldProps = {
+    theme: Theme,
+    value: PatternEntry,
+    onChange: (field: string, value: Pattern) => void
+};
+
+export function EventField(props: EventFieldProps) {
     let wildcard = Pattern.anyPattern();
     let options: { [id: string]: Pattern } = {};
     options[wildcard.id] = wildcard;
diff --git a/src/Settings.tsx b/src/Settings.tsx
index ecef23b..b02cd25 100644
--- a/src/Settings.tsx
+++ b/src/Settings.tsx
@@ -26,7 +26,7 @@ import AlertDialog from './Dialog';
 import * as gapi from './gapi';
 import { MsgType, MsgClient } from './msg';
 import { Pattern, PatternEntry, PatternEntryFlat } from './pattern';
-import { Duration, TrackPeriod, TrackPeriodFlat } from './duration';
+import { Duration, TimeUnit, TrackPeriod, TrackPeriodFlat } from './duration';
 
 const styles = (theme: Theme): StyleRules => ({
     tableHead: {
@@ -67,13 +67,17 @@ type TrackedPeriodProps = {
 };
 
 class TrackedPeriod extends React.Component<TrackedPeriodProps> {
-    valueOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => {
-        onChange(new Duration(event.target.value, old.unit));
-    }
+    valueOnChange = (old: Duration, onChange: (d: Duration) => void) => (
+        (event: React.ChangeEvent<HTMLSelectElement>) => {
+            onChange(new Duration(event.target.value, old.unit));
+        }
+    );
 
-    unitOnChange = (old: Duration, onChange: (d: Duration) => void) => (event: any) => {
-        onChange(new Duration(old.value, event.target.value));
-    }
+    unitOnChange = (old: Duration, onChange: (d: Duration) => void) => (
+        (event: React.ChangeEvent<HTMLSelectElement>) => {
+            onChange(new Duration(old.value, event.target.value as TimeUnit));
+        }
+    );
 
     static styles = {
         periodName: {
@@ -450,6 +454,4 @@ class Settings extends React.Component<SettingsProps> {
     }
 }
 
-const StyledSettings = withStyles(styles)(Settings);
-
-export default StyledSettings;
+export default withStyles(styles)(Settings);
diff --git a/src/Snackbar.tsx b/src/Snackbar.tsx
index f700422..33a47fe 100644
--- a/src/Snackbar.tsx
+++ b/src/Snackbar.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Theme, withStyles } from '@material-ui/core/styles';
 import amber from '@material-ui/core/colors/amber';
@@ -39,21 +38,23 @@ const styles = (theme: Theme) => ({
 
 export type SnackbarVariant = 'error' | 'warning';
 
-function CustomSnackbar(props: {
-        classes: {
-            error: string,
-            warning: string,
-            message: string,
-            icon: string,
-            iconVariant: string,
-            close: string
-        },
-        variant: SnackbarVariant,
-        className?: string,
-        open: boolean,
+type CustomSnackbarProps = {
+    classes: {
+        error: string,
+        warning: string,
         message: string,
-        onClose: (event: React.SyntheticEvent<{}>, reason?: string) => void
-    }) {
+        icon: string,
+        iconVariant: string,
+        close: string
+    },
+    variant: SnackbarVariant,
+    className?: string,
+    open: boolean,
+    message: string,
+    onClose: (event: React.SyntheticEvent<{}>, reason?: string) => void
+};
+
+function CustomSnackbar(props: CustomSnackbarProps) {
     const { classes, className, message, variant, open, onClose } = props;
     const Icon = variantIcon[variant];
     return (
diff --git a/src/msg.ts b/src/msg.ts
index 158fd8d..efbadb5 100644
--- a/src/msg.ts
+++ b/src/msg.ts
@@ -52,7 +52,7 @@ export class Msg<T> {
 export class MsgClient {
     requestCallback: {
         ids: number[],
-        inFlight: {[id: number]: (msg: Msg<any>) => any; },
+        inFlight: {[id: number]: (msg: Msg<any>) => void; },
         maxId: number
     };
     port: chrome.runtime.Port;
diff --git a/src/popup.tsx b/src/popup.tsx
index ce9f891..20f08e0 100644
--- a/src/popup.tsx
+++ b/src/popup.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Theme, withStyles, MuiThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import RefreshIcon from '@material-ui/icons/Refresh';
+import Divider from '@material-ui/core/Divider';
+
 import Logo from './Logo';
-import Typography from '@material-ui/core/Typography';
 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 { StyledPatternPieChart } from './Chart';
+import { MsgType, MsgClient } from './msg';
 import { GraphData } from './graph';
-import Divider from '@material-ui/core/Divider';
 import moment from 'moment';
 
 function openOptions() {
@@ -35,19 +34,21 @@ const styles = (theme: Theme) => ({
     },
 });
 
-class Popup extends React.Component<{
-            classes: {
-                content: string,
-                buttons: string,
-                buttonSpacer: string
-            }
-        }> {
+type PopupProps = {
+    classes: {
+        content: string,
+        buttons: string,
+        buttonSpacer: string
+    }
+};
+
+class Popup extends React.Component<PopupProps> {
     msgClient: MsgClient;
     state = {
         patternGraphData: [] as GraphData[],
         loading: false,
     };
-    constructor(props: any) {
+    constructor(props: PopupProps) {
         super(props);
         this.msgClient = new MsgClient('main');
         this.state.loading = true;
diff --git a/src/theme.tsx b/src/theme.ts
index 0269fd3..0269fd3 100644
--- a/src/theme.tsx
+++ b/src/theme.ts