import React, {Component} from 'react';
import Radium from 'radium';

import fetch from 'isomorphic-fetch';

const API_ENDPOINT = 'https://api.nytimes.com/svc/topstories/v1/world.json';
const numerals = ['௧', '௨', '௩', '௪', '௫'];

class News extends Component {

  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
    this.fetchNews();
  }

  componentDidMount() {
    this._interval = setInterval(this.fetchNews, 30 * 60000);
  }

  componentWillUnmount() {
    clearInterval(this._interval);
  }

  fetchNews = () => {
    fetch(API_ENDPOINT + `?api-key=${this.props.apiKey}`)
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          items: data.results.slice(0, 5)
        });
      });
  };

  render() {
    return (
      <div style={{ fontSize: 28, marginTop: 10 }}>
        <ul style={{
          padding: 20,
          textAlign: 'left',
          listStyleType: 'none'
        }}>
          {this.state.items.map((item, i) => (
            <li
              style={{whiteSpace: 'nowrap'}}
              key={i}
            >
              <div
                style={{
                    display: 'inline-block',
                    verticalAlign: 'top'
                  }}
              >{numerals[i]}</div>
              <div
                style={{
                  display: 'inline-block',
                  verticalAlign: 'top',
                  whiteSpace: 'normal',
                  marginLeft: 10
                }}
              >{item.title}</div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default Radium(News);
@@ -182,52 +182,8 @@
 on';
-%0Aconst numerals = %5B'%E0%AF%A7', '%E0%AF%A8', '%E0%AF%A9', '%E0%AF%AA', '%E0%AF%AB'%5D;
 %0A%0Acl
@@ -834,80 +834,24 @@
     
-padding: 20,%0A          textAlign: 'left',%0A          listStyleType: 'none
+textAlign: 'left
 '%0A  
@@ -926,541 +926,29 @@
  %3Cli
-%0A              style=%7B%7BwhiteSpace: 'nowrap'%7D%7D%0A              key=%7Bi%7D%0A            %3E%0A              %3Cdiv%0A                style=%7B%7B%0A                    display: 'inline-block',%0A                    verticalAlign: 'top'%0A                  %7D%7D%0A              %3E%7Bnumerals%5Bi%5D%7D%3C/div%3E%0A              %3Cdiv%0A                style=%7B%7B%0A                  display: 'inline-block',%0A                  verticalAlign: 'top',%0A                  whiteSpace: 'normal',%0A                  marginLeft: 10%0A                %7D%7D%0A              %3E%7Bitem.title%7D%3C/div%3E%0A            
+ key=%7Bi%7D%3E%7Bitem.title%7D
 %3C/li

Change News to be simple bullets