Pokolei ;)

1. Zdefiniuj klasę RecipesList

   1. Pamiętaj by dziedziczyła (extends) po React.Component
   2. Zwróc cokolwiek do render()
   3. Wyrenderuj ją w App

2. Zdefiniuj potrzebny początkowy stan:

   1. recipes
   2. pagesCount
   3. currentPage
   4. search
   5. loading

3. W componentDidMount ściągnij listę produktów

   1. Ustaw stan ładowania
   2. fetch('https://kuznia-kodu.pl/api/recipes')
   3. Sparsuj pierwszą odpowiedź do JSONa (data.json())
   4. Zapisz odpowiedź do stanu (przepisy i ilość przepisów)
   5. Ustaw stan ładowania

4. Wyświetl stan ładowania

   1. Jeśli się ładuje wyświetl ładuje
   2. Jeśli się nie ładuje wyświetl diva z napisem "Lista przepisów"

5. Wyświetl listę przepisów

   1. Dla każdego przepisu (recipe.map) wyświetl najpierw tylko tytuł (tj. zwróć diva z tytułem). Pamiętaj o wąsatych nawiasach
   2. Wyświetl zdjęcie Sporo zdjęć nie działa, by nie wyświetlać ikonki zepsutego obrazka można użyć <object data={recipe.image} type="image/png" />>
   3. Wyświetl link
   4. Wyświetl opis

6. Dodaj szukajkę

   1. Dodaj label a w nim input
   2. Podepnij początkowy stan pod input, sprawdź czy działa
   3. Przy zmianie wartości inputa zmień stan search
   4. Zobacz czy działa (console.log w render)

7. Wyjmij ładowanie przepisów do osobnej metody

   1. Nad componentDidMount zdefiniuj metodę fetchRecipes
   2. Przenieś logikę związaną z łapaniem danych i ustawianiem zsanu z componentDidMount do fetchRecipes
   3. Wywołaj fetchRecipes w componentDidMount. Pamiętaj że musisz wywołać this.fetchRecipes()!

8. Dodaj wartość search ze stanu do zapytania o listę przepisów

   1. fetch(https://kuznia-kodu.pl/api/recipes?search=${search})
   2. Sprawdź czy działa (zmień stan początkowy)

9. Na zmianie stanu search ponownie zapytaj o listę przepisów

   1. componentDidUpdate - sprawdź czy zmieniła się treść
   2. Jeśli tak to ponownie wywołaj this.fetchRecipes

   Jest to dość kiepskie rozwiązanie bo łatwo wywołać wyścig. Więcej informacji w tym artykule

10. Dodaj paginację

    1. Pod listą wyświetl obecną stronę
    2. Dodaj przycisk do następnej strony
    3. Po kliknięciu zwiększ stronę
    4. w componentDidUpdate wywołaj fetchRecipes również jeśli zmieniła się strona
    5. zablokuj przycisk jeśli jesteśmy na ostatniej stronie
    6. Jeszcze raz dla przycisku spowrotem