Zadanie 1

Napisz komponent User, który będzie wyświetlał informacje o użytkowniku:

• imię
• nazwisko
• adres (ulica, miasto)
• adres email
• datę rejestracji w systemie sformatowaną w przyjazny do czytania sposób (np. poniedziałek, 11 maja)
• zdjęcie profilowe

Skorzystaj do tego z API Random User, aby pobrać listę 10 użytkowników i przechowywać ją w komponencie UserList. Ten komponent będzie posiadał iterację i będzie wykorzystywał komponenty User.

Jeżeli nie jest przekazany adres, należy wpisać tekst brak. Jeżeli nie przekaże się imienia lub nazwiska, wówczas wyświetl komunikat: Nie przekazano imienia i nazwiska.

‍

Zadanie 2

Mając listę użytkowników w komponencie UserList, stwórz nową ścieżkę url w aplikacji (np. /users/:id), która będzie wykorzystywała komponent UserDetails aby wyświetlić informacje o pojedynczym użytkowniku (możesz do tego wykorzystać komponent User). W tym zadaniu nie masz API do pobrania poszczególnego użytkownika, więc jego dane musisz przekazać z poziomu listy.

Modyfikacja

Możesz opóźnić ładowanie danych z API (np. korzystając z setTimeout) i wykorzystać bibliotekę React Placeholder, aby pokazać miejsca, w których dane się pojawią.

‍

Zadanie 3

Na podstawie Zadania 1 i 2 oraz informacji o lokalizacji użytkownika z API:

"location": {  "street": "9278 new road",  "city": "kilcoole",  "state": "waterford",  "postcode": "93027",  "coordinates": {    "latitude": "20.9267",    "longitude": "-7.9310"  },  "timezone": {    "offset": "-3:30",    "description": "Newfoundland"  }}

wyświetl na mapie jego położenie. Wykorzystaj do tego Leaflet oraz opcjonalnie React Leaflet.

‍

Zadanie 4 - system do wysyłki maili

Celem zadania jest zbudowanie systemu do wysyłki maili do osób, które znajdują się w naszej bazie danych.

Założenia:

1. Korzystamy z Airtable jako miejsca przechowywania danych
2. Korzystamy z Mailgun lub innego systemu udostępniającego API RESTowe do wysyłki maili
3. Interfejs aplikacji tworzymy w React.js

Aplikacja będzie średniego rozmiaru, więc być może nie będzie wygodnie tworzyć jej z wykorzystaniem CodeSandbox. Możesz to zrobić wysyłając kod do repozytorium na GitHub.

Działanie aplikacji:

1. Lista odbiorców (subskrybentów) znajdujących się w naszej bazie danych. Lista zawiera
2. Email, Imię oraz datę dodania subskrybenta
3. Możliwość dodania nowego subskrybenta:
4. Formularz stworzony za pomocą react-hook-form z walidacją, który zawiera dwa pola: email oraz imię. Data powinna zapisać się automatycznie
5. Taki obiekt subskrybenta powinien zapisać się w Airtable w tabelce Subscribers
6. Aplikacja powinna umożliwiać wysłanie maili do wszystkich osób, które znajdują się w tabelce Subscribers. Odbywa się to poprzez założenie nowego obiektu Campaign (również dostępny w Airtable). Ten obiekt będzie zawierał pola:
7. subject - tytuł wysyłanego maila
8. content - treść wysyłanego maila
9. Aplikacja wykorzystuje PropTypes

• Modyfikacja - dodaj do treści maila specjalną frazę {{ name }}, która w to miejsce wstawi imię subskrybenta. Np. jeśli wprowadzisz treść wiadomości:

Cześć {{ name }},dzisiaj chcę wysłać kilka ciekawostek ze świata Reacta.Pozdrawiam,P.

Wynikiem będzie wstawienie imienia dla każdego subskrybenta. Czyli mając w tabelce Subscribers subskrybenta o imieniu Gwidon i mailu gwidon@wp.pl treść maila powinna wyglądać:

Cześć Gwidon,dzisiaj chcę wysłać kilka ciekawostek ze świata Reacta.Pozdrawiam,P.

Istnieje możliwość wejścia w szczegóły subskrybenta. Odbywa się to poprzez kliknięcie w adres e-mail lub imię na liście. Wówczas zostaniemy przeniesieni na stronę, która pobierze tylko ten jeden rekord z bazy i wyświetli na ekranie.

Kampanie po wysłaniu powinny być dostępne w tabelce Campaigns. Jako modyfikację można też rozważyć tworzenie nowego obiektu Campaign w momencie rozpoczęcia tworzenia maila. Dzięki temu można będzie wrócić do edycji za jakiś czas.

Wysłanych kampanii nie będzie można edytować.

Niewysłane kampanie będzie można usunąć.

Ponieważ aplikacja będzie zawierała dane "średnio-wrażliwe", czyli m.in. adresy email, to będzie dostępna dopiero po podaniu tzw. "passphrase". Za pierwszym razem, gdy ktoś otworzy aplikację, to powinien otrzymać tylko prosty formularz z polem tekstowym, gdzie nalży podać tajny tekst. Ten tekst może być ustawiony na sztywno w aplikacji (czyli np. "szkolareacta", "react", "lubieplacki" itp.). Po podaniu prawidłowego tekstu zostanie pokazana cała aplikacja.

Do prezentacji danych w formie tabelarycznej możeszs skorzystać z React Table

Link do ekranów: https://miro.com/app/board/o9J_lx0cW-Y=/

Powodzenia! :)