Skip to content

TheWidlarzGroup/hooks-workshops-solutions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

  1. 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)
  2. Zbuduj komponent który wyświetla listę kontaktów
  3. Pokazuj/chowaj szczegóły kontaktu po najechaniu kursorem (bez uzycia hover CSS)
  4. Dodaj funkcjonalność filtrowania po imieniu
  5. ⭐Dodaj przycisk, który po kliknieciu spowoduje ze szczegóły kontaktu będą cały czas widoczne
  6. ⭐Filtruj po wszystkich polach, nie tylko po imieniu
  7. ⭐Filtrowanie powinno być niewrazliwe na wielkosc liter
  8. ⭐Dodaj przycisk do sortowania kontaktów po imieniu; kliknięcie przycisku spowoduje zmiane kierunku sortowania
  9. ⭐Dodaj ikone kierunku sortowania (↑/↓)

Stage II - useEffect

Go to src/part2 and follow git commits.

  1. Zamiast hardcodować listę kontaktów, pobierz 5 kontaktów z API, np. z randomuser.me
  2. Dodaj loader ktory sie wyświetla podczas pobierania danych
  3. ⭐Dodaj error handling gdyby coś poszło nie tak
  4. ⭐Dodaj button “Załaduj jeszcze 3” po kliknięciu doładuj 3 elementy z API

Stage III - Custom Hooks

  1. Dodaj do hooka useFavouriteContact src/part3AddSingleFavourite/hook możliwość zapisywania całej listy ulubionych kontaktów (useFavouriteContacts) src/part3AddFavourites
  2. Stwórz hooka useFetch, który robi fetch na danym URL. Najlepiej, żeby oddawał stan loading, error i odpowiedź. src/part2
  3. Stwórz hooka, który nasłuchuje na pozycje kursora opuszczającego ekran i pokaż w tym czasie Alert "Nie zostawiaj nas!" src/part3EventListener
  4. Stwórz wyszukiwarkę dla kontaktów (auto-completion input) budując hooka useSuggestion src/part4
  5. ⭐Generalizuj działanie hooka useFavouriteContacts tak, żeby można było za jego pomocą zapisywać dowolne dane w localStorage src/ReusableUseLocalStorage
  6. ⭐Generalizuj tego hooka tak, żeby można było wybrać typ storage

About

🚀 Example solutions to React Hooks workshops quests!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published