Nowoczesny React: Zadanie: dodaj brakującą stronę

0:00Jako zadanie. Podsumowanie.

0:01Do tego modułu w lekcji 25 wrzucam Ci kod, który chciałbym, żebyśmy osadzili na

0:06stronie addPerson, której jeszcze nie ma.

0:09Zobacz, że mamy tutaj elegancko not found 404, ale chciałbym, żeby to

0:13Add person zaczęło nam działać.

0:16Takie jest Twoje zadanie.

0:17Dodaj odpowiednią stronę.

0:18Ta strona ma wyświetlać ten prosty formularz jako zadanie dodatkowe.

0:22Zablokuj możliwość wysyłki tego formularza, bo zobacz, że

0:25działa tutaj button Submit.

0:27Chcemy, żeby to nie było możliwe.

0:29Potraktuj to jako zadanie ekstra, coś dodatkowego, czyli nie chcemy, żeby

0:32formularz zachowywał się natywnie + dodatkowo przy not found 404.

0:38Chciałbym, żebyś poprawił tą ścieżkę, aby ta ścieżka pokazywała jaki jest konkretnie

0:43problem, czyli jaka ścieżka nie istnieje.

0:45Jako inspirację dam Ci tutaj w React router.

0:48W dokumentacji warto poszukać sobie czegoś takiego jak use location, ponieważ to use

0:53location daje nam garść ciekawych informacji.

0:56Możemy sobie zobaczyć, że dostajemy tutaj hasha, key pass name i

1:00tak dalej i tak dalej.

1:01Poczytaj sobie, które dokładnie chcielibyśmy wyświetlać, żeby pokazać jaka

1:06konkretnie ścieżka nie została odnaleziona.

1:08Ok.

1:08Zatrzymaj teraz to wideo i spróbuj rozwiązać zadanie.

1:12Za chwilę rozwiążemy je razem.

1:14Rozwiązanie zadania możemy zacząć od dodania odpowiedniego komponentu w Pages,

1:18czyli tutaj musimy pamiętać o konwencji, że strony jako zespoły widoków u nas,

1:24które osadzają się u nas na routingu, to będą właśnie komponenty typu pages i to

1:28tutaj chcę sobie dorzucić export function add person page.

1:33Dodatkowo chciałbym, żeby trzymać się tej konwencji, czyli page layout jest nam

1:37potrzebne i tutaj w tym Add Person page chcielibyśmy utrzymać ten layout.

1:42Możemy tutaj dodać ten tytuł jako Add new Person i wrzucić sobie ten formularz.

1:48Zauważ, że pomimo tego, że jest on pisany jako class class class, w momencie gdy go

1:52wkleję dostanę tutaj elegancko wszędzie. ClassName.

1:55Przypominam Ci w Visual Studio są też wtyczki do tego, żeby

1:59osiągnąć dokładnie ten sam efekt.

2:01I teraz Add Person page oczywiście musi być osadzony w naszym routingu.

2:06Dodaję sobie router.

2:07I tutaj jest jeszcze jedna rzecz.

2:09Chcę tą ścieżkę umieścić sobie przed tą ścieżką z gwiazdką, bo ta ścieżka z

2:14gwiazdką wyłapie mi element za wcześnie i nie będę w stanie wtedy

2:19przejść do Add person page.

2:20A teraz chcę, żeby ten segment był obsługiwany jako ad person i

2:25zobacz, mamy tutaj ad new person.

2:26Mamy tutaj ten formularz.

2:28On się już nam elegancko wyświetla i widzimy, że wszystko działa poprawnie.

2:32Trzymamy się tych konwencji, której się do tej pory nauczyliśmy.

2:36Teraz formularz.

2:38Jeżeli ja tutaj cokolwiek wpiszę i kliknę na Ad, to zobacz, że on się przesyła.

2:42Jak gdyby nie dostaję tutaj nic, bo gdybym chciał, żeby natywnie obsługiwany był w

2:47HTML formularz, musiałbym mieć pole name.

2:50Czyli gdybyśmy tutaj zrobili sobie jako name.

2:53No akurat wychodzi tak dziwnie, że name to po prostu name.

2:56Dodam personname, żebyśmy widzieli jak to działa.

2:59To teraz jeżeli ja sobie kliknę Ad to dostaję tutaj w query

3:03paramsach person name.

3:04Gdybym coś tutaj wpisał np.

3:06Test i kliknął ad.

3:08To widzimy, że to tutaj jest wrzucane, ale dalej nie rozwiązuje to problemu.

3:12Jak gdyby nie chcę, żeby to nawet tak działało.

3:14Chciałbym, żeby po prostu strona się nie odświeżała.

3:17W momencie, gdy ja klikam add.

3:18Strona się odświeża, co znaczy, że gubię stan.

3:21Nie do końca o to mi chodzi pisząc aplikację SPA.

3:24Dlatego tutaj w forum chciałbym dorzucić submit i tutaj będzie event

3:29jako event preventDefault.

3:32Zobacz, że taki zapis wystarczy w czyściuteńkim JavaScripcie do tego,

3:36żeby zapobiec wysyłce formularza.

3:39Spróbujmy wejść do tego Add person.

3:41Czyli mamy exchange. Wchodzimy.

3:43Add person.

3:44Chciałbym sobie coś dodać i tutaj w Add widzimy, że przestało to działać.

3:49Czyli generalnie jest dobrze, dlatego, że ja będę chciał sobie odczytać wartość tego

3:53formularza i sam kontrolować co jest wysyłane i w jaki sposób będę chciał to

3:58zrobić za pomocą na przykład jakiegoś klienta HTTP.

4:01Może to być zwykły fetch.

4:03Będziemy komunikować się z API i wtedy wysyłać.

4:06Jeśli chodzi o 404, czyli zobaczmy sobie na przykład ad person2.

4:11Mamy tutaj not found 404, ale niewiele informacji dostajemy.

4:16Jaka ścieżka konkretnie nie została odnaleziona.

4:19Spróbujmy więc przejść sobie teraz do tej 404, którą mamy też w routeri

4:24zamiast tutaj Page Layout.

4:26Zróbmy sobie konkretną, dedykowaną stronę.

4:28Czyli tutaj będziemy mieli new.

4:31I znowu JavaScript JSX file i nazwę sobie to jako not found page.

4:36Mamy export function not found page.

4:39Pożyczymy sobie, bo to jest dobry pomysł ten page layout.

4:41Tutaj z kolei podmieńmy to na not found page.

4:45Mamy not found 404.

4:47Zamknijmy page layout i poinformujmy użytkownika co takiego się stało.

4:51Może to być jakiś warning. Znowu.

4:53Ok, mamy tutaj URL i ten URL to będzie.

4:57Musimy sobie odczytać coś z właśnie use location.

5:03Dokładnie nazwę tego URL będzie miał pass name, czyli pass name.

5:08Nam wystarczy do tego, żeby określić jaka ścieżka nie została odnaleziona.

5:12Możemy sobie to jeszcze dodatkowo przystroić.

5:15I mamy page request is not found na tej zasadzie.

5:19I to jest nasz kompletny widok 404.

5:22Widzisz więc, że możemy odczytać wszelkie informacje na temat ścieżki.

5:26Co więcej, podsumowując całość tego modułu widzimy, że na Exchange

5:31page możemy odczytać również stan z naszego routera i na podstawie tego

5:35stanu wykonać jakieś działanie.

5:37Jednak pamiętajmy o tym, że docelowo dla tej konkretnej aplikacji lepiej by było

5:42nam użyć jakąś bibliotekę stanu globalnego.

5:45I te nasze pary exchange, czyli to nasze party, które sobie tutaj zaczynamy i to, w

5:51jaki sposób są wylosowane Te pary chcielibyśmy przetrzymywać w jakimś

5:55globalnym mechanizmie stanu, który może być po prostu kontekstem, czyli

6:00może być to Context API dla React.

6:02Jednak jest to już bardziej zaawansowany temat, który wykracza

6:05poza zakres tego kursu.

6:07Ale tutaj, jeżeli chcesz rozwijać dalej tą aplikację i bawić się nią, to

6:12zwracam Twoje oczy w tym kierunku.

6:15Podsumowując dalej to co się tutaj wydarzyło mamy poza tym add

6:19personpage i dodanie tego do routingu.

6:22W takim wypadku Pass ad person daje nam możliwość, żeby osadzona została strona ad

6:28personpage i mamy to w tej konfiguracji routingu.