Next.js 13 w Praktyce: Komponent ze statystykami płatności

0:00Teraz, kiedy mamy już ogólną strukturę

0:02naszej strony, przejdźmy sobie do budowania tego

0:05komponentu tutaj ze statystykami, który widzimy właśnie w tym miejscu.

0:09Postaramy się odzwierciedlić jak najbliżej to, co mamy tutaj, jeżeli chodzi o teorię.

0:13Jeżeli chodzi o tą konwencję, czyli o walutę, którą posługuje się nasz

0:18użytkownik, to prawdopodobnie powinniśmy sobie tutaj stworzyć jakieś opcje

0:22użytkownika, który może sobie zapisywać to to będziemy za czytywać.

0:26Natomiast my przyjmiemy sobie tutaj w ćwiczeniu, że tak naprawdę waluta, którą

0:30posługuje się użytkownik to będzie polska złotówka.

0:33Jeżeli chodzi o resztę, to ja tutaj widzę

0:35na pewno to można wyodrębnić jako malutki

0:38komponent, bo tak naprawdę logika się tutaj nam powtarza.

0:40Mamy tu tylko jakąś sumę, która się zmienia i opis

0:44Walutę też możemy przekazywać jako props, czyli możemy sobie zbudować taki mały

0:47komponent, jeżeli chodzi o tą taką pojedynczą statystykę.

0:51Przejdźmy teraz do naszego edytora kodu.

0:55Mamy tutaj naszą stronę z portem.

0:56Ja sobie ją troszeczkę powiększa, żebyśmy mieli podgląd na większy widok i

1:01przejdziemy teraz tutaj właśnie do edytowania tej części.

1:05Może to jest przesuniemy sobie troszeczkę wyżej.

1:08Ja sobie to zapiszę, to

1:09też przesunę nad ten wrapper, żebyśmy mieli podgląd co gdzie się znajduje.

1:15I tutaj w środku naszego wrapper na statystyki przejdziemy teraz i zbudujemy.

1:20Tak, najpierw będziemy potrzebowali tak naprawdę,

1:23żeby wszystko odsunąć od siebie, od góry i od dołu, czyli div i tutaj class.

1:29No i musimy sobie ustawić na jakiś margin na x.

1:32Niech to będzie na razie 6.

1:33Zobaczymy jak to będzie wyglądać.

1:34Display zróbmy sobie na flex.

1:36Jeżeli chodzi o wysokość niech to będzie full jeżeli chodzi o Items Center.

1:43Może wysokość tak naprawdę nie będziemy

1:45potrzebować tutaj to nam się przyda Items Center i zrobimy sobie na przejść.

1:52Zapiszemy to sobie już w tym momencie.

1:54Tutaj spróbujemy sobie zamocować nasz przykładowy komponent.

1:59Jeżeli chodzi o treści na początku w naszym designie mamy tylko informacje na

2:03temat naszego miesiąca i roku, w którym aktualnie się znajdujemy.

2:07Przejdźmy

2:08do naszego edytora kodu i zaczniemy pisać logikę dla tego pojedynczego komponentu.

2:13Pakujemy to w div i tutaj jako H1 zrobimy sobie date.

2:18Użyjemy tutaj format dat jako datę.

2:23Jako dane po prostu przyjmiemy przyjmiemy sobie new date.

2:27Dzień dzisiejszy jako format chcemy wyłuskać tutaj tylko miesiąc, czyli cztery

2:32duże ELK i jak najbardziej nam tutaj wystarczą.

2:35Jeżeli chodzi o opis

2:37to możemy sobie zrobić tutaj span albo po prostu zwyczajne P.

2:42Tak naprawdę też powinno nam wystarczyć i

2:44tutaj w środku jako dana też możemy sobie skorzystać tak

2:48naprawdę z funkcji Format Date Defenders i jako Date też New date.

2:55Natomiast tutaj jako format przyjmiemy coś innego.

2:58Oczywiście tutaj nam chodzi o rok jeżeli spojrzymy na firmę.

3:02Tutaj potrzebujemy rok naszej daty pokazać, czyli przejdziemy tutaj i w tym

3:07momencie możemy użyć po prostu czterech literek Y jako małe literki.

3:11Zapiszemy sobie to już teraz sprawdźmy jak wygląda nasza strona.

3:15No coś tutaj się już pojawiło.

3:17Jeszcze nie mamy styli.

3:19Teraz warto sobie tutaj ustawić na ten div wysokość na h full.

3:24Wtedy wyszukuje to nam.

3:25Ten element mamy już w środku w środku dane niezależnie jak wysoki on będzie.

3:30No i teraz musimy skupić się na sterowaniu

3:32tych poszczególnych, tych poszczególnych napisów.

3:35Także przesunę sobie tutaj, żebyśmy więcej widzieli.

3:37I ta jedynka, czyli teraz musimy zdecydować klasę.

3:43No i tutaj będziemy potrzebowali tag text XML.

3:47Jeżeli chodzi o wielkość tekstu font ustawimy na semi bold.

3:50Żeby troszeczkę jednak ten tekst wyszczególnić.

3:54Leading zrobimy na 5 i tracking na wide zapiszemy to sobie.

4:01No i już mamy napis Jun.

4:03Wygląda to dużo lepiej jeżeli chodzi o

4:05naszą, o nasz drugi tekst, czyli o nasz rok, to jednak nie może on być tak bardzo

4:11widoczny jak miesiąc, tak jak to mamy tutaj w designie.

4:14Jednak jest to troszeczkę słabszą czcionką pisane i kolor też jest bardziej wyblakły.

4:19Dlatego przejdziemy

4:20do naszej implementacji i zaczniemy od tego, że

4:24na pewno jeżeli chodzi o wielkość tekstu musimy to zmniejszyć, żeby to nie było

4:29tak bardzo widoczne jak nazwa naszego miesiąca, czyli tekst XS.

4:32Już powinienem w tym pomoc.

4:34Mamy jak najbardziej jest ok.

4:35Jeżeli chodzi o kolor no to musimy zrobić tekst z link i ustawmy na 500.

4:42Też jest bardziej wyblakły i

4:44myślę, że to wszystko na chwilę obecną jak najbardziej wygląda to w porządku.

4:49Teraz co potrzebujemy zrobić?

4:51Generalnie na firmie mamy coś takiego, że tu jest jakaś większa przerwa.

4:56Czyli można tak naprawdę dojść do wniosku, że pewnie.

5:00Zamknięte w 1 div.

5:01I pewnie to tutaj po tej stronie.

5:05To będzie jakiś drugi list z tymi statystykami.

5:08Tutaj m.in. mamy coś, jakiś wrapper.

5:10Czyli możemy albo użyć jakiegoś

5:14sera, tutaj nadać mu klasę, żeby sobie rosną i odsunął nam te rzeczy.

5:18Natomiast możemy też zapakować tą część

5:21naszej statystyki, tą część statystyk w osobne 2 divy i wykorzystać tutaj flex i

5:26czas strefy space between do tego, żeby odsunąć od

5:31siebie te dwa elementy, żeby zawsze były po prawej po lewej stronie.

5:34Myślę, że ta druga strategia będzie dużo lepsza w tym przypadku.

5:38Także wróćmy do naszych statystyk.

5:41Mamy tutaj nasz główny komponent ze statystykami i tutaj mamy

5:46nasz komponent Flex, który ogarnia nam tutaj te wszystkie rzeczy.

5:49I teraz to jest część ze statystykami po lewej stronie.

5:54Załóżmy sobie

5:56i załóżmy sobie, że druga część będzie statystykami po prawej stronie.

6:00I teraz, żeby tutaj coś wpisać, żebyśmy mieli już jakieś dane, no to zaczniemy

6:04sobie budować kolejny ten komponent ze statystykami.

6:08Zobaczmy, jak to tutaj było w naszym dizajnie.

6:10Potrzebujemy styl tutaj i jakąś sumę w złotówkach wyrażoną.

6:16Także zaczniemy sobie od tego.

6:18Najpierw na sztywno wpiszemy sobie tutaj jakąś sumę.

6:22Po prostu możemy sobie wpisać 36,5

6:27jeżeli chodzi o pierwszą wartość i niech to będzie też pisane w dwójce.

6:33Wrzucimy tutaj tą sumę do środka.

6:35Jeżeli chodzi o walutę, czyli o to PLN to musimy sobie to też osobno zdecydować, bo

6:40widzimy, że waluta tutaj jest wyraźnie mniejsza w naszym dizajnie.

6:44Czyli prawdopodobnie możemy sobie wykorzystać w naszej dwójce

6:48i tutaj w tym miejscu możemy sobie wpisać nasze PLN, które nam się przyda.

6:54Prawdopodobnie będziemy musieli to za chwilkę sobie wystosować.

6:56Jeżeli chodzi o napis poniżej.

6:58Możemy też przyjąć, że to będzie PLN, czyli paragraf zwyczajny.

7:03No i tutaj możemy sobie skorzystać z formuły i też wykorzystać format do tego,

7:09żeby powiedzieć odpowiedzi tak, czyli zapłacono.

7:12Odpowiedź w tym miesiącu I tutaj

7:13skorzystamy też po prostu z dnia dzisiejszego i sformatowania w taki

7:17sposób, że po prostu wyciągniemy sobie miesiąc z tej daty.

7:22Zapiszemy to sobie teraz, sprawdzimy, jak wygląda nasza strona.

7:25No mamy, tutaj już coś się pojawiło.

7:27Teraz, żeby to odsunąć od siebie na prawą stronę zajmijmy się najpierw tym.

7:31Jeżeli tutaj mamy Items Center, no to

7:33musimy prawdopodobnie dodać tylko between i już.

7:36To pozwoli nam odsunąć tą całą resztę na prawą stronę.

7:39W razie czasu jak będą pojawiały się

7:41kolejne statystyki to po prostu to się będzie coraz bardziej tutaj przybliżał.

7:45Natomiast teraz zajmijmy się stylem tego pojedynczego komponentu.

7:49Zaczniemy od dwójki.

7:52Name Tutaj będzie podobnie jak poprzednio text XML potrzebujemy.

7:57Jeżeli chodzi o kolejne rzeczy to na pewno font semi bold.

8:02Dodatkowo przyda nam się tutaj leading też piątka i tracking.

8:06Zróbmy sobie na wait podobnie.

8:08To może jest podobne style naprawdę jak

8:10mieliśmy tutaj w tym poprzednim komponencie, czyli mamy jeszcze 5 6 PLN.

8:15Natomiast ten span musi być inaczej

8:17tutaj zaadresowany, dlatego mamy go opakowane tą w span class name tutaj.

8:24W tym przypadku będziemy potrzebowali margin po lewej stronie 1.

8:30Tekst zróbmy sobie na 80 tys. margin na 2.

8:34Na razie tekst ustawimy na 8 pikseli,

8:39z tego względu 8 tutaj ustawiam, bo generalnie jeżeli wziąłbym najmniejszą

8:43wartość tekstu w tej rundzie, czyli tekst jest x s to mamy 12 pisali.

8:49My potrzebujemy dużo mniejszą czcionkę

8:51tutaj, dlatego skorzystamy z wartości custom nowej.

8:55Ustawię to sobie na 8 pikseli.

8:57Potrzebujemy jeszcze aplikacje, czyli wszystko dużymi literami.

9:01Zapiszemy to sobie sprawdźmy.

9:02No PLN wygląda dużo lepiej, natomiast margines jest nieodpowiedni.

9:06Sprawdźmy sobie jak ustawiam sobie to na jedynkę.

9:08No już lepiej tutaj przybliżone do całej reszty.

9:12Także myślę, że możemy to sobie na chwilę obecną zostawić tak jak jest.

9:17Jeżeli chodzi o tutaj, o ten podpis jaka to jest statystyka?

9:22Zróbmy sobie class name.

9:25I tak naprawdę tekst xx.

9:29Podobnie jak to mieliśmy w poprzednim

9:31miesiącem i z rokiem, jeżeli chodzi o tekst kolor.

9:39I 500.

9:40Możemy sobie ustawić tak jak to w poprzednim było komponencie.

9:44Jeżeli chodzi o następne rzeczy, to myślę, że to powinno nam już teraz wystarczyć.

9:49Mamy już to jakoś tutaj wygląda, czyli

9:50mamy nasz komponent do poszczególnej statystyki i mamy już za sobą.

9:56Czyli możemy sobie teraz tak naprawdę

9:58wiadomo, że będziemy musieli powtarzać tę logikę.

10:00Będziemy mogli sobie teraz ten komponent wyciągnąć na zewnątrz.

10:05Tworzy sobie osobny komponent, który będziemy mogli sobie używać.

10:08Czyli zróbmy sobie tutaj w naszych komponentach STAT komponent Test X.

10:15Może to nazwijmy to stats.

10:18Single single stack komponentu.

10:21Myślę, że taka nazwa jest jak najbardziej

10:22ok i możemy skopiować tutaj Export default function.

10:28Przejdźmy do Single Component.

10:31Zmieniłem nazwę singiel Stats i tutaj jako read

10:36możemy wrzucić to co tutaj zbudowaliśmy już jako naszą, jako naszą zaślepkę.

10:42Czyli złapiemy sobie

10:44tego diva pojedynczego z pojedynczym statystykom zapiszemy to.

10:49Format będziemy musieli oczywiście tutaj sobie zaimportować z FMS.

10:54Uważaj jak będziesz importować,

10:56prawdopodobnie automatycznie będzie to z innej biblioteki.

11:00I tutaj już w tym miejscu, zanim zajmiemy się tym,

11:04żeby przekazywać odpowiednie propsy do komponentu, czyli stworzymy sobie tutaj

11:08interfejs i możemy sobie zrobić po prostu props.

11:14No i co będziemy potrzebować ten komponent?

11:16Zmienna będzie ta wartość, czyli jakaś jakiś number.

11:21Zróbmy sobie.

11:23SUM number.

11:26Jeżeli chodzi o następną rzecz, którą będziemy potrzebować to na pewno currency.

11:30I tutaj możemy sobie

11:33skorzystać z naszych z naszych typów, które są facto typami z Primy.

11:40Możemy sobie wykorzystać, że to będzie tak naprawdę typ właśnie ten enum, który mamy.

11:46Możemy to zrobić jako opcja domyślna dla

11:49nas, bo my tutaj wiemy, że tak naprawdę będziemy wykorzystywali

11:54polskie złotówki jako opcja, która będzie zakodowana na stałe w naszej aplikacji.

11:59Natomiast oczywiście w przyszłych

12:01rozwiniętej aplikacji radziłbym Ci zrobić też tutaj jakiś moduł do ustawień

12:06użytkownika, gdzie użytkownik może sobie ustawić swoją główną walutę w aplikacji.

12:10Według tego też będziemy prawdopodobnie

12:12musieli te statystyki temu użytkownikowi przeliczać.

12:15Natomiast na chwilę obecną ustawimy tutaj

12:17na na sztywno PLN, natomiast zaślepkę już możemy sobie wstawić currency.

12:24Oczywiście tutaj musimy te wszystkie rzeczy wyciągnąć najpierw sam i

12:31currency i to będzie typu single stack component.

12:36Props. Tak, to jest typ.

12:38I tutaj już możemy sobie użyć karencji i tutaj możemy użyć sam.

12:43Zapiszemy to sobie.

12:44Kolejna rzecz, której potrzebujemy nasz opis, czyli ta część.

12:48Tak naprawdę ona będzie musiała być przekazana jako parametr.

12:54Tak.

12:54Czyli możemy sobie zrobić description albo Super title.

12:59No i tutaj możemy sobie zrobić screena.

13:04Kiedy potrzebujemy w naszych procesach i

13:06title potrzebujemy później użyć sobie właśnie w tym miejscu.

13:10Tak zapiszemy sobie nasz komponent.

13:13Już mamy gotowy komponent, który możemy

13:15wykorzystać do tego, żeby powiela się nasze statystyki.

13:19Jeżeli sobie zrobimy logikę związaną

13:22właśnie z obliczaniem statystyk i właśnie logiką związaną z obliczaniem tych

13:27statystyk zajmiemy się w następnym odcinku.

13:29Jednak zanim przejdziemy do naszego

13:31odcinka, to po prostu wykorzystajmy już nasz nowo stworzony komponent.

13:36Jeszcze tutaj przydałoby się mamy go wyeksportowane.

13:39Dlatego tutaj w tym momencie w naszym też Wordzie.

13:43W miejsce tego diva pod spodem możemy wykorzystać nasz string komponent.

13:48Importujemy sobie go od razu.

13:50Będziemy mieli tutaj podpowiedź jakich danych potrzebujemy.

13:53Jeżeli chodzi o sumę to w naszym przypadku

13:57niech to będzie na chwilę obecną 36,6 tak jak to było poprzednio.

14:02Jeżeli chodzi o kolejny prop czyli currency.

14:05Niech to będzie tutaj przekazane też w subskrypcji PLN.

14:11Jeżeli chodzi o sam title

14:14to wrzucimy sobie ten twór, który zrobiliśmy tutaj, czyli That i in.

14:20I dokładnie to niech będzie ten string tutaj wrzucony właśnie w to miejsce.

14:25To już możemy sobie w.

14:28Zostawimy sobie na razie tego diva, zobaczymy czy to tak samo wygląda.

14:30Zobacz, mamy te same obiekty.

14:33Czyli w tym momencie możemy jak

14:35najbardziej tutaj zrezygnować z tego elementu.

14:38No i mamy nasz komponent ze statystykami.

14:41Teraz przejdźmy do tworzenia logiki

14:43związanej z obliczaniem tych wszystkich wartości.

14:46No bo troszkę tego tutaj mamy pokazane na tym ekranie.

14:49Do tego musimy sobie stworzyć logiczny,

14:52która nam policzy to, co użytkownik ma jeszcze do zapłaty w tym miesiącu, to co

14:56już zapłacił, to co zapłacił w zeszłym miesiącu i to co zapłaci w tym miesiącu.

15:03Przejdźmy teraz do tworzenia logiki związanej z obliczaniem tych statystyk.