React: Widok szczegółów notatki

16.8.x

0:00Cześć, w tej lekcji zajmiemy się przechodzeniem z widoku takiego ogólnego,

0:04gdzie mamy kilka notatek do szczegółów notatki. Jak sobie zerkniemy

0:08nad naszym design'em to to wygląda mniej więcej tak, więc

0:13teraz po kliknięciu w naszym notatkę chcemy żeby odpalił się właśnie ten widok

0:18i możemy to zrobić za pomocą dynamicznych ścieżek podawanych do naszego React Router'a,zajmijmy

0:23się teraz przygotowaniem tego wszystkiego. Pierwsze co musimy zrobić to

0:27weź sobie do naszego root'owego. widoku wywalić tutaj ten

0:31exact i sprawić, żeby notes stało się naszym

0:36głównym domowym widokiem. Dlaczego tak się dzieje dlatego,

0:41że chcemy, aby użytkownik mógł później wchodzić do

0:45notatek w taki sposób, że na przykład jeśli poda articles slash i id

0:49takiej notatki to on sobie do tej notatki wejdzie i żeby to zrobić to musimy

0:54wykonać właśnie jedną bardzo ważną rzecz. Pobierzmy sobie teraz komponent redirect z naszego React Router

1:01DOM i stwórzmy osobno ścieżkę dla ścieżki

1:05domowej i ona zamiast wypluwać ten komponent

1:09ma nam wyrenderować komponenty redirect, który

1:13zaprowadzi nas do nodes. Zaraz

1:18sprawdzimy czy to działa, jeśli teraz sobie wejdziemy w naszej aplikacji, tak

1:28jeśli klikam na logo to jestem przekierowywany bezpośrednio

1:32do nodes. Nie mogę wejść na adres główny, jeśli sobie to usunę nawet to od

1:36razu wchodzę na nodes. Wywalił się tylko nasz navlink z tego względu, że on prowadzi

1:41do głównego widoku, do domowego widoku, który

1:45już nie odpowiada na to co podaliśmy tutaj. Okej

1:50w ten sposób zostanie to naprawione z powrotem

1:55link pasuje do tego za co odpowiada, więc

1:59teraz wróćmy sobie do kodu i odpowiedzmy na pytanie co my właściwie chcemy zrobić chcemy,

2:04żeby po kliknięciu na to odpala nam się na notatka z jakimś

2:08adresem z jej id. Będziemy mogli ją obejrzeć będziemy mogli wrócić do

2:12widoku wszystkich notatek, więc pierwsze co

2:16musimy zrobić to prawdopodobnie stworzyć sobie jakieś template nazwijmy go

2:20na razie details template, zaimportujemy

2:25sobie React'a i skoro

2:34detailes template już mamy gotowy to teraz możemy stworzyć sobie details page, na

2:38którym za implementujemy nasz detail template. Na

2:45razie wrzucimy to tylko i wyłącznie to, wrzucam

2:51to za fragment, żeby twitter mi nie wrzucił tego do jednej linijki, bo

2:55i tak później będę teraz rozbudowywał. Nie chcę później wszystkiego

3:00naprawiać akurat tego feature'a prettier'a, nie za bardzo lubię

3:04okej i skoro mamy już z wyeksportowane details page to

3:08teraz możemy przejść sobie do rootowego widoku i pokażę ci jak działają dynamiczne route'y w React Routerze. Jedyne

3:14co musimy zrobić, żeby zadeklarować, że ten route będzie dynamiczny to

3:19przed kolejnym parametrem przed kolejnym elementem tutaj w

3:23naszym adresie musimy dodać dwukropek i to jest taki wild card, to jest taki indykator

3:28tego, że po prostu to co tutaj będziemy wpisywać będzie się zmieniać, więc

3:32jeśli wpiszemy sobie id, to znaczy, że po slashu, po notatkach

3:36tutaj może pojawić się cokolwiek. To może być właśnie jakaś

3:40liczba, to może być jakiś ciąg znaków, nie wiadomo. Jedyne

3:45co wiadomo to to, że po wpisaniu takiego adresu cokolwiek by

3:49się tu nie znalazło, my chcemy wyświetlić details page. Podobnie

3:53zresztą jak w przypadku artykułów i przypadku

3:57twitter'ów i zaraz jak wrócimy sobie do naszego widoku

4:02tutaj do naszej aplikacji to na razie nic nie możemy zrobić, ale jak wpiszę

4:06sobie tutaj 1, to nic się nie stanie. Wynika

4:10to z tego, że po prostu ta ścieżka również spełnia ten warunek, więc teraz musimy

4:15przed każdym ruchem tutaj dotyczącym

4:20tych ogólnych widoków wpisać exact. Wtedy

4:25będzie tak, że jak piszemy sobie notatkę numer 1 to

4:29faktycznie wyświetli nam się ta notatka. Z tym, że nie mamy

4:35tutaj tego template'u, który potrzebujemy z naszym user page

4:39template gdzie mamy nas sidebar, tylko teraz widzimy, że ta logika związana

4:43z tym grid'em będzie połączona z tym sidebar'em, więc wydaje mi się że

4:47możemy to jeszcze rozdzielić w taki sposób, że dodamy

4:51tu jeszcze jeden template, który będzie się nazywał grid view template

4:57albo po prostu grid-template. Skupijemy sobie user page

5:01template tutaj w to miejsce. Podmienimy nazwę i to

5:09co chcemy zrobić to zaimportować sobie tutaj teraz user page template,

5:13który będzie oplatał ten komponent. Wywalimy sobie sidebar

5:21i tutaj

5:26wrzucimy wyłącznie children, tester komponent możemy

5:30sobie wywalić i teraz z racji, że sidebar też przyjmuje page type

5:35to musimy sobie wejść do grid-template i tutaj wpisać page type

5:40i również podać tego props'a inaczej zmiana kolorów naszego

5:44serwera by się nie udała i wydaje mi się, że tutaj już wszystko

5:48mamy gotowe teraz przejdźmy sobie do na przykład notatek i podmień my user page

5:53template na grid-template. Zróbmy to zresztą w każdym z tych

5:57widoków, żebyśmy mieli pewność, że to działa, okej.

6:06Wejdźmy do naszej aplikacji zobaczymy co tam się dzieje. Widzimy,

6:10że mamy tutaj błąd związany ze złym dzieckiem, mamy

6:16tutaj props'a, który nie jest zgodny z prawdą, ponieważ

6:20to co podajmy w tym miejscu to nie jest element tylko to jest array,

6:25ponieważ nie podajemy tutaj tablicy

6:29z dziećmi. Dobra, teraz zobaczymy

6:33czy kolory działają. Okej, wszystko wygląda

6:37jakby było w porządku. Nasza

6:42notatka nadal nie jest zrobiona, więc wejdźmy sobie teraz do templates, details

6:47template, opleciemy to sobie user page

6:51template, zaimportujemy oczywiście styled-component

6:57z naszego pliku, user page

7:01template i teraz

7:07jak sobie zerkniemy na naszą notatkę to mamy

7:11już sidebar. Problem jest tylko taki, że jak będziemy sobie w twitters

7:15to również mamy żółty sidebar, wynika

7:19to z tego, że user page template w tym miejscu nie dostaję page type, a rozwiązanie

7:25tego problemu zajmie nam jeszcze chwilkę, więc zajmiemy się tym w następnej lekcji.