import { observer } from 'mobx-react';
import * as React from 'react';
import { AppViewModel } from './AppViewModel';
@observer class App extends React.Component< {model: AppViewModel} ,{}> {

  public render() {
    return (
      <div>
        <button onClick={this.props.model.refresh} >Refresh List</button>
        <button onClick={this.props.model.clearData} >Clear List</button>

        <ol>
          {
            this.props.model.items
            .map(item => {
              return (
                <li key={item.name}>
                  <ul>
                    <li>Name: {item.name}</li>
                    <li>Description: {item.description}</li>
                    <li>Link: <a href={item.html_url}>Link</a></li>
                  </ul>
                </li>
              );
            })
          }
        </ol>
      </div>
    );
  }
}

export default App;