Paginacja

git checkout 19-pagination -f

Wyświetlamy obecnie 20 wyników, które zwraca nam api. Fajnie byłoby mieć możliwośc co kryje się na kolejnych stronach.

By to zrobić musielibyśmy:

• wiedzieć ile jest łącznie stron (pagesCount)
• trzymać obecną stronę w stanie (currentPage)
• wyświetlić przycisk do przejścia na kolejną stronę
• przy każdej zmianie strony zrobić ponowne zapytanie do api po dalsze wyniki

Zacznijmy pokolei:

1. w komponencie UserList dodaj do stanu pagesCount=0
2. w cyklu życia componentDidMount w data jest nam zwracane result oraz count. Przypisz je do stanu pagesCount
3. dodaj do stanu currentPage o wartości 0, wyświetl go pod listą użytkowników
4. Dodaj przycisk, który po kliknięciu zwiększy wartość obecnej strony o 1.

5. Dodaj cykl życia componentDidUpdate. Jest funkcja, która przyjmuje 2 argumenty - stare propsy i stary stan. Możemy sprawdzić czy zmieniła się strona, a jeśli tak to zrobić zapytanie do api!

   componentDidUpdate(prevProps, prevState) {
     const { currentPage } = this.state;
     if (currentPage !== prevState.currentPage) {
       console.log('zmieniła się strona!');
       // tutaj ściągnij i zaktualizuj ładowanie i dane
   
      fetch(`https://kuznia-kodu.pl/api/users?limit=20&offset=${currentPage * 20}`)
     }
   }

   1. Dodaj componentDidUpdate gdzie sprawdzisz czy zmieniła się strona

   2. Jeśli się zmieniła zrób zapytanie na https://kuznia-kodu.pl/api/users?limit=20&offset=${page*20}

      • ustaw ładowanie
      • zapisz nową listę użytkowników
      • wyłącz ładowanie