remove coupling by moving implementation details to component

Author: piotrwitek

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

@@ -5,15 +5,15 @@ import { CurrencySelect } from './currency-select';
 import { CurrencyInput } from './currency-input';
 
 interface LocalProps {
-  currencies: Object;
+  currencies: string[];
   baseCurrency: string;
   targetCurrency: string;
   baseValue: number;
   targetValue: number;
-  onBaseCurrencyChange: (newCurrency: string) => void;
-  onTargetCurrencyChange: (newCurrency: string) => void;
-  onBaseValueChange: (newCurrency: string) => void;
-  onTargetValueChange: (newCurrency: string) => void;
+  onBaseCurrencyChange: (newCurrency: string) => FluxStandardAction<string>;
+  onTargetCurrencyChange: (newCurrency: string) => FluxStandardAction<string>;
+  onBaseValueChange: (newCurrency: string) => FluxStandardAction<string>;
+  onTargetValueChange: (newCurrency: string) => FluxStandardAction<string>;
 }
 
 interface LocalState {
@@ -38,7 +38,7 @@ export class CurrencyConverter extends React.Component<LocalProps, LocalState> {
         <div className="o-grid__cell">
           <CurrencySelect
             currencies={currencies}
-            selectedCurrency={baseCurrency}
+            value={baseCurrency}
             onChange={onBaseCurrencyChange}
             />
           <CurrencyInput
@@ -49,7 +49,7 @@ export class CurrencyConverter extends React.Component<LocalProps, LocalState> {
         <div className="o-grid__cell">
           <CurrencySelect
             currencies={currencies}
-            selectedCurrency={targetCurrency}
+            value={targetCurrency}
             onChange={onTargetCurrencyChange}
             />
           <CurrencyInput

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

@@ -1,14 +1,23 @@
 import * as React from 'react';
+interface IProps {
+  value: number;
+  onChange: (newValue: string) => FluxStandardAction<string>;
+}
+
+export function CurrencyInput({value = 0, onChange = null}: IProps) {
+
+  const handleChange = (ev) => {
+    onChange(ev.target.value);
+  };
 
-export function CurrencyInput({value, onChange}) {
   return (
     <div className="u-letter-box--medium">
       <input
         className="c-field c-field--xlarge"
         type="text"
         value={value}
-        onChange={onChange}
-        onBlur={onChange}
+        onChange={handleChange}
+        onBlur={handleChange}
         />
     </div>
   );

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

@@ -1,9 +1,21 @@
 import * as React from 'react';
+interface IProps {
+  currencies: string[];
+  value: string;
+  onChange: (newValue: string) => FluxStandardAction<string>;
+}
+
+export function CurrencySelect({currencies = [], value = null, onChange = null}: IProps) {
+
+  const handleChange = (ev) => {
+    onChange(ev.target.value);
+  };
 
-export function CurrencySelect({currencies, selectedCurrency, onChange}) {
   return (
-    <select className="c-choice c-choice--padded"
-      value={selectedCurrency} onChange={onChange}>
+    <select
+      className="c-choice c-choice--padded"
+      value={value}
+      onChange={handleChange}>
       {currencies.map(currency =>
         <option key={currency}>{currency}</option>
       )}

src/reducers/currency-converter-reducer.tsx

@@ -21,7 +21,7 @@ const initialState = Immutable({
   targetValue: 0
 });
 
-export default function reducer(state = initialState, action: FluxStandardAction<any> = {}) {
+export default function reducer(state = initialState, action: FluxStandardAction<any>) {
   switch (action.type) {
     case UPDATE_BASE_CURRENCY:
       return state.merge({