migrated to TS 2.1 with noImplicitAny + strictNullChecks

Author: piotrwitek

src/app.tsx

@@ -10,17 +10,17 @@ import { HomeContainer } from './containers/home-container/index';
 import { CssModulesContainer } from './containers/css-modules-container/index';
 import CurrencyConverterContainer from './containers/currency-converter-container/index';
 
-import { store } from './store';
+import { store } from './store/index';
 const history = syncHistoryWithStore(hashHistory, store) as any;
 
 function App() {
   return (
     <Provider store={store}>
       <Router history={history}>
         <Route component={MainLayout}>
-          <Route path="/" component={HomeContainer}/>
-          <Route path="/currency-converter" component={CurrencyConverterContainer}/>
-          <Route path="/css-modules" component={CssModulesContainer}/>
+          <Route path="/" component={HomeContainer} />
+          <Route path="/currency-converter" component={CurrencyConverterContainer} />
+          <Route path="/css-modules" component={CssModulesContainer} />
         </Route>
       </Router>
     </Provider>

src/containers/currency-converter-container/components/currency-converter.tsx

@@ -1,25 +1,26 @@
 // lib imports
 import * as React from 'react';
+import { Action } from 'redux-actions';
 
 import { CurrencySelect } from './currency-select';
 import { CurrencyInput } from './currency-input';
 
-interface LocalProps {
+interface IProps {
   currencies: string[];
   baseCurrency: string;
   targetCurrency: string;
-  baseValue: number;
-  targetValue: number;
-  onBaseCurrencyChange: (newCurrency: string) => FluxStandardAction<string>;
-  onTargetCurrencyChange: (newCurrency: string) => FluxStandardAction<string>;
-  onBaseValueChange: (newCurrency: string) => FluxStandardAction<string>;
-  onTargetValueChange: (newCurrency: string) => FluxStandardAction<string>;
+  baseValue: string;
+  targetValue: string;
+  onBaseCurrencyChange: (payload: string) => Action<string>;
+  onTargetCurrencyChange: (payload: string) => Action<string>;
+  onBaseValueChange: (payload: string) => Action<string>;
+  onTargetValueChange: (payload: string) => Action<string>;
 }
 
-interface LocalState {
+interface IState {
 }
 
-export class CurrencyConverter extends React.Component<LocalProps, LocalState> {
+export class CurrencyConverter extends React.Component<IProps, IState> {
   render(): JSX.Element {
     const {
       currencies,
@@ -56,8 +57,15 @@ export class CurrencyConverter extends React.Component<LocalProps, LocalState> {
   }
 }
 
+interface ICurrencyInputGroup {
+  currencies: string[];
+  currencyType: string;
+  currencyValue: string;
+  onCurrencyTypeChange: (payload: string) => Action<string>;
+  onCurrencyValueChange: (payload: string) => Action<string>;
+}
 function CurrencyInputGroup({currencies, currencyType, currencyValue,
-  onCurrencyTypeChange, onCurrencyValueChange}) {
+  onCurrencyTypeChange, onCurrencyValueChange}: ICurrencyInputGroup) {
   return (
     <div className="c-input-group">
       <div className="o-field o-field--fixed" style={{ width: '80px' }}>

src/containers/currency-converter-container/components/currency-input.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
+import { Action } from 'redux-actions';
+
 interface IProps {
-  value: number;
-  onChange: (newValue: string) => FluxStandardAction<string>;
+  value: string;
+  onChange: (newValue: string) => Action<string>;
 }
 
-export function CurrencyInput({value = 0, onChange = null}: IProps) {
+export function CurrencyInput({value = 0, onChange}: IProps) {
 
-  const handleChange = (ev) => {
+  const handleChange = (ev: React.SyntheticEvent<HTMLInputElement>) => {
     onChange(ev.target.value);
   };
 

src/containers/currency-converter-container/components/currency-select.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { Action } from 'redux-actions';
+
 interface IProps {
   currencies: string[];
   value: string;
-  onChange: (newValue: string) => FluxStandardAction<string>;
+  onChange: (newValue: string) => Action<string>;
 }
 
-export function CurrencySelect({currencies = [], value = null, onChange = null}: IProps) {
+export function CurrencySelect({currencies = [], value, onChange}: IProps) {
 
-  const handleChange = (ev) => {
+  const handleChange = (ev: React.SyntheticEvent<HTMLSelectElement>) => {
     onChange(ev.target.value);
   };
 

src/containers/currency-converter-container/index.tsx

@@ -1,27 +1,32 @@
 // lib imports
 import * as React from 'react';
-import { bindActionCreators } from 'redux';
+import { Action } from 'redux-actions';
 import { connect } from 'react-redux';
 // components imports
+import { IRootReducer } from '../../store';
+import { ICurrencyRates } from '../../store/currency-rates-reducer';
+import { ICurrencyConverter } from '../../store/currency-converter-reducer';
 import { PageHeader } from '../../components/page-header';
 import { PageSection } from '../../components/page-section';
-import * as currencyConverterActions from '../../reducers/currency-converter-reducer';
+import * as currencyConverterActions from '../../store/currency-converter-reducer';
 import { CurrencyConverter } from './components/currency-converter';
 
 interface IProps {
-  currencyConverter: any;
-  currencyRates: any;
-  actions: any;
+  currencyRates: ICurrencyRates;
+  currencyConverter: ICurrencyConverter;
+  updateBaseCurrency: (payload: string) => Action<string>;
+  updateBaseValue: (payload: string) => Action<string>;
+  updateTargetCurrency: (payload: string) => Action<string>;
+  updateTargetValue: (payload: string) => Action<string>;
 }
-
 interface IState {
 }
 
 export class CurrencyConverterContainer extends React.Component<IProps, IState> {
   render() {
     const { baseCurrency, targetCurrency, baseValue, targetValue } = this.props.currencyConverter;
     const { currencies } = this.props.currencyRates;
-    const { actions } = this.props;
+    const { updateBaseCurrency, updateBaseValue, updateTargetCurrency, updateTargetValue } = this.props;
 
     return (
       <article>
@@ -31,29 +36,22 @@ export class CurrencyConverterContainer extends React.Component<IProps, IState>
           <CurrencyConverter currencies={currencies}
             baseCurrency={baseCurrency} targetCurrency={targetCurrency}
             baseValue={baseValue} targetValue={targetValue}
-            onBaseCurrencyChange={actions.updateBaseCurrency}
-            onTargetCurrencyChange={actions.updateTargetCurrency}
-            onBaseValueChange={actions.updateBaseValue}
-            onTargetValueChange={actions.updateTargetValue}
+            onBaseCurrencyChange={updateBaseCurrency}
+            onTargetCurrencyChange={updateTargetCurrency}
+            onBaseValueChange={updateBaseValue}
+            onTargetValueChange={updateTargetValue}
             />
         </section>
       </article>
     );
   }
 }
 
-function mapStateToProps(state) {
-  return {
-    currencyConverter: state.currencyConverter,
-    currencyRates: state.currencyRates
-  };
-}
+const stateToProps = (storeState: IRootReducer) => ({
+  currencyRates: storeState.currencyRates,
+  currencyConverter: storeState.currencyConverter
+});
 
-const actions = Object.assign({}, currencyConverterActions);
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch)
-  };
-}
+const actionsToProps = Object.assign({}, currencyConverterActions);
 
-export default connect(mapStateToProps, mapDispatchToProps)(CurrencyConverterContainer);
+export default connect(stateToProps, actionsToProps)(CurrencyConverterContainer);

src/reducers/index.tsx

@@ -6,7 +6,7 @@ const FIXER_API_URL = 'https://api.fixer.io/';
 
 // http://api.fixer.io/latest
 export async function getLatest(baseCurrency?: string):
-  Promise<IFixerServiceResponse> {
+  Promise<IFixerServiceResponse | null> {
   let fixerLatestRates = FIXER_API_URL + 'latest';
   if (baseCurrency) {
     fixerLatestRates += '?base=' + baseCurrency;
@@ -18,13 +18,13 @@ export async function getLatest(baseCurrency?: string):
     return response.json();
   } catch (err) {
     logRejection(err);
-    return undefined;
+    return null;
   }
 }
 
 // http://api.fixer.io/2000-01-03
 export async function getByDate(date: Date, baseCurrency?: string):
-  Promise<IFixerServiceResponse> {
+  Promise<IFixerServiceResponse | null> {
   let fixerRatesByDate = FIXER_API_URL + date.toISOString().slice(0, 10);
   if (baseCurrency) {
     fixerRatesByDate += '?base=' + baseCurrency;
@@ -36,6 +36,6 @@ export async function getByDate(date: Date, baseCurrency?: string):
     return response.json();
   } catch (err) {
     logRejection(err);
-    return undefined;
+    return null;
   }
 }

src/services/fixer/currency-rates.tsx

@@ -4,6 +4,7 @@ const INITIAL_DATE = (new Date()).toISOString();
 
 export class AppStore {
   // initial state
+  [key: string]: any;
   currencies = '{}';
   fromCurrency = 'SEK';
   toCurrency = 'EUR';
@@ -16,9 +17,9 @@ export class AppStore {
     this.load();
   }
 
-  save(stateObject) {
+  save(stateObject: any) {
     // remember to stringify the objects that you want to store
-    Object.keys(stateObject).forEach(key => {
+    Object.keys(stateObject).forEach((key) => {
       const storageKey = STORAGE_PREFIX + key;
       const stateItem = stateObject[key];
       if (stateItem) {

src/services/local-storage/app-store.tsx

@@ -1,5 +1,5 @@
-import { createAction } from 'redux-actions';
-import Immutable from 'seamless-immutable';
+import { createAction, Action } from 'redux-actions';
+import * as Immutable from 'seamless-immutable';
 
 // Action Types - LOAD, CREATE, UPDATE, REMOVE
 const UPDATE_BASE_CURRENCY = 'currencyConverter/UPDATE_BASE_CURRENCY';
@@ -10,18 +10,24 @@ const UPDATE_TARGET_VALUE = 'currencyConverter/UPDATE_TARGET_VALUE';
 // Action Creators
 export const updateBaseCurrency = createAction<string>(UPDATE_BASE_CURRENCY);
 export const updateTargetCurrency = createAction<string>(UPDATE_TARGET_CURRENCY);
-export const updateBaseValue = createAction<number>(UPDATE_BASE_VALUE);
-export const updateTargetValue = createAction<number>(UPDATE_TARGET_VALUE);
+export const updateBaseValue = createAction<string>(UPDATE_BASE_VALUE);
+export const updateTargetValue = createAction<string>(UPDATE_TARGET_VALUE);
 
 // Reducer
-const initialState = Immutable({
+export interface ICurrencyConverter {
+  baseCurrency: string;
+  targetCurrency: string;
+  baseValue: string;
+  targetValue: string;
+}
+const initialState: ICurrencyConverter = {
   baseCurrency: 'PLN',
   targetCurrency: 'SEK',
-  baseValue: 0,
-  targetValue: 0
-});
+  baseValue: '0',
+  targetValue: '0'
+};
 
-export default function reducer(state = initialState, action: FluxStandardAction<any>) {
+export default function reducer(state = Immutable.from(initialState), action: Action<any>) {
   switch (action.type) {
     case UPDATE_BASE_CURRENCY:
       return state.merge({