Update react, typescript recompose and etc.

package.json

@@ -10,17 +10,17 @@
     "material-ui": "^0.20.0",
     "moment": "^2.19.3",
     "node-rsa": "^0.4.2",
-    "react": "^16.2.0",
-    "react-big-calendar": "^0.18.0",
+    "react": "^16.5.2",
+    "react-big-calendar": "^0.20.1",
     "react-datetime": "^2.11.1",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.4.0",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-scripts-ts": "2.13.0",
-    "recompose": "^0.26.0",
-    "redux": "^3.7.2",
-    "redux-actions": "^2.2.1",
+    "react-scripts-ts": "2.17.0",
+    "recompose": "^0.30.0",
+    "redux": "^4.0.0",
+    "redux-actions": "^2.6.1",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.4.0",
     "redux-thunk": "^2.2.0",
@@ -41,18 +41,19 @@
     "@types/material-ui": "^0.18.5",
     "@types/node": "^8.0.53",
     "@types/node-rsa": "^0.4.1",
-    "@types/react": "^16.0.25",
-    "@types/react-big-calendar": "^0.18.0",
-    "@types/react-dom": "^16.0.3",
+    "@types/react": "^16.4.14",
+    "@types/react-big-calendar": "^0.20.0",
+    "@types/react-dom": "^16.0.8",
     "@types/react-redux": "^5.0.14",
     "@types/react-router": "^4.0.19",
     "@types/react-router-dom": "^4.2.3",
-    "@types/recompose": "^0.24.4",
+    "@types/recompose": "^0.27.0",
+    "@types/redux": "^3.6.0",
     "@types/redux-actions": "^2.2.3",
     "@types/redux-logger": "^3.0.5",
     "@types/sjcl": "^1.0.28",
     "@types/urijs": "^1.15.34",
     "@types/uuid": "^3.4.3",
-    "typescript": "^2.7.2"
+    "typescript": "2.9.2"
   }
 }

src/App.tsx

@@ -163,7 +163,7 @@ class App extends React.PureComponent {
   }
 
   refresh() {
-    store.store.dispatch(actions.fetchAll(this.props.credentials.value!, this.props.entries));
+    store.store.dispatch<any>(actions.fetchAll(this.props.credentials.value!, this.props.entries));
   }
 
   render() {

src/LoginGate.tsx

@@ -26,7 +26,7 @@ class LoginGate extends React.Component {
 
   onFormSubmit(username: string, password: string, encryptionPassword: string, serviceApiUrl?: string) {
     serviceApiUrl = serviceApiUrl ? serviceApiUrl : C.serviceApiBase;
-    store.dispatch(login(username, password, encryptionPassword, serviceApiUrl));
+    store.dispatch<any>(login(username, password, encryptionPassword, serviceApiUrl));
   }
 
   onEncryptionFormSubmit(encryptionPassword: string) {

src/Pim/index.tsx

@@ -4,7 +4,7 @@ import RaisedButton from 'material-ui/RaisedButton';
 import IconEdit from 'material-ui/svg-icons/editor/mode-edit';
 import IconChangeHistory from 'material-ui/svg-icons/action/change-history';
 
-import { withRouter } from 'react-router';
+import { RouteComponentProps, withRouter } from 'react-router';
 
 import * as EteSync from '../api/EteSync';
 
@@ -86,20 +86,20 @@ const ItemChangeLog = pure((props: any) => {
   );
 });
 
-const CollectionRoutes = withRouter(
-  class CollectionRoutesInner extends React.PureComponent {
-    props: {
-      syncInfo: SyncInfo,
-      routePrefix: string,
-      collections: Array<EteSync.CollectionInfo>,
-      componentEdit: any,
-      componentView: any,
-      items: {[key: string]: PimType},
-      onItemSave: (item: PimType, journalUid: string, originalContact?: PimType) => void;
-      onItemDelete: (item: PimType, journalUid: string) => void;
-      onItemCancel: () => void;
-    };
+type CollectionRoutesPropsType = RouteComponentProps<{}> & {
+  syncInfo: SyncInfo,
+  routePrefix: string,
+  collections: Array<EteSync.CollectionInfo>,
+  componentEdit: any,
+  componentView: any,
+  items: {[key: string]: PimType},
+  onItemSave: (item: PimType, journalUid: string, originalContact?: PimType) => void;
+  onItemDelete: (item: PimType, journalUid: string) => void;
+  onItemCancel: () => void;
+};
 
+const CollectionRoutes = withRouter(
+  class CollectionRoutesInner extends React.PureComponent<CollectionRoutesPropsType> {
     render() {
       const props = this.props;
       const ComponentEdit = props.componentEdit;

src/SideMenu/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { List, ListItem, ListSubheader, ListDivider } from '../widgets/List';
 import ActionCode from 'material-ui/svg-icons/action/code';
 import ActionHome from 'material-ui/svg-icons/action/home';
@@ -10,8 +10,6 @@ import LogoutIcon from 'material-ui/svg-icons/action/power-settings-new';
 
 const logo = require('../images/logo.svg');
 
-import { History } from 'history';
-
 import SideMenuJournals from './SideMenuJournals';
 import ErrorBoundary from '../components/ErrorBoundary';
 
@@ -27,16 +25,13 @@ interface PropsType {
   onCloseDrawerRequest: () => void;
 }
 
-interface PropsTypeInner extends PropsType {
+type PropsTypeInner = RouteComponentProps<{}> & PropsType & {
   journals: JournalsType;
   userInfo: UserInfoData;
-  history: History;
-}
-
-class SideMenu extends React.PureComponent {
-  props: PropsTypeInner;
+};
 
-  constructor(props: any) {
+class SideMenu extends React.PureComponent<PropsTypeInner> {
+  constructor(props: PropsTypeInner) {
     super(props);
     this.logout = this.logout.bind(this);
     this.journalClicked = this.journalClicked.bind(this);

src/SyncGate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
-import { Route, Switch, Redirect, withRouter } from 'react-router';
+import { Route, Switch, Redirect, RouteComponentProps, withRouter } from 'react-router';
 
 import { List, Map } from 'immutable';
 import { createSelector } from 'reselect';
@@ -32,11 +32,11 @@ interface PropsType {
   etesync: CredentialsData;
 }
 
-interface PropsTypeInner extends PropsType {
+type PropsTypeInner = RouteComponentProps<{}> & PropsType & {
   journals: JournalsType;
   entries: EntriesType;
   userInfo: UserInfoType;
-}
+};
 
 const syncInfoSelector = createSelector(
   (props: PropsTypeInner) => props.etesync,
@@ -91,10 +91,8 @@ const syncInfoSelector = createSelector(
 const PimRouter = withRouter(Pim);
 const JournalRouter = withRouter(Journal);
 
-class SyncGate extends React.PureComponent {
-  props: PropsTypeInner;
-
-  constructor(props: any) {
+class SyncGate extends React.PureComponent<PropsTypeInner> {
+  constructor(props: PropsTypeInner) {
     super(props);
   }
 

src/components/Calendar.tsx

@@ -9,7 +9,7 @@ import { EventType } from '../pim-types';
 import './Calendar.css';
 
 moment.locale('en-gb');
-BigCalendar.momentLocalizer(moment);
+const calendarLocalizer = BigCalendar.momentLocalizer(moment);
 
 function eventPropGetter(event: EventType) {
   return {
@@ -64,6 +64,7 @@ class Calendar extends React.PureComponent {
       <div style={{width: '100%', height: 'calc(100vh - 230px)', minHeight: 500}}>
         <BigCalendar
           defaultDate={new Date()}
+          localizer={calendarLocalizer}
           events={this.props.entries}
           selectable={true}
           onSelectEvent={this.props.onItemClick as any}

src/components/ContactEdit.tsx

@@ -319,12 +319,12 @@ class ContactEdit extends React.PureComponent {
       },
       fullWidth: {
         width: '100%',
-        boxSizing: 'border-box',
+        boxSizing: 'border-box' as any,
       },
       submit: {
         marginTop: 40,
         marginBottom: 20,
-        textAlign: 'right',
+        textAlign: 'right' as any,
       },
     };
 

src/components/EncryptionLoginForm.tsx

@@ -63,7 +63,7 @@ class EncryptionLoginForm extends React.PureComponent {
       },
       submit: {
         marginTop: 40,
-        textAlign: 'right',
+        textAlign: 'right' as any,
       },
     };
 

src/components/EventEdit.tsx

@@ -196,12 +196,12 @@ class EventEdit extends React.PureComponent {
       },
       fullWidth: {
         width: '100%',
-        boxSizing: 'border-box',
+        boxSizing: 'border-box' as any,
       },
       submit: {
         marginTop: 40,
         marginBottom: 20,
-        textAlign: 'right',
+        textAlign: 'right' as any,
       },
     };
 

src/components/LoginForm.tsx

@@ -125,7 +125,7 @@ class LoginForm extends React.PureComponent {
       },
       submit: {
         marginTop: 40,
-        textAlign: 'right',
+        textAlign: 'right' as any,
       },
     };
 

src/components/SearchableAddressBook.tsx

@@ -39,7 +39,7 @@ class SearchableAddressBook extends React.PureComponent {
   render() {
     const {
       entries,
-      ...rest,
+      ...rest
     } = this.props;
 
     const reg = new RegExp(this.state.searchQuery, 'i');

src/components/SecondaryHeader.tsx

@@ -8,7 +8,7 @@ export default (props: {text: string}) => {
         backgroundColor: getPalette('primary1Color'),
         color: getPalette('alternateTextColor'),
         padding: 15,
-        textAlign: 'center',
+        textAlign: 'center' as any,
       },
       headerText: {
         margin: 0,

src/etesync-helpers.ts

@@ -22,7 +22,7 @@ export function createJournalEntry(
   let prevUid: string | null = null;
 
   const entries = existingEntries;
-  const last = entries.last();
+  const last = entries.last() as EteSync.Entry;
   if (last) {
     prevUid = last.uid;
   }

src/store/actions.ts

@@ -131,7 +131,7 @@ export function fetchAll(etesync: CredentialsData, currentEntries: EntriesType)
         let prevUid: string | null = null;
         const entries = currentEntries.get(journal.uid);
         if (entries && entries.value) {
-          const last = entries.value.last();
+          const last = entries.value.last() as EteSync.Entry;
           prevUid = (last) ? last.uid : null;
         }
 

src/types/react.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-
-declare module 'react' {
-  export class Fragment extends React.Component {
-  }
-}

src/widgets/ConfirmationDialog.tsx

@@ -10,7 +10,7 @@ export default pure((_props: any) => {
     onCancel,
     onOk,
     labelOk,
-    ...props,
+    ...props
   } = _props;
   const actions = [
     (

src/widgets/List.tsx

@@ -65,7 +65,7 @@ export const ListSubheader = pure((props: any) => (
 export const ListDivider = pure((_props: any) => {
   const {
     inset,
-    ...props,
+    ...props
   } = _props;
   return (
     <li>

src/widgets/withSpin.tsx

@@ -7,7 +7,7 @@ const withSpin = (Component: any) => {
   return pure((_props: any) => {
     const {
       spin,
-      ...props,
+      ...props
     } = _props;
     return (
       <Component {...props} className={spin ? 'withSpin-spin' : ''} />

tsconfig.prod.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./tsconfig.json"
+}