React: Rozbudowa komponentu karty

16.8.x

0:00Cześć, w poprzedniej lekcji udało nam się stworzyć podstawowy komponent

0:04karty, który dodatkowo jest jeszcze molekułą, więc takim

0:08komponentem, który zawiera kilka atomów. Natomiast

0:12teraz zajmiemy się dalszym rozwojem naszego komponentu, ponieważ tak jak już

0:16mówiłem w poprzedniej lekcji na końcu mamy go aż trzy rodzaje. Mamy taką zwykłą

0:20notatkę mamy twittera i mamy artykuł i każdy

0:24z nich wygląda trochę inaczej, właściwie różnią się tylko tym detalem tutaj w tym miejscu, więc

0:29ostylowanie tego nie będzie takie kłopotliwe, natomiast mamy jeszcze oczywiście trzy

0:33kolory i tym też się musimy zająć w tej lekcji, więc może zacznijmy właśnie

0:37od tego koloru, bo to będzie całkiem ciekawe doświadczenie. Pierwsze

0:41co przychodzi mi do głowy kiedy myślę jak mógłbym rozwiązać ten problem, nie

0:46gwarantuję, że on będzie działał to zmiana tutaj jednej rzeczy. Oczywiście,

0:50pierwsze co zrobimy to nazwiemy tego props'a trochę inaczej, bo okazuje

0:55się, że nie będzie to tylko yellow. Będzie to jeszcze green i blue. Natomiast

1:00moglibyśmy to rozwiązać w inny sposób. Zamiast podawania tutaj yellow,

1:04który jest boolean'em w tym, w tej chwili. Możemy podawać coś

1:08na zasadzie Active Color i wtedy nie będzie

1:12to boolean, tylko będzie to props,

1:18który zostanie podany tutaj do tego komponentu i teraz

1:27jeśli sprawimy, że ten Active Color będzie albo primary albo secondary

1:31albo tertiary, to w tym momencie możemy sobie wykorzystać

1:36taką notację pozyskiwania rzeczy z obiektu i uzyskamy

1:43taki efekt, że jeśli ten próg zostanie podany to wyciągniemy sobie odpowiedni

1:47kolor z naszego theme. Jeśli natomiast nie podamy nic, to nadal będzie biały i w

1:51tym momencie jeśli sobie przejdziemy do naszego story. Podane

1:55tutaj Active Color primary, to

2:00faktycznie będzie to żółty, zrobimy sobie jeszcze dwa inne story.

2:05Jeśli sobie dodamy jeszcze inne nazwy do tego, czyli tutaj primary, secondary,

2:11tertiary to

2:18faktycznie nasze karty wyglądają już lepiej, ale

2:22nie ukrywam, że trochę tutaj specjalnie idę w złą stronę, bo chcę pokazać, że

2:26możemy się dość mocno zakopać w tych props'ach, jeśli faktycznie zrobimy

2:31tak że każdy props dotyczy innej jakieś rzeczy związanych

2:35z naszym komponentem i tutaj mamy Active Color, ale dodatkowo jak sobie zerkniemy,

2:39to mamy jeszcze tutaj zdjęcie, tutaj link, więc teoretycznie powinniśmy zawierać

2:44jakiegoś jednego props'a, który nam deklaruje czy ta karta jest

2:48dla twitter'ów, dla artykułów czy dla notatek i dlatego teraz

2:52pozbędziemy się tego props'a. Jak sobie wrócimy do naszego komponentu

2:57karty to moim zdaniem powinniśmy to nazwać

3:01Card Type i teraz Card Type

3:05to będzie taki props, który jest niewymagany. Zaimportujemy sobie prop

3:11types. Działać

3:16to będzie w ten sposób, oczywiście

3:23zmiennej Card Type jeszcze nie mamy, możemy ją sobie teraz stworzyć w tym komponencie

3:27i ona będzie zawierać faktycznie trzy

3:32rzeczy, robimy

3:36to dlatego, żeby zapobiec jakimkolwiek błędem związanym z

3:40literówkami, ponieważ jeśli mamy tutaj to w stringach, no to, po prostu literówki

3:45aż proszą się o to żebyś gdzieś się pojawić w naszej aplikacji, jak jeśli stworzymy

3:49sobie taki obiekt, to jesteśmy pewni, że nigdzie się nie pomylimy, bo jakakolwiek pomyłka

3:53związana z nazwą albo zmiennej albo klucza będzie

3:57po prostu od razu karana błędem i to jest sposób na to żeby weryfikować

4:01czy prop types jest dobrze napisany, ale wydaje mi się, że jest jeszcze jeden fajniejszy

4:06sposób i nazywa się to one of i teraz moglibyśmy

4:10faktycznie sobie zostawić tę zmienną, tak robiliśmy w poprzednim kursie. Właściwie

4:15to nie jest zmienna tylko const, ale możemy też zrobić coś takiego i

4:19to

4:26również będzie poprawne, więc to jest taki nowy sposób, który sobie tutaj zostawimy

4:30on nam weryfikuje czy podajemy props'a jako note, twitter albo article

4:35z tym, że note nie musimy podawać, bo note, to jest ta domyślna wartość, która

4:39będzie przypisywana automatycznie, jeśli tego props'a do komponentu nie podamy. Okej,

4:43skoro już to zrobiliśmy, to teraz możemy wrócić do kwestii kolorów. Tutaj mamy

4:48ten Active Color i moim zdaniem to nadal jest dobry pomysł żeby

4:52pobierać sobie ten kolor w sposób taki dynamiczny właśnie wyciągając

4:56ten klucz na podstawie props'a, który podaliśmy. Z tym, że nasz theme, jeśli

5:01sobie zobaczymy, zawiera te nazwy nieco inne, bo mamy na razie ten primary, secondary i tak

5:05dalej, ale jeśli się nad tym dobrze zastanowimy to tak naprawdę te kolory są

5:09powiązane bezpośrednio właśnie z tymi funkcjami naszej

5:13aplikacji, czyli z tymi nawet obszarami, którymi będziemy się zajmować. Jeśli tutaj damy

5:18sobie note, tutaj twitter, a tutaj article, to

5:22teoretycznie nic złego się nie stanie, bo to nadal będzie powiązane

5:27właśnie z tymi obszarami, którymi będziemy się zajmować w naszej aplikacji. Tutaj

5:32ten Active Color sobie zostawimy i po prostu podamy

5:36to w taki sposób, że Active Color to będzie tak naprawdę

5:40nasz card type i dodamy

5:44sobie do naszych starych Card Type, to

5:51tu powinno działać. Ten note możemy sobie wywalić, bo oczywiście on jest Default'owy, więc

5:55zwykła karta bez props'a. To będzie notatka

5:59i nasze kolory działają, więc wszystko

6:03jest tak jak należy, możemy też sobie spróbować podać jakiś props, który

6:08będzie niepoprawny i teraz powinniśmy mieć błąd i faktycznie

6:13tak jest failed prop type invalid card type i nawet mówi nam

6:17że podaliśmy tutaj roman, a powinno być albo note albo twitter albo article,

6:21więc to jest super, że mamy taką weryfikację tych props'ów, biorąc

6:26pod uwagę, że zmieniłem tutaj nazwy kolorów, to musimy jeszcze zerknąć

6:30na pozostałe komponenty, bo wydaje mi się, że button też miał tak, oczywiście

6:36ta logika związana tutaj z button'ami też się zmieni, okej i

6:41button to był chyba nasz jednyny komponent, który był jakkolwiek kolorowy. Mamy

6:46jeszcze yellow background, który mamy w naszym button icon w stories. Okej, sprawdźmy

6:55tylko czy to wszystko działa na pewno. Kolory działają, w porządku,

7:06więc jesteśmy na dobrej drodze, żeby ukończyć nasz komponent card. Zostały

7:11nam jeszcze tylko te dwa detale, zdjęcie i link.