Как упростить условие для пагинатора?

Question

[G F]

https://repl.it/@fomenkogregory/Paginator-5#src/App.js

Создал вот такой пагинатор, как упростить условие не изменяя поведения?

function App() {
  const pagesTotal = 12 // any number
  const [currentPage, setCurrentPage] = useState(1)
  const isCurrent = page => ({background: page === currentPage && 'red'})

  return (
    <div style={{display: 'flex'}}>
      <button onClick={() => setCurrentPage((prev) => prev - 1)} disabled={currentPage === 1}>PREV</button>
      <button onClick={() => setCurrentPage(1)} style={isCurrent(1)}>1</button>

      {currentPage > 4 && <div>...</div>}

      {currentPage < 5 && <button style={isCurrent(2)} onClick={() => setCurrentPage(2)}>2</button>}
      {currentPage < 5 && <button style={isCurrent(3)} onClick={() => setCurrentPage(3)}>3</button>}
      {currentPage < 5 && <button style={isCurrent(4)} onClick={() => setCurrentPage(4)}>4</button>}
      {currentPage < 5 && <button style={isCurrent(5)} onClick={() => setCurrentPage(5)}>5</button>}

      {currentPage > 4 && currentPage < pagesTotal - 3 && <button style={isCurrent(currentPage - 1)} onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</button>}
      {currentPage > 4 && currentPage < pagesTotal - 4 && <button style={isCurrent(currentPage)} onClick={() => setCurrentPage(currentPage)}>{currentPage}</button>}
      {currentPage > 4 && currentPage < pagesTotal - 4 && <button style={isCurrent(currentPage + 1)} onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</button>}

      {currentPage > pagesTotal - 5 && <button style={isCurrent(pagesTotal - 4)} onClick={() => setCurrentPage(pagesTotal - 4)}>{pagesTotal - 4}</button>}
      {currentPage > pagesTotal - 5 && <button style={isCurrent(pagesTotal - 3)} onClick={() => setCurrentPage(pagesTotal - 3)}>{pagesTotal - 3}</button>}
      {currentPage > pagesTotal - 4 && <button style={isCurrent(pagesTotal - 2)} onClick={() => setCurrentPage(pagesTotal - 2)}>{pagesTotal - 2}</button>}
      {currentPage > pagesTotal - 4 && <button style={isCurrent(pagesTotal - 1)} onClick={() => setCurrentPage(pagesTotal - 1)}>{pagesTotal - 1}</button>}

      {currentPage < pagesTotal - 3 && <div>...</div>}

      <button style={isCurrent(pagesTotal)} onClick={() => setCurrentPage(pagesTotal)}>{pagesTotal}</button>
      <button onClick={() => setCurrentPage((prev) => prev + 1)} disabled={currentPage === pagesTotal}>NEXT</button>
    </div>
  );
}

Comments

[G F]

То что код не сухой понятно, вопрос именно в условии рендера кнопок

[WbICHA]

ВАРНИНГ! Этот код смотреть опасно для здоровья.

const isCurrent = page => ({background: page === currentPage && 'red'})

Функции, названия которых начинается на is и has ВСЕГДА должны возвращать либо true, либо false. А в данном случае ещё и логика внутри кривая, background может получить тут 2 значения: false и 'red'. Надо говорить, почему первое не валидно?

{currentPage < 5 && <button style={isCurrent(2)} onClick={() => setCurrentPage(2)}>2</button>}
{currentPage < 5 && <button style={isCurrent(3)} onClick={() => setCurrentPage(3)}>3</button>}
{currentPage < 5 && <button style={isCurrent(4)} onClick={() => setCurrentPage(4)}>4</button>}
{currentPage < 5 && <button style={isCurrent(5)} onClick={() => setCurrentPage(5)}>5</button>}

И у этого ужаса ещё 2 аналога. В чём проблема сделать 1 раз проверку и вывести все 4 кнопки? Зачем для каждой делать проверку?

[G F]

WbICHA, так и знал что придет челик и начнет критиковать код который я накидал через ctrl c ctrl v для примера на тостере.

[G F]

Специально для тебя пишу ещё раз - вопрос в том как уменьшить количество условий для рендера кнопок. Вопрос только в этом и не в чем больше.

[WbICHA]

G F,

{
  currentPage < 5 && 
  <>
    <button style={isCurrent(2)} onClick={() => setCurrentPage(2)}>2</button>
    <button style={isCurrent(3)} onClick={() => setCurrentPage(3)}>3</button>
    <button style={isCurrent(4)} onClick={() => setCurrentPage(4)}>4</button>
    <button style={isCurrent(5)} onClick={() => setCurrentPage(5)}>5</button>
  </>
}

{ currentPage < 5 && [2, 3, 4, 5].map((pageNum) => <button key={pageNum} style={isCurrent(pageNum)} onClick={() => setCurrentPage(pageNum)}>{pageNum}</button> }

[G F]

WbICHA, бро ну зачем ты так?) Я умею етим пользоваться. Я же спрашиваю про уменьшение количества условий. Количество условий осталось прежним в твоём примере. Уменьшилось лишь количество условных конструкций.
Надо было написать количество различных условий наверное.

[G F]

Ладно буду ковырять на выходных тогда(

[WbICHA]

G F, в таком случае я не понимаю что должно на выходе получится. У тебя там намешано очень странных условий.

[G F]

WbICHA, да в этом и жесть. С пагинацией всегда куда хардкода, чтобы нормально кнопки показать... Я думал тут найдется какой-то интеллектуал с серебряной пулей. Ну не прокатило, ладно. Короче, спасибо что попытался помочь, всего хорошего.

Answer 1

[0xD34F]

Вынесем в отдельные переменные условия, определяющие, надо ли показывать группы кнопок, которые...

// ...прилегают к первой кнопке
const showAfterFirst = currentPage < 5;

// ...прилегают к последней кнопке
const showBeforeLast = currentPage > totalPages - 4;

Соответственно, условиями отображения троеточий после/до первой/последней кнопок будут обратные значения: !showAfterFirst и !showBeforeLast. А чтобы отобразить центральную группу кнопок, оба базовых условия должны быть ложными: !(showAfterFirst || showBeforeLast).

https://jsfiddle.net/0sjgrcxu/1/

Comments

[G F]

благодарю! не думал что кто-то действительно поможет. говорю, а одинокая слеза медленно стекает по щеке... и я чувствую, что старая фобия создания пагинаторов перестает меня беспокоить.

[G F]

на всякий случай схоронил в блокноте на рабочем столе
буду внукам показывать