React: Widok szczegółów notatki cz.2

16.8.x

0:00Cześć, w tej lekcji zakończymy sobie wszystkie rzeczy związane z Reactor Router'em,

0:04przynajmniej na ten moment. Zrobimy jeszcze tak żebyśmy mogli klikać faktycznie

0:08w te karty i żeby one przenosiły nas do jakiegoś route'a

0:12związanego z konkretną notatką co prawda tej notatki na razie nie

0:16będziemy tutaj renderować, ten tekst będzie niezmienny. Co nie zmienia jednak

0:20faktu, że trochę pracy jeszcze przed nami, więc pierwsze co chciałem zrobić to

0:24sprawić, żeby sidebar zmieniał się kiedy wyświetlamy na przykład twitter,

0:29to żeby ten sidebar był niebieski a nie żółty, wynika to

0:33z faktu, że nasz komponent user page template

0:37details template nie dostaję Page Type'u i moglibyśmy

0:41to rozwiązać właśnie tak jak mówiłem w poprzedniej lekcji, poprzez nadawanie takie

0:45bardzo imperatywne każdego props'a osobno, ale możemy to zrobić jeszcze inaczej, tylko

0:49jedną rzecz musimy tutaj uspójnić i przeszkadzało mi to już przez jakiś

0:54czas, więc teraz wydaje mi się że jest dobry moment żeby w końcu się tym zająć. Mianowicie

0:58chodzi o to żebyśmy zmienili Page Type na

1:02liczbę mnogą, żeby odpowiadała ona nazwą naszych route'ów, wtedy

1:07będzie po prostu łatwiej nam się pracować, więc teraz po

1:11prostu wszędzie gdzie mamy tylko Page Type, zrobimy sobie mały refaktoring,

1:15przy okazji ten

1:19page type tutaj w naszym sidebarze możemy sobie naprawić

1:24w taki sposób, bo nie mieliśmy tego props'a podanego tak

1:28jak powinien wyglądać. Tu przy okazji widzimy jeszcze jeden mały problem, array jest

1:34zabroniony jako prop, wynika to z tego, że on jest bardzo ogólny, więc możemy zrobić coś takiego

1:38jak array of prop Types Object i wtedy

1:43mówimy że ten Children jest tak naprawdę tablica obiektów i powinien

1:48się od nas odczepić. Tutaj możemy sobie usunąć te s, ponieważ już będzie mieć

1:52liczbę mnogą. Okej i

1:58ostatnie miejsce, które korzystało z tych nazw znajduje się w naszym template, w naszym

2:03theme, przepraszam, więc

2:07jak sobie otworzymy main theme, to tutaj musimy zrobić notes, twitters i articles i

2:12w tym momencie raczej wszędzie już mamy uspójnione nasze

2:16nazwy. Zerknijmy do naszej aplikacji, okej,

2:22karty nam nie działają, zaraz zobaczymy dlaczego. Podajemy

2:27Active Color do card type, okej tutaj jeszcze w

2:31tym miejscu, czyli w naszych

2:35widokach z notatkami twitters i articles,

2:40teraz jeszcze w karcie tutaj

2:46card type musimy zmienić i teraz

2:50już wszystko powinno być okej twitter i ostatnia rzecz,

2:55zawsze przy takim refactoringu zapomina się o bardzo wielu rzeczach. Okej,

3:05jesteśmy w domu i teraz

3:11jeśli otworzymy sobie nasze details page, to możemy sobie wyciągnąć

3:15z niego takiego props'a, który się nazywa much i jak zerkniemy

3:19sobie co ten match posiada. To

3:25jest taki props, który otrzymujemy od React Roter'a praktycznie,

3:29że gratis błędem o prop type na razie się nie przejmujemy,

3:33natomiast zobaczymy sobie co my tutaj mamy logowanie w naszym konsol

3:38log'u, mamy coś takie jak path i potem możemy identyfikować

3:42czy ten widok jest związany z notatkami, artykułami czy

3:46też na przykład twitter'ami. Jeśli sobie tutaj wpiszę articles, wejdziemy tu,

3:52zobaczymy że mamy articles i teraz możemy stworzyć całkiem fajną logikę,

3:56która nam pozwoli na takie dynamiczne pokazywanie albo chowanie

4:01niektórych elementów naszego interfejsu na podstawie właśnie tego czy tojest artykuł, twitter czy

4:05notatka. Pierwszym punktem, który musimy teraz odhaczyć, żeby tego

4:09dokonać to unifikacja naszych w jednym z plików. Zazwyczaj

4:15robi się to w src, tworzymy

4:19tutaj folder routes i możemy stworzyć indeks js,

4:23w którym wyeksportujemy sobie nasza route'y. Będzie to

4:27obiekt i teraz wypiszę tutaj po kolei wszystkie route'y, które

4:32nawiązują do tego co mamy w naszym root'owym widoku. Okej, skoro

4:36mamy już ten obiekt stworzony, teraz możemy wrócić do naszego root'owego widoku i zaimplementować

4:41sobie te route'y, które eksportujemy i skoro

4:53to już tutaj mamy wpisane, teraz możemy wrócić do naszego details page

4:57i pokażę ci o co mi chodziło, oczywiście moglibyśmy to wpisać po prostu string'ami,

5:01ale takie przenoszenie powtarzających się wartości do

5:06jakiegoś zewnętrznego zewnętrznego pliku jest po prostu łatwiejsze, pozwala

5:10nam na unikanie błędów, więc teraz jak tutaj sobie zaimportujemy routes, sprawimy,

5:16że details page w końcu zacznie wykorzystywać swój template w

5:20odpowiedni sposób, więc tutaj to sobie wywalimy, wrócimy children o i tutaj

5:30widzę, że jest jakiś bałagan. Coś mi umknęło naprawimy

5:36tylko szybko te ścieżki, w porządku.

5:44Teraz sprawdźmy czy to zadziała, fragment

5:49możemy sobie wywalić, tutaj wrzucimy sobie na razie cokolwiek

5:53żeby tylko zobaczyć czy ten template

5:57zaczął działać. To

6:02widzę jest jeszcze jeden mały problem, od razu go naprawimy w sidebarze, ołówek nam nie działa

6:06jak jesteśmy na notatce. To na pewno jest przez

6:10to, że tutaj mamy exact, bo każdy inny route działa normalnie, okej.

6:15Naprawione i teraz

6:19przy wykorzystaniu właśnie much path możemy

6:23sobie porównać czy miejsce, w którym się znajdujemy odpowiada

6:27na jakiś warunek logiczny, który sobie tutaj wrzucimy, więc na przykład

6:31is twitter i możemy

6:35sobie tutaj wrzucić math nie match

6:41równa się routes twitter.

6:46Tutaj

6:52to musimy zrobić tak, bo inaczej ten boolean nam się nie

6:56wyrenderuje, jest twitter false, ale jak

7:00wejdziemy sobie na twitters 1, to mamy is twitter true,

7:05więc za pomocą takiej bardzo proste i logiki

7:09i możemy sobie teraz stworzyć bardzo fajne renderowanie

7:13warunkowe. Jeszcze żeby udowodnić i sprawdzić czy to w ogóle działa

7:17poprawnie pojedziemy sobie notatka, jest note true,

7:23article, React tylko coś

7:27nam nie działa w ogóle, zaraz zobaczymy dlaczego. No

7:33tak, bo tutaj w wyniku wszędzie używamy liczby mnogiej articles true, więc to renderowanie

7:40warunkowe będzie fajnie nam tutaj działać, ale zanim do tego przyjdziemy to jeszcze jedna

7:44drobna rzecz. Do każdego card w naszych

7:49widokach podaję id, te id ja tutaj dodałem i teraz

7:53jest ono podawane jako key, ale możemy je też podawać jako id po prostu,

7:59zauważcie, że dokonałem destrukturyzacji

8:03tutaj props'ów, żeby było to po prostu ładniejsze, mamy notes twitters, w

8:08ten sposób jak będziemy sobie do karty i powiemy,

8:12że po kliknięciu ma

8:17nas przekierować do konkretnego patha, do konkretnej ścieżki

8:21to będziemy mogli właśnie zostali przeniesieni do notatki

8:25o takim czy innym id i takim rekomendowanym sposobem na to jest

8:29zaimportowanie znanego ci już redirect,

8:33biblioteki react-router-dom, musimy tutaj stworzyć

8:37klasę, która pozwoli nam na stworzenie state'u w funkcji render

8:43zdestrukturyzujemy sobie nasze props'y okej

8:49i mamy już przygotowaną klasę, a w następnej lekcji zajmiemy

8:53się tym błędem z ESlint'a, który nie wiadomo skąd się wziął, a przynajmniej

8:57tak może nam się wydawać oraz stworzymy sobie funkcję, która właśnie

9:01pozwoli nam na zmianę state'u i renderowanie warunkowe kategorii naszego redirecta.