import React from 'react';
import LoadingList from 'loading-list';
import './App.css';

const data = [
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
  { name: 'andy', age: 12 },
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: data,
    }
  }
  
  render () {
    const { list } = this.state;

    return (
        <div className="app-container">
          <LoadingList
              list={list}
              fetchData={this.getData}
          >
            {
              list && list.length > 0 && list.map((item, index) => (
                  <div key={index} className="app-container-li">{ `${item.name}-${item.age}-${index}` }</div>
              ))
            }
          </LoadingList>
        </div>
    )
  }

  getData = () => {
    const localList = this.state.list.concat(data);
    this.setState({ list: localList });
  }
}

export default App;