Timur Kostenko

const setMessagesHandler = (messages) => {
  dispatch(setMessages(messages));
}

const addMessageHandler = (message) => {
  dispatch(addMessage(message));
}

loadMore = () => {
    this.setState(
      (prevState) => ({
        page: prevState.page + 1,
      }),
      () => {
        const {query, page} = this.state;
        window.scrollTo({
          top: document.documentElement.scrollHeight,
          behavior: 'smooth',
        });
        fetchImg(query, page).then((response) =>
          this.setState((state) => ({
            images: [...state.images, ...mapper(response.data.hits)],
          }))
        );
      }
    );
  };

const App = () => {
  const [isTimerActive, setIsTimerActive] = useState(false);

  const handleClick = () => {
    // активируем счетчик
    setIsTimerActive(true);
    setTimeout(() => {
      // сбрасываем
      setIsTimerActive(false);
    }, 1000);
  };

  return (
    <button disabled={isTimerActive} onClick={handleClick}>
      {isTimerActive ? 'loading...' : 'Повторно отправить смс'}
    </button>
  );
};

export default App;

export const usePagination = (users = [], defaultPage = 1, amountPerPage = 10) => {
  const [currentPage, setCurrentPage] = useState(defaultPage);
  const [currentPosts, setCurrentPosts] = useState([]);
  const [amountOfPages, setAmountOfPages] = useState(0);

  useEffect(() => {
    updatePosts();
    updateAmountOfPages();
  }, []);

  const updatePosts = () => {
    const indexOfLastPost = currentPage * amountPerPage;
    const indexOfFirstPost = indexOfLastPost - amountPerPage;
    const updatedUsers = users.slice(indexOfFirstPost, indexOfLastPost);
    setCurrentPosts(updatedUsers);
  };

  const updateAmountOfPages = () => {
    const updatedAmount = Math.ceil(users.length / amountPerPage);
    setAmountOfPages(updatedAmount);
  };

  return {
    setCurrentPage,
    amountOfPages,
    currentPosts,
  };
};

const Pagination = ({amountOfPages, setCurrentPage}) => {
  const [pageNumbers, setPageNumbers] = useState([]);

  useEffect(() => {
    calculatePageNumbers();
  }, [amountOfPages]);

  function calculatePageNumbers() {
    const updatedPageNumbers = [];
    for (let i = 1; i <= amountOfPages; i++) {
      updatedPageNumbers.push(i);
    }
    setPageNumbers(updatedPageNumbers);
  }

  function handleSetCurrentPage(number) {
    return () => {
      setCurrentPage(number);
    }
  }

  return (
    <nav>
      <ul className="pagination">
        {pageNumbers.map(number => (
          <li key={number} className="page-item">
            <button
              onClick={handleSetCurrentPage(number)}
              type="button"
              className="page-link"
            >
              {number}
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
};