interface State {
  companies?: Company[];
}

type Props = RouteComponentProps<any>;

class Companies extends React.Component<Props, State> {
  state = { companies: undefined }

  componentDidMount() {
    fetch('/api/v1/company')
      .then(data => data.json())
      .then((companies:Company[]) => companies.sort((a,b) => a.symbol.localeCompare(b.symbol)))
      .then(companies => {
        this.setState({ companies })
      })
  }

  render() {
    if (this.state.companies !== undefined) {
      return (<div>
        {this.state.companies!.map(company => (<CompanyListItem key={company.symbol} company={company}/>))}
      </div>)
    } else {
      return 'loading'
    }
  }
}