#ListFinally
import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import "./App.css";
import { people } from "./people";

export const ListFinally = () => {
  const [items, setItems] = useState(people.slice(0, 3));
  let num = 5;
  const [hasMore, setHasMore] = useState(true);
  const fetchMoreData = () => {
    if (items.length >= 500) {
      setHasMore(false);
      return;
    }
    // a fake async api call like which sends
    // 20 more records in .5 secs
    num = items.length + 2;
    setTimeout(() => {
      setItems(people.slice(0, num));
    }, 500);
  };

  return (
    <div>
      <InfiniteScroll
        dataLength={items.length}
        next={fetchMoreData}
        hasMore={hasMore}
        loader={<h4>Ładowanie...</h4>}
      >
        {items.map(({ name, email, city, mac, timestamp, creditcard }) => (
          <ul>
            <li>{name}</li>
            <li>{email}</li>
            <li>{city}</li>
            <li>{mac}</li>
            <li>{timestamp}</li>
            <li>{creditcard}</li>
          </ul>
        ))}
      </InfiniteScroll>
    </div>
  );
};