Nowoczesny React: Nawigacja w kodzie

0:00Dla urozmaicenia tego wyzwania, które przed nami stoi, dorzucę kod do robienia

0:06exchange, czyli do momentu, w którym zaslektujemy sobie te dwie osoby i chcemy

0:11dorzucić sobie tutaj make exchange, czyli chcemy, żeby to party nam wystartowało,

0:16żebyśmy mieli imprezę i żebyśmy mieli pary, kto komu kupuje prezent.

0:22Zauważ, że działa to w ten sposób, że przekazując sobie jakąś listę w momencie,

0:26gdy to sobie uruchomię, ja tutaj skorzystam z Community Vision Quoki, żeby

0:31natychmiast uruchomić ten plik dostanę pary.

0:33Czyli dla danych 1 i 2 dwójka kupuje prezent jedynce, a jedynka dwójce.

0:39Więc gdybyśmy tutaj wyobrazili sobie, że będziemy mieli Eve

0:44i uruchommy walkę jako automatycznie, no to dla samej Ewy niestety nie będzie

0:50par, dlatego, że mamy tylko jedną osobę.

0:52I tutaj jest ta reguła, że jeżeli list of people jest mniejszy od

0:56dwóch, to dostajemy puste.

0:57Ale jeżeli będzie Ewa i np.

1:00John no to wtedy dostajemy. John.

1:02Ewa. Ewa.

1:03John.

1:04W zależności od tego, jak się nam wylosuje.

1:06Czyli to powinno być losowe, Czyli różnie powinny się te pary losować.

1:11Natomiast odczytujemy tą tablicę tablic w ten sposób, że Ewa kupuje prezent Johnowi.

1:15John kupuje prezent Ewie.

1:18Zabawa zacznie się oczywiście dopiero wtedy, kiedy będziemy mieli

1:21więcej niż dwie osoby. Czyli tutaj mamy.

1:23Ewa, Mark, John kupuje Ewie i Mark kupuje Johnowi.

1:28Nie przejmuj się, jeśli niewiele rozumiesz z tego kodu, który tutaj jest.

1:31Jest on tutaj tylko po to, żebyśmy przećwiczyli osadzanie właśnie takiego

1:35zewnętrznego kodu w naszej aplikacji.

1:37Jest on dostępny dla Ciebie w materiałach tej lekcji.

1:40I właśnie tutaj Make Exchange powinniśmy wywołać na Exchange of Gifts.

1:44W momencie, gdy dostaniemy tablicę zaznaczonych użytkowników,

1:48nie jest to wariant produkcyjny.

1:50Jeśli chcesz produkcyjnie pobawić się tym, proszę usiądź nad RandomizeArray.

1:55Ja tutaj sobie pobawiłem się, żeby albo było shift albo pop, więc albo z lewej

1:59albo z prawej strony zdejmuje z bazowej rajki losowo elementy.

2:05Dużo lepiej by było po prostu wybierać losowe elementy z tablicy, żeby

2:09układać tą randomize, którą mamy tutaj.

2:12Analiza tego kodu dużo, dużo później.

2:15Natomiast my chcemy teraz osadzić sobie ten kod, zobaczyć jak programistycznie

2:20nawigować i mamy do tego doskonały powód.

2:23To znaczy zauważ, że jeżeli tutaj na PeoplePage wybierzemy sobie ludzi, czyli

2:29mamy to selected names, chcielibyśmy to jakoś przekazać do tej strony Exchange.

2:34Chciałbym to zrobić za pomocą routingu.

2:36Routing obsługuje coś takiego jak stan.

2:39I to będzie bardzo ciekawa rzecz, ale mówimy tutaj o stanie nie naszego

2:44komponentu, tylko o stanie history router, do którego mamy dostęp w momencie, gdy

2:49nawigujemy programistycznie, więc jest to doskonały powód do tego, żeby

2:53tutaj nawigować programistycznie.

2:54Możemy sobie wyobrazić to w ten sposób, że w momencie, w którym zaslektujemy

2:58użytkowników, to będziemy mieli tutaj odpowiedniego buttona.

3:03I załóżmy, że ten button będzie nam pokazywał, że możemy wystartować nasze

3:07przyjęcie, ale oczywiście musimy mieć odpowiednią ilość osób.

3:10Czyli tutaj w Selected Names musimy mieć możliwość pokazania lens ile

3:16osób zostało za selectowanych.

3:18Mamy tutaj 0.

3:19W momencie gdy zaczynam selectować mam 3 osoby.

3:22John się selectuje, bo tutaj mamy ten kod, który selectuje go z automatu.

3:26Czyli ten use effect.

3:27Możemy zatrzymać na chwilę działanie tego kodu, żeby nam nie przeszkadzał, żeby ta

3:32aplikacja nie zachowywała się tak nie deterministyczne.

3:35Weźmy sobie, zaznaczmy po prostu ludzi.

3:38Widzimy, że to działa, aczkolwiek ten button powinien nam się pokazać dopiero

3:42wtedy, gdy spełniony jest warunek, że selected names lens jest większe od

3:48jednego i wtedy chcemy wyświetlić sobie właśnie tego diva z batonem.

3:53Czyli generalnie jeśli mamy tylko jedną osobę z selectowaną, to ten

3:56button się nie pokazuje.

3:57Ten button pokazuje się dopiero wtedy, gdy mamy więcej osób w tym układzie.

4:02Tą część logiki mamy gotową.

4:04Natomiast na start party chcemy zrobić onClick jako Handle navigation i

4:10tutaj przygotujemy sobie funkcję.

4:12Spróbujmy ją zrobić tutaj na górze.

4:14Handle Navigation musi użyć specjalnego hooka, który nazywa się Use Navigate.

4:20Możemy zapisać sobie to jako Navigate Use Navigate i zaimportować

4:24z React router dom.

4:26I teraz to nasze Navigate powinno odprowadzić nas do Exchange.

4:30Jeśli zostawimy to tylko w ten sposób, to wtedy zaznaczając dwie osoby start party

4:36będziemy widzieć, że faktycznie przechodzimy do Exchange.

4:39Czyli wszystko działa programistycznie, ale nie jest to konkretny powód

4:44do tego, żeby użyć Navigate.

4:46Moglibyśmy tą samą funkcjonalność uzyskać, gdyby po prostu przesłać linka

4:53jako klas name button i info.

4:55Wyglądałby on wtedy tak samo i tutaj dalibyśmy tu i Exchange, ale tutaj mamy

5:01jeszcze jedną rzecz, którą chcemy zrobić.

5:03Chcemy wysłać statek, który będzie odebrany po stronie Exchange

5:09to selected names.

5:10Te name'y, które select owaliśmy chcemy sobie odebrać po stronie.

5:14Exchange page.

5:16Więc exchange page będzie musiał dobrać się do właśnie tego stanu.

5:21Zobaczmy sobie jak to będzie wyglądało.

5:23Wróćmy do Exchange Page i teraz tutaj będziemy chcieli odebrać stan.

5:28Ten stan będzie przy Use location.

5:31Czyli z kolei wybieramy Hook.

5:32Use location i on będzie miał w sobie stan.

5:39Jednak jeśli ten stan nie jest podany.

5:42To wtedy będzie miał wartość null.

5:43Więc to, że przyrównamy sobie to do pustej tablicy niezbyt wiele nam da.

5:48Ale na razie możemy sobie to sprawdzić.

5:51Wiemy, że ta tablica zostanie wyrenderowana dlatego, że jest

5:54to po prostu tablica stringów.

5:55Zobacz teraz nie została przekazana.

5:57Musimy wrócić, powtórzyć sobie to samo.

5:59I start the party i mamy Mark i Krysia.

6:02Jeżeli odświeżymy nasz widok, to marki Krysia zostaje.

6:05Ale uwaga jeżeli przejdziemy do People i z powrotem na Exchange, to gubimy ten

6:09stan, więc ten stan jest ulotny.

6:12To nie jest jak gdyby stuprocentowo bulletproof rozwiązanie.

6:15To jest rozwiązanie, które polega na routerze, ale przekazujemy sobie te trzy

6:19imiona z jednej ścieżki do drugiej, używając właśnie

6:23programistycznej nawigacji.

6:24W takim układzie Navigate odprowadza nas do Exchange i wysyła stan z tymi

6:29Selected names, który chcemy przekazać.

6:32Handle navigation, które mamy tutaj i które przekazujemy programistycznie w

6:36momencie, gdy nas odprowadzi i przekaże stan Exchange Change musi teraz odebrać to

6:42wszystko ze stanu i uruchomić naszą logikę.

6:46Czyli make Exchange powinno zostać uruchomione.

6:49Spróbujmy sobie to make Exchange uruchomić właśnie dla tego stanu.

6:54I uwaga ten stan może być null.

6:56Więc ja sobie tutaj zrobię OR i tak defensywnie wrzucę sobie

7:00pustą tablicę w razie czego.

7:02I tutaj dostajemy pary, które kupują sobie prezenty.

7:06Możemy je sobie odpakować na przykład jako takiego boxa.

7:10Czyli możemy sobie tutaj przygotować kawałek widoku jako box

7:15i mapować po tych parach.

7:17Zobacz, że jeżeli przemapujemy, to wiemy, że tutaj każda para ma

7:22person i four person.

7:24Załóżmy, że tak sobie to opakujemy, czyli robię restrukturyzację tej tablicy tablic.

7:28I tutaj chciałbym sobie zastosować takiego boxa, który może być flexem

7:33i tutaj Space Between.

7:36Tutaj jeśli upakujemy to sobie w dwa takie właśnie spany, to możemy użyć

7:41sobie klasy chociażby tak. I na przykład tak.

7:44Is success. A tutaj dla tego person jest info.

7:49I teraz, w momencie, gdy będziemy mieli ten stan, zobaczmy sobie people.

7:53Zaznaczamy Start party.

7:55Pamiętajmy o kluczach.

7:57Person zawsze występuje jednorazowo, więc możemy tutaj jako klucza

8:00użyć sobie person.

8:02I tutaj jeżeli nie używam returna i mam to wpisane właśnie w ten sposób,

8:07to powinienem usunąć te znaki.

8:09Więc Mark by se gift for. Ewa.

8:11Ewa. By gift for Mark.

8:13Mamy dwie osoby.

8:14Spróbujmy z trzema osobami. Mark.

8:16Krysia. John.

8:18Mark i Krysia. John.

8:19Jeśli odświeżymy stronę, to oczywiście te pary mogą nam się losować

8:22ponownie, ponownie. Ale uwaga!

8:24Nie jest to produkcyjne rozwiązanie, dlatego, że to Make Exchange nie jest

8:28powiązane z aktualizacją stanu w naszych Reactowych komponentach.

8:34Akurat wykorzystujemy tutaj ciekawy fakt, że make Exchange zawsze będzie w momencie,

8:39w którym się przeniesiemy na tą stronę, czyli Exchange of Gifts.

8:42Natomiast gdybyśmy zaczynali od tej strony, czyli np.

8:46Spróbujmy sobie zacząć tutaj.

8:48No to nie mamy stanu początkowego.

8:49Musimy wrócić do People, wybrać te trzy osoby i start the party.

8:54Oczywiście możemy sprawdzić, czy pary w ogóle są.

8:57Jeżeli ich nie ma, to możemy wrzucić odpowiednią informację.

9:02Na przykład można sobie zrobić tutaj Computer property party started.

9:06I to zawsze będzie.

9:07Czy w parach będziemy mieli jakikolwiek wynik?

9:11Czyli jeżeli będziemy mieli chociażby dwie pary.

9:14No to wtedy możemy rozpoczynać.

9:17I teraz, jeżeli pary nie jest wystartowane, to dajemy

9:21odpowiedni komunikat.

9:23Czyli mamy tutaj Please select people first.

9:26Jeżeli zaczniemy teraz od Exchange albo przelatujemy na inną ścieżkę, wrócimy.

9:31Please select people first.

9:33I dopiero jeżeli sobie zrobimy start the party, to wtedy przesyłamy ten state.

9:38Korzystamy z Use location i wtedy odczytujemy state, czyli to co

9:41zostaje przesłane z selected names.

9:43Zauważ, że możemy ze zwykłych selected namesów przejść sobie do obiektów.

9:48Wtedy zarówno make Exchange będzie działać dlatego, że nie determinuje

9:52czym jest list of people.

9:53Możemy tu mieć dowolne obiekty.

9:55Powinno nam się to elegancko zalosować.

9:58Natomiast kosztowałoby to nas aktualizację naszego UI, dlatego, że wszędzie

10:02odnosimy się po prostu do name'ów.

10:05Nie są to obiekty, tylko są to po prostu stringi.

10:08Niemniej nasza aplikacja.

10:10Taki prototypowy wariant działa, Gdybyśmy chcieli puścić go na produkcję.

10:14No to fajnie by było zrobić troszeczkę lepszy randomizer, do tego area.

10:20No i oczywiście musielibyśmy sobie rozwiązać problem ze stanem danych,

10:24dlatego, że teraz przekazujemy stan routerem.

10:27Wszystko jest ok, ale w momencie, w którym wrócimy do People wrócimy na Exchange.

10:31Please select people first.

10:33Nasza aplikacja powinna działać troszeczkę inaczej, ale mamy taki problem, że tutaj

10:38musimy mieć stan współdzielony pomiędzy PeoplePage, którą mamy

10:43tutaj a Exchange page. Tak?

10:46Czyli jak gdyby te dwie strony musiałyby mieć jakiś komponent bazowy, być może

10:51komponent app, na którym mielibyśmy stan i ten stan zostałby rozlany

10:55do tych komponentów.

10:56Natomiast nie mamy już takiej wygodnej zależności pomiędzy app a pozostałymi

11:00komponentami, żeby przekazać ten stan.

11:04Na ten moment rozwiązujemy ten problem właśnie poprzez use location

11:07i stan naszego routingu.