pagination

  const fetchData = async () => {
    const data = await fetch(
      `${API.books}?limit=${booksPerPage}&offset=${indexOfLast}`
    );
    const res = await data.json();
    setBookList(res.result);
  };

  const fetchDataPage = async () => {
    const data = await fetch(API.books);
    const response = await data.json();
    setTotalCount(response.result.length);
  };

  const lastPage = Math.ceil(totalCount / booksPerPage);

  useEffect(() => {
    (async () => {
      setIsBooksLoading(true);
      await fetchData();
      await fetchDataPage();
      setIsBooksLoading(false);
    })();
  }, []);

  return (
    <Background>
      {!isBooksLoading && (
        <BookList>
          {bookList &&
            bookList.map(el => <BookItem el={el} key={el.book_id} />)}
        </BookList>
      )}
      <Pagination
        fetchData={fetchData}
        lastPage={lastPage}
        currentPage={currentPage}
        setCurrentPage={setCurrentPage}
      />
    </Background>
  );
};

export default BooksContainer;

const Background = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const BookList = styled.ul`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  min-height: 600px;
`;