ticker.tsx

import React from "react";
import { render } from "react-dom";
import { connect, Provider } from "react-redux";
import { bindActionCreators, combineReducers, createStore } from "redux";

const parameterize = (url: string, params: {[key: string]: string} = {}) => {
  return url + "?" + Object.getOwnPropertyNames(params).map(key => {
    return `${key}=${params[key]}`;
  }).join("&");
};

const ticker = (symbol: string, startDate: string, endDate: string, apiKey: string) => {
  const url = parameterize(`https://www.quandl.com/api/v3/datasets/WIKI/${symbol}.json`, {
    api_key: apiKey,
    start_date: startDate,
    end_date: endDate
  });
  return window.fetch(url).then((response) => {
    return response.json();
  });
};

const TickerInfo = connect(
  ({dataset}) => ({
    name: dataset.name,
    description: dataset.description,
    columnNames: dataset.column_names,
    data: dataset.data
  })
)(({name, description, columnNames, data}) => {
  if (typeof name === "undefined") {
    return <span>Loading&hellip;</span>;
  }

  const header = columnNames.map((name, index) => {
    return <th key={index} style={{
      textAlign: "right",
      paddingRight: index === columnNames.length - 1 ? 0: 24
    }}>{name}</th>;
  });

  const rows = data.map((row, index) => {
    return (
      <tr key={index} style={{
        backgroundColor: index % 2 == 0 ? "#ededee" : "white"
      }}>
        {
          row.map((cell, index) => {
            return <td key={index} style={{
              textAlign: "right",
              paddingRight: index === row.length - 1 ? 0: 24
            }}>{cell.toLocaleString()}</td>;
          })
        }
      </tr>
    );
  });

  return (
    <div>
      <h1>{name}</h1>
      <p dangerouslySetInnerHTML={{__html: description}} />
      <table style={{
        borderCollapse: "collapse"
      }}>
        <thead>
          <tr>{header}</tr>
        </thead>
        <tbody>{rows}</tbody>
      </table>
    </div>
  );
});

const TickerFetcher = connect(
  ({symbol, startDate, endDate}) => ({symbol, startDate, endDate}),
  (dispatch) => bindActionCreators({
    onDatasetChanged: ({dataset = {}}) => ({type: "SET_DATASET", payload: dataset})
  }, dispatch)
)(({symbol, startDate, endDate, onDatasetChanged}) => {
  ticker(symbol, startDate, endDate, "6ezewais4KsA-ccLvVxC").then(onDatasetChanged);
  return null;
});

const setterReducer = (actionType, def) => (
  (value = def, {type, payload}) => {
    if (type === actionType) {
      return payload;
    } else {
      return value;
    }
  }
);

const reducer = combineReducers({
  symbol: setterReducer("SET_SYMBOL", "AAPL"),
  startDate: setterReducer("SET_START_DATE", "2016-04-01"),
  endDate: setterReducer("SET_END_DATE", "2016-04-30"),
  dataset: setterReducer("SET_DATASET", {})
});

const App = connect(
  ({symbol, startDate, endDate}) => ({symbol, startDate, endDate}),
  (dispatch) => bindActionCreators({
    onSymbolChanged: (evt) => ({type: "SET_SYMBOL", payload: evt.target.value}),
    onStartDateChanged: (evt) => ({type: "SET_START_DATE", payload: evt.target.value}),
    onEndDateChanged: (evt) => ({type: "SET_END_DATE", payload: evt.target.value})
  }, dispatch)
)(({symbol, startDate, endDate, onSymbolChanged, onStartDateChanged, onEndDateChanged}) => (
  <div>
    <input value={symbol} onChange={onSymbolChanged} placeholder="symbol" />
    <input value={startDate} onChange={onStartDateChanged} placeholder="start date" />
    <input value={endDate} onChange={onEndDateChanged} placeholder="end date" />
    <TickerFetcher />
    <TickerInfo />
  </div>
));

export const main = (e: HTMLElement) => render(
  <Provider store={createStore(reducer)}>
    <App />
  </Provider>,
  e
);