imported app from: https://github.com/piotrwitek/react-currency-converter/tree/redux

Author: piotrwitek

src/app.tsx

@@ -1,24 +1,32 @@
-// auto create app container if missing
-let appContainer = document.getElementById('app-container');
-if (appContainer == null) {
-  appContainer = document.createElement('div');
-  appContainer.id = 'app-container';
-  document.body.appendChild(appContainer);
-}
 // lib imports
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-// components imports
-import { Main } from './components/main';
-import { AppStore, UserData } from './stores/app-store';
+import { Provider } from 'react-redux';
+import { Router, Route, hashHistory } from 'react-router';
+import { syncHistoryWithStore } from 'react-router-redux';
+// app imports
+import { MainLayout } from './layouts/main-layout';
+import { HomeContainer } from './containers/home-container/index';
+import { AboutContainer } from './containers/about-container/index';
+import CurrencyConverterContainer from './containers/currency-converter-container/index';
 
-const message = 'React / Redux / TypeScript - starter-kit';
-const appStore = new AppStore(new UserData('Piotr', 32));
-export var app: any = ReactDOM.render(<Main welcomeMessage={message} appStore={appStore} />, appContainer);
+import { store } from './store';
+const history = syncHistoryWithStore(hashHistory, store) as any;
 
-// here you can customize hot-module-reload hook
-// you could also copy to other modules
-export function __reload(prev) {
-  if (prev.app.state)
-    app.setState(prev.app.state);
+function App() {
+  return (
+    <Provider store={store}>
+      <Router history={history}>
+        <Route component={MainLayout}>
+          <Route path="/" component={HomeContainer}/>
+          <Route path="/about" component={AboutContainer}/>
+          <Route path="/currency-converter" component={CurrencyConverterContainer}/>
+        </Route>
+      </Router>
+    </Provider>
+  );
 }
+
+export const app = ReactDOM.render(
+  <App />, document.getElementById('app-container')
+);

src/components/component-with-local-css.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import csjs from 'csjs';
+import insertCss from 'insert-css';
+
+const styles = csjs`
+  .outerStyle {
+    border-bottom: 1px solid #e7e7e7;
+    background-color: #f7f7f7;
+  }
+  .innerStyle {
+    color: 'green';
+  }
+`;
+insertCss(csjs.getCss(styles));
+
+export function PageHeader({className = '', children = undefined}) {
+
+  const componentClass = classNames(
+    className,
+    styles.outerStyle.className
+  );
+
+  return (
+    <div className={componentClass}>
+      <h3 className={styles.innerStyle}>{children}</h3>
+    </div>
+  );
+}

src/components/page-header.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+// const inlineStyles = {};
+
+export function PageHeader({className = '', children = undefined}) {
+
+  const parentClass = classNames(
+    className,
+    'c-heading c-heading--medium',
+    'u-centered'
+  );
+
+  return (
+    <header className={parentClass}>{children}</header>
+  );
+}

src/components/page-hero.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+// const inlineStyles = {};
+
+export function PageHero({className = '', children = undefined,
+  title = '', subtitle = ''}) {
+
+  const parentClass = classNames(
+    className,
+    'c-hero',
+    'u-letter-box--super u-centered'
+  );
+
+  return (
+    <section className={parentClass}>
+      <header className="c-heading c-heading--xlarge u-window-box--none">
+        {title}
+      </header>
+      <header className="c-heading c-heading--small u-window-box--none">
+        {subtitle}
+      </header>
+      <div>
+        {children}
+      </div>
+    </section>
+  );
+}

src/components/page-section.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+const inlineStyles = {
+  minHeight: { minHeight: '200px' }
+};
+
+export function PageSection({className = '', children = undefined}) {
+
+  const parentClass = classNames(
+    className,
+    'o-grid'
+  );
+  const cellClass = classNames(
+    'o-grid__cell'
+  );
+
+  return (
+    <section className={parentClass}>
+      <div className={cellClass}>{children}</div>
+    </section>
+  );
+}

src/containers/about-container/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { PageSection } from '../../components/page-section';
+import { PageHeader } from '../../components/page-header';
+
+export function AboutContainer() {
+  return (
+    <article>
+      <PageHeader>About</PageHeader>
+      <PageSection>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+          non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+      </PageSection>
+      <br />
+      <br />
+    </article>
+  );
+};

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

@@ -0,0 +1,63 @@
+// lib imports
+import * as React from 'react';
+
+import { CurrencySelect } from './currency-select';
+import { CurrencyInput } from './currency-input';
+
+interface LocalProps {
+  currencies: Object;
+  baseCurrency: string;
+  targetCurrency: string;
+  baseValue: string;
+  targetValue: string;
+  onBaseCurrencyChange: (newCurrency: string) => void;
+  onTargetCurrencyChange: (newCurrency: string) => void;
+  onBaseValueChange: (newCurrency: string) => void;
+  onTargetValueChange: (newCurrency: string) => void;
+}
+
+interface LocalState {
+}
+
+export class CurrencyConverter extends React.Component<LocalProps, LocalState> {
+  render(): JSX.Element {
+    const {
+      currencies,
+      baseCurrency,
+      targetCurrency,
+      baseValue,
+      targetValue,
+      onBaseCurrencyChange,
+      onTargetCurrencyChange,
+      onBaseValueChange,
+      onTargetValueChange,
+    } = this.props;
+
+    return (
+      <div className="o-grid o-grid--small-full o-grid--medium-full">
+        <div className="o-grid__cell">
+          <CurrencySelect
+            currencies={currencies}
+            selectedCurrency={baseCurrency}
+            onChange={onBaseCurrencyChange}
+            />
+          <CurrencyInput
+            value={baseValue}
+            onChange={onBaseValueChange}
+            />
+        </div>
+        <div className="o-grid__cell">
+          <CurrencySelect
+            currencies={currencies}
+            selectedCurrency={targetCurrency}
+            onChange={onTargetCurrencyChange}
+            />
+          <CurrencyInput
+            value={targetValue}
+            onChange={onTargetValueChange}
+            />
+        </div>
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+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}
+        />
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+export function CurrencySelect({currencies, selectedCurrency, onChange}) {
+  return (
+    <select className="c-choice c-choice--padded"
+      value={selectedCurrency} onChange={onChange}>
+      {currencies.map(currency =>
+        <option key={currency}>{currency}</option>
+      )}
+    </select>
+  );
+}

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { CurrencyValuationHeaderSelect } from './currency-valuation-header-select';
+import { CurrencyValuationHeaderCalendar } from './currency-valuation-header-calendar';
+
+const DEFAULT_DATE = (new Date()).toISOString();
+
+export function CurrencyValuationChange({changeValue, changePercent,
+  type = 'Select', fromCurrency, toCurrency,
+  onChange = null, onCalendarStartDateChange = null, onCalendaEndDateChange = null,
+  selectedPeriod = '60', selectedStartDate = DEFAULT_DATE, selectedEndDate = DEFAULT_DATE }) {
+
+  const positive = parseFloat(changeValue) >= 0;
+  const signClass = positive ? 'c-link--success' : 'c-link--error';
+  const signedValue = positive ? '+' + changeValue : changeValue;
+
+  const positivePercent = parseFloat(changePercent) >= 0;
+  const signClassPercent = positivePercent ? 'c-link--success' : 'c-link--error';
+  const signedValuePercent = positivePercent ? '+' + changePercent : changePercent;
+
+  return (
+    <div className="c-card--high">
+      <div className="c-card__item u-letter-box--medium">
+        {type === 'Select'
+          ? <CurrencyValuationHeaderSelect fromCurrency={fromCurrency} toCurrency={toCurrency}
+            selectedPeriod={selectedPeriod} onChange={onChange} />
+          : <CurrencyValuationHeaderCalendar fromCurrency={fromCurrency} toCurrency={toCurrency}
+            selectedStartDate={selectedStartDate} selectedEndDate={selectedEndDate} onCalendarStartDateChange={onCalendarStartDateChange}
+            onCalendaEndDateChange={onCalendaEndDateChange} />
+        }
+      </div>
+      <div className="c-card__item u-pillar-box--super">
+        Change:
+        <span className={`c-link c-link--right ${signClass}`}>
+          {signedValue}
+        </span>
+      </div>
+      <div className="c-card__item u-pillar-box--super">
+        Change%:
+        <span className={`c-link c-link--right ${signClassPercent}`}>
+          {signedValuePercent}%
+        </span>
+      </div>
+    </div>
+  );
+}