Welcome in the repo with solutions for React Hooks: useState and useEffect workshops!
Run yarn and then yarn start. There are no solutions for tasks with a star. Go to the App.tsx and uncomment the ONE line of code you want render. There's the list of tasks:
Stage I - useState
Go to src/part1/Part1 and src/part1/Contact.
- Zbuduj prosty komponent do wyświetlania pojedynczego kontaktu (Hint: you can use randomuser.me for user data - just copy it over to your code || use already saved JSON file with random 5 contacts in src/data)
- Zbuduj komponent który wyświetla listę kontaktów
- Pokazuj/chowaj szczegóły kontaktu po najechaniu kursorem (bez uzycia hover CSS)
- Dodaj funkcjonalność filtrowania po imieniu
- ⭐Dodaj przycisk, który po kliknieciu spowoduje ze szczegóły kontaktu będą cały czas widoczne
⭐ Filtruj po wszystkich polach, nie tylko po imieniu⭐ Filtrowanie powinno być niewrazliwe na wielkosc liter⭐ Dodaj przycisk do sortowania kontaktów po imieniu; kliknięcie przycisku spowoduje zmiane kierunku sortowania⭐ Dodaj ikone kierunku sortowania (↑/↓)
Stage II - useEffect
Go to src/part2 and follow git commits.
- Zamiast hardcodować listę kontaktów, pobierz 5 kontaktów z API, np. z randomuser.me
- Dodaj loader ktory sie wyświetla podczas pobierania danych
⭐ Dodaj error handling gdyby coś poszło nie tak⭐ Dodaj button “Załaduj jeszcze 3” po kliknięciu doładuj 3 elementy z API
Stage III - Custom Hooks
- Dodaj do hooka useFavouriteContact src/part3AddSingleFavourite/hook możliwość zapisywania całej listy ulubionych kontaktów (useFavouriteContacts) src/part3AddFavourites
- Stwórz hooka useFetch, który robi fetch na danym URL. Najlepiej, żeby oddawał stan loading, error i odpowiedź. src/part2
- Stwórz hooka, który nasłuchuje na pozycje kursora opuszczającego ekran i pokaż w tym czasie Alert "Nie zostawiaj nas!" src/part3EventListener
- Stwórz wyszukiwarkę dla kontaktów (auto-completion input) budując hooka useSuggestion src/part4
⭐ Generalizuj działanie hooka useFavouriteContacts tak, żeby można było za jego pomocą zapisywać dowolne dane w localStorage src/ReusableUseLocalStorage⭐ Generalizuj tego hooka tak, żeby można było wybrać typ storage