Делаем пагинацию в React приложении

[onepumpum]

уметь отключать кнопки переключения в граничных условиях

Но не умеет же :)

уметь отображать наше текущее положение среди всех доступных страниц

тоже чуток сомнительно, просто вывод текущей страницы слэш количество страниц?

[robzarel]

уметь отключать кнопки переключения в граничных условиях

умеет же))

в компоненте проставляются атрибуты disabled для button элементов (кнопок), что и делает их не интерактивными: https://www.w3schools.com/tags/att_button_disabled.asp. В дополнение в css проставляется cursor: not-allowed; при hover в кейсе наличия disabled атрибута, что помогает сориентироваться пользователю)
Сами же граничные условия задаются в контейнере и передаются через props - disable: { left: boolean; right: boolean; };

просто вывод текущей страницы слэш количество страниц?

да, просто вывод текущего положения.
Если хочется, можно с небольшими доработками сделать любую логику:
- любое кол-во доступных страниц выводить (показывать сколько-то предыдущих/последующих, выводить общее и т.д и т.п
- вообще убрать навигацию

[onepumpum]

умеет же))

Неа, всю работу делает родительский элемент, пагинатор только пропсы выводит, в итоге слишком много некрасивого «оверхэда»

[robzarel]

всю работу делает родительский элемент,

вы правы - в данной реализации пагинатор это стейтлесс компонент. Его задача просто предоставлять контролы и уметь в 2 режима отображения (с навигацией и без). Контейнер же содержит в себе состояние и на основе этого состояния ходит за данными (через useEffect). Мне кажется, что убирать логику работы с данными в сам пагинатор - это означает, что мы сможем переиспользовать компонент только в местах с такой же логикой подтягивания данных. В случае же с вынесением состояния в контейнер пагинатор становится переиспользуемым в большем количестве кейсов.
Плюс подобная реализация это весьма удобно, так как очень часто, помимо простой пагинации ещё на страницах поиска применяются фильтры. И данная реализация, когда состояние и логика подтягивания данных, находится в контейнере, позволяет легко покрывать и эти кейсы. Например:

  const [search, setSearchValue] = useState<string | null>(null);
  ...
  useEffect(() => {
    const fetchData = async () => {
      ...
      try {
        const response = await api.get.data({ page, search });
        ...
      } catch (err) {...} finally {...}
    };

    fetchData();
  }, [search, page]);

[h4x0rlol]

Самое сложное - написать отображение предыдущих и следующих страниц сокращая интервалы через ... на все варианты кол-ва отображаемых страниц за раз