import React, { useState } from "react";

import InfiniteList from "@damnhotuser/react-infinite-list";
import mock_fetch from "./mock_data"; // mocking an API service

const App = props => {
  const [rows, setRows] = useState([]);

  const fetchData = (offset, limit) =>
    mock_fetch(offset, limit).then(data => {
      setRows([...rows, ...data]);
    });

  return (
    /*
     * InfiniteList takes three needed arguments:
     * `rows` are data to display in the list
     * `fetchData` is called on rendering and when needed, on scroll
     * `limit` is the number of rows to fetch on each `fetchData` call
     *
     * InfiniteList's `children` must be a function, and has the row to render passed as an argument
     *
     * current `index` and `ref` will also be passed as arguments of your `children` function, it is IMPORTANT to pass ref to the rendered list element for the onScroll fetch to work
     */
    <InfiniteList rows={rows} fetchData={fetchData} limit={limit}>
      {(row, index, ref) => (
        <div key={index} ref={ref}>
          {row.name}
        </div>
      )}
    </InfiniteList>
  );
};