Next.js 13 w Praktyce: Komponent z danymi widoku subskrypcji

0:00Teraz, kiedy mamy już nasz komponent ze statystykami na stronie subskrypcji za

0:04sobą możemy zająć się komponentem, który będzie wyświetlał nam nasze dane.

0:08Przejdźmy teraz do firmy.

0:10Sprawdźmy, czy mamy wszystkie informacje w naszej bazie danych, które potrzebujemy.

0:14Mamy name to na pewno mamy kategorię mamy Billing period last payment.

0:18Tutaj musimy sobie sprawdzić czy w naszym

0:20skrypcie znajdującym mieliśmy coś takiego jak last payment.

0:24Zobaczmy nasze dane.

0:25Jeżeli chodzi o subskrypcje to każda

0:27subskrypcja ma tak naprawdę 1 payment, czyli prawdopodobnie sobie tych danych nie

0:32będziemy wyświetlać, bo nie mamy historii odpowiedniej do tego, żeby to wyświetlić.

0:36Natomiast na pewno możemy sobie pokazać

0:38next payment, bo to będzie payment, który jest aktualnie w naszej subskrypcji.

0:42Status też sobie pokażemy.

0:43Koszt i miejsce na guzik do edycji

0:45subskrypcji też sobie jak najbardziej w chwili obecnej możemy zrobić.

0:48Przejdźmy teraz do edytora kodu.

0:50Miejsce, w którym będziemy budować naszą tabelkę oczywiście znajduje się tu.

0:55Tutaj mamy nasze statystyki.

0:57Myślę, że też dobrym pomysłem na Factory

0:59tego byłoby wyciągnięcie tego komponentu ze statystykami do osobnego komponentu.

1:04Natomiast zostawimy to sobie na chwilę obecną.

1:07Zajmiemy się tutaj naszą tabelką.

1:09Myślę, że później, jeżeli starczy nam

1:11jeszcze czasu w tym kursie, to zajmiemy się refaktoryzacji tego kodu.

1:14Albo na końcu w podsumowaniu po prostu dam Ci pewne wskazówki, które możesz

1:18zastosować do tego, żeby robić ten projekt jeszcze lepiej, żeby móc

1:21go pokazać, nazywać jako projekt do portfolio czy jako już tak naprawdę pomysł

1:26na jakiś tam mały SaaS biznes, na którym kiedykolwiek może uda Ci się zarabiać?

1:32Wróćmy teraz do implementacji naszej tabeli z danymi.

1:35Oczywiście całą implementację zaczniemy

1:37sobie standardowo, tak jak to zaczynaliśmy w naszym poprzednim komponencie.

1:41Otóż potrzebujemy najpierw tak naprawdę

1:44zbudować jakąś dwójkę, która będzie mówiła nam, że to są subskrypcje, czyli H2 i

1:52jeżeli chodzi o styl to tutaj class name i potrzebujemy text lg i font semi bold.

2:01Zapisujemy to sobie.

2:02No już mamy tutaj napis Subskrypcja jest jak najbardziej w porządku.

2:06Teraz kolejna rzecz, którą musimy się

2:08zająć to na pewno div, który będzie position relative i jeżeli chodzi o margin

2:15top zrobię sobie dwójkę i zapiszę sobie to będzie nasz.

2:20Jeżeli to jest inspektor

2:22to tak naprawdę to jest ten div, w którym będzie się mieściła nasza tabelka.

2:25To jest relatywnie kolejna rzecz, która będzie już w tym wewnętrznym drzewie.

2:30No to będzie wrapper na naszą tabelkę.

2:33Tutaj musimy sobie zrobić też klasę i zaczynamy od pozycji Absolut.

2:38Dodatkowo bottom zero left 0

2:44right też 0 i top na 0 ustawiamy żeby rozszerzyć sobie nasz diff papierze.

2:51Dodatkowo jeżeli chodzi o ten tutaj

2:54wrapper to na pewno potrzebujemy tak naprawdę overflow

2:59x auto i overflow Y na auto no i minus max ustawimy sobie na minus 6 z tego względu,

3:09że chcemy tak naprawdę, żeby nasza tabela zajmowała całą powierzchnię.

3:14Przejdźmy teraz do samej tabelki.

3:17I tutaj mamy tabelę.

3:18Jeżeli chodzi o klasę to

3:21musimy wykorzystać menu full standardowe jak to mieliśmy poprzednio.

3:26No i tutaj header

3:28czyli head i pod spodem nasze kolumny czyli pierwsza kolumna mamy name.

3:34Druga kolumna to mamy category

3:37trzeciej kolumnie będziemy mieli billing period w naszej czwartej kolumnie.

3:42W naszym przypadku będzie No eksperyment.

3:45Piąta kolumna w naszych danych to jest payment status.

3:49Kolejna kolumna naszych danych to będzie

3:51koszt, no i ostatnia kolumna, którą będziemy potrzebowali.

3:55No to kolumna ON z guzikiem EDIT.

3:59Natomiast musimy sobie tutaj zaznaczyć i

4:02ominiemy to sobie tutaj już span z tego względu, że ma to być niewidoczne.

4:07Dlatego musimy tutaj sobie skorzystać z klasy window tej klasy.

4:12Mianowicie z klasy, która się nazywa

4:15either only, żebyśmy dostali też kolumnę, która będzie odpowiedzialna za ten guzik.

4:20EDIT na końcu naszej tabelki.

4:22Zapiszemy sobie to teraz, bo już mamy tutaj naszą kolumnę nasz header.

4:26Możemy teraz się zająć stylem tego,

4:29żebyśmy tak naprawdę już te style mieli za sobą.

4:32Jeżeli chodzi o rzeczy związane z kodem.

4:34Także przejdźmy do I klasy name i zaczniemy sobie od styki,

4:40bo też chcemy upewnić się, że jeżeli będziemy mieć

4:43więcej subskrypcji to wszystko zostanie w swoim miejscu.

4:46Dodatkowo top na 0 ustawimy sobie

4:50zet, na 10 border ustawimy sobie bottom border też kolor ustawimy na.

5:00Niech to będzie 50 albo zróbmy sobie 300.

5:03Jeżeli chodzi o nasz border zrobimy sobie nothing 50.

5:07Jeżeli chodzi o biegi Opacity ustawimy to na 75, padding na Y ustawimy sobie na 2.

5:15Padding po lewej stronie.

5:16Przypominam, że jesteśmy odsunięci dokładnie o 6 24 pixele.

5:21Dodatkowo tekst na lewą stronę, bo to jest ta pierwsza kolumna i tekst.

5:29Sam ustawimy sobie jeszcze font normal jest ok.

5:34Dodatkowo zróbmy sobie może ten font light.

5:37Jeżeli chodzi o header będzie to chyba lepiej wyglądało Tekst z ING

5:42500 i back drop blur ustawimy sobie i back drop filter.

5:47Tak to drop zapiszemy.

5:51Sprawdźmy jeszcze style.

5:52No jest to jak najbardziej w porządku.

5:54Myślę, że możemy sobie teraz tak naprawdę

5:56ten class nam tutaj cały skopiować i zastosujemy to w kolejnych

6:02kolumnach, czyli kategoriach możemy sobie wkleić.

6:06Oczywiście tutaj PPM

6:08wyrzucimy sobie z tego i zapiszemy dodatkowo to samo tak naprawdę możemy

6:14sobie przekleić do kolejnych naszych kolumn.

6:18Tu wklejamy klasyczny last name.

6:24Oczywiście przez ty.

6:24Widzisz, jeżeli nie wiem, nie korzystałeś nigdy.

6:27Winda to bardzo dużo zdarza się tych powtórzeń.

6:30Natomiast jeżeli chodzi o to na pewno kolejnymi krokami tutaj wartymi

6:36podjęcia to byłoby refaktoryzacji tego kodu, tak żebyśmy jakby.

6:42Żeby to wszystko nie powtarzać tego kodu

6:45na tyle, to moglibyśmy sobie stworzyć po prostu komponent, który jest table.

6:49Cały komponent tabelki mógłby być

6:51komponentem osobnym i dodatkowo tutaj jako header jako Column header column head

6:57moglibyśmy sobie stworzyć komponent, który miałby tę klasę już narzucony.

7:01No i byśmy mogli sobie tutaj

7:02tylko jako dynamiczna wartość po prostu przerzucać może padding left czy write

7:07i czy klasę, którą możemy sobie też wrzucić z zewnątrz, bo tutaj mamy tak

7:11naprawdę różnice, tylko mamy w tym i tutaj w ostatniej w ostatniej kolumnie

7:16powinien być tekst stricte, bo to jest nasz kod i też PR o wartości 6.

7:21Chcemy to odsunąć.

7:22No i tak naprawdę to jest jedyna różnica, reszta się w ogóle nie różni.

7:25Dlatego prawdopodobnie moglibyśmy sobie tutaj wyeksportować

7:29dodatkowy komponent w postaci tabelki i to sobie jakoś z refaktoryzacji.

7:34Na chwilę obecną staramy się to zrobić na

7:37sztywno, żeby zobaczyć czy to jest Style się zgadzają.

7:39Mamy nasz header, teraz zajmiemy się body.

7:43No i tutaj analogicznie

7:46mamy naszą datę sprawdzić czy mamy naszą datę w naszym komponencie.

7:51Możemy. Mamy Get Data for Dashboard.

7:53Możemy zmienić już tą nazwę subskrypcji.

8:00W kolejnych krokach czujemy tę funkcję.

8:02Ona wygląda

8:04analogicznie do tego, co mieliśmy w naszym kodzie, dlatego prawdopodobnie wyciągniemy

8:08to sobie i pokażę Ci w jaki sposób możesz sobie w ogóle używać Server Actions.

8:11Teraz wróćmy do body

8:13i smakujemy sobie naszą daną nasze dane map i tutaj subskrypcje.

8:19No i pojedyncza subskrypcja.

8:22Możemy sobie tutaj zrobić return i w naszym przypadku jeżeli chodzi o

8:26return no to pewnie 4 ki w naszym przypadku to będzie subskrypcja.

8:34I tutaj po wejściu do środka mamy, czyli.

8:38No i musimy sprawdzić po kolei.

8:40I tak pierwszy test to będzie tak naprawdę

8:43jeżeli chodzi o nasz komponent, czyli nazwa naszej subskrypcji.

8:47Weźmy sobie to tutaj.

8:49Tak naprawdę będziemy potrzebować jakiegoś

8:51rapera, bo tak naprawdę na nazwę składa się awatar i nazwa.

8:57Czyli tutaj znowu analogicznie do tego co mieliśmy w

9:00poprzednim komponencie możemy sobie użyć komponentu Image Next.

9:04Czy jest i tutaj jeżeli chodzi o wartości tego komponentu Image?

9:09Myślę, że możemy tutaj się cofnąć do naszego komponentu Dashboard i

9:13spokojnie możemy sobie skopiować dokładnie to co mamy w środku.

9:21Zapiszemy to sobie już powinno się podawać jakieś wartości.

9:23Tak?

9:24Jeżeli chodzi o style tego elementu to też class name.

9:29I tutaj mamy flex.

9:31Items Center dodatkowy pojazd HiFi na start i lub na dwójka.

9:40Sprawdźmy, czy są dokładnie te same style co w pierwszej tabelce.

9:43Z tego co wygląda to jest dokładnie to samo, czyli prawdopodobnie pomyślimy o

9:46jakiejś refaktoryzacji później i wyciągnięciu tej tabelki do osobnego

9:50komponentu, który będziemy mogli sobie używać w naszej naszej aplikacji.

9:54Zapiszemy to sobie i już to wygląda dużo lepiej.

9:58Jeżeli chodzi o style na tutaj na TD to

10:01musimy zająć się tym, żeby to odpowiednio odsunąć, czyli void space

10:05lub po prostu ustawiamy łapkę znaną w tym przypadku padding na y ustawimy na 4

10:13padnij na lewo, oczywiście na 6 musimy to sobie odsunąć od krawędzi.

10:17Tekst na s, m i myślę, że to wszystko mamy tutaj już podsuwane to wartości.

10:23Zobacz, że już mamy też scroll też działa tak jak powinien działać.

10:27Tak, jeśli mamy za mało miejsca to jesteśmy w stanie skalować sobie po naszej

10:30subskrypcje na header zostaje nam tutaj u góry.

10:34Co jest tak naprawdę to tym rozwiązaniem, którego potrzebujemy?

10:38Dobrze, przejdźmy do kolejnej.

10:40Do kolejnego, kolejnego elementu, czyli naszej kategorii, czyli kiedy?

10:45I tutaj będzie subskrypcja kategorii.

10:51Kolejnym elementem w tabelce będzie

10:53Billing period i subskrypcję Billing Period.

11:00Tutaj jak widzisz powtarza się z tego co

11:02mieliśmy w Burdzie, także możemy to sobie tutaj użyć jako ćwiczenie.

11:06Jeżeli chodzi o następną rzeczą to mamy next payment.

11:08Zerkniemy jak tutaj formatować ten

11:10eksperyment w taki sposób, w podobny sposób.

11:13Myślę, że możemy to tutaj sformatować też także format next payment date.

11:19Mamy już kolejne, dane się nam pojawiają.

11:22Kolejna rzecz to jest payment status.

11:25Tutaj jest coś nowego, czego nie mieliśmy wcześniej.

11:27Dlatego musimy się zastanowić, w jaki sposób będziemy sobie to teraz wyświetlać

11:30tutaj i zastanówmy się, w jaki sposób to sobie wyświetlać.

11:33Możemy sobie tutaj zrobić instrukcję warunkową.

11:36Tak naprawdę mamy subskrypcję, mamy

11:38subskrypcję Payments i my sobie bierzemy pierwszą.

11:43Tak naprawdę ona ma status.

11:44Jeżeli ten status jest równy payment status niech będzie na pat.

11:50No to otwieramy nawias i będziemy mieli dwie sytuacje.

11:54Musimy zwrócić dwa komponenty.

11:57W pierwszym przypadku niech to będzie div.

12:01I tutaj wykorzystamy remiks Icons. Potrzebujemy ikonek.

12:05Jeżeli zobaczymy na nasz design firmę

12:07to zauważ, że mamy tutaj ikonki, jakiś taki checkbox i coś z krzyżykiem.

12:13Także będziemy mogli sobie wykorzystać

12:15ikonki z Remix Icons, które już wcześniej sobie korzystaliśmy.

12:20Remiks ikon i tutaj jest.

12:22Sprawdźcie czy jest ikonka checkbox.

12:25Sprawdźmy jakie to ikonki okrągłe, Czy mamy ten znaczek?

12:30Tak myślę, że jest tutaj mamy checkbox i

12:33cel, czyli możemy sobie jak najbardziej użyć tych dwóch ikonek.

12:36Nadamy im odpowiedni kolor.

12:38Czyli przejdźmy teraz do naszej implementacji tutaj i jako pierwsze.

12:42W przypadku kiedy subskrypcja jest

12:44opłacona potrzebujemy naszej i tutaj class name.

12:48I w tym momencie musimy użyć R i checkbox Niech będzie Fill.

12:55I text green ustawimy na 600.

13:00Kolejnym elementem, który będzie tutaj

13:03niech będzie napis po prostu pad, czyli Pi.

13:06Musimy stylowo wystylizować klasę name

13:10i tutaj będziemy Flex Items Center i Cap ustawimy na dwójkę.

13:17Czyli pierwszy przypadek.

13:19Kolejny przypadek, który potrzebujemy, bo tutaj będziemy mieli błąd.

13:24To tutaj musimy wykorzystać inną ikonkę i to będzie inne determinanty.

13:28I oczywiście tekst red.

13:31Niech będzie to jest 600 i będzie tutaj jako status not pad.

13:36Zapiszemy nasz komponent.

13:38No i już mamy tutaj.

13:39Generalnie rzecz biorąc.

13:43Tu pokazane, natomiast zabrakło nam tutaj nazwy.

13:47Tutaj brakuje nam kilku.

13:50Zapiszemy to. Mamy już kółeczko i chcemy fill.

13:55Niech będzie fill i tym mniej też potrzebuje.

14:02No i mamy już wyświetlone dane jeżeli

14:04chodzi o które są zapłacone, które nie są zapłacone.

14:08Kolejna rzecz, którą potrzebujemy sobie tutaj zrobić to tak naprawdę mamy price

14:13karencji, czyli kolejna rzecz tutaj w chwili i potrzebujemy tutaj

14:18też div, który będzie nam latał tutaj price i karencji czyli P.

14:24Niech będzie.

14:27I drugie. Niech to będzie nasze konsekwencje.

14:31Zapiszemy to sobie, to też będziemy myśleli skorzystać z naszych styli, czyli

14:35standardowo Flex Items Center i GAP możemy ustawić na dwójkę.

14:40Tutaj jeszcze warto, bo generalnie rzecz

14:43biorąc chcemy, żeby to się wyświetlało po prawej stronie.

14:46Możemy spróbować tak naprawdę czas i find zrobić.

14:53Przesunięto nam te elementy na sam koniec.

14:55Tak jest ok.

14:57Myślę, że jak najbardziej jest to w porządku.

14:59Tylko tutaj oczywiście nie możemy zapomnieć o globalnych stylach.

15:02Czyli weight wrap padding na y.

15:08Zrobimy sobie czwórkę padding na literę M, przejść tekst z M, to zaraz będziemy

15:15musieli założyć na wszystkie nasze elementy, które wyświetlają nasze dane.

15:21Tekst zostawiamy taki, jaki jest.

15:23Już tu się wyświetla dużo.

15:25Teraz musimy sobie skopiować tak naprawdę te style.

15:29I skopiować też sobie na inne rzędy.

15:32Natomiast tutaj padding write nie będziemy potrzebować.

15:35Myślę, że pod nim y jest ok.

15:37Wrap jest ok.

15:39To też zmniejszy nam ten napis teraz plus.

15:42Analogicznie możemy sobie po kopiować tutaj do kolejnych elementów.

15:47Mamy już wszystkie te D.

15:49Teraz zapiszemy to sobie już nasza tabelka swój wygląd też zmieniła.

15:53Myślę, że tak naprawdę

15:56ten podstawowy wygląd tej tabelki chyba mamy już za sobą.

15:59Sprawdźmy jeszcze firmę.

16:00Oczywiście jeżeli chodzi o to sortowanie,

16:02to już wspominałem wychodzi tu poza zakres tego kursu.

16:06Musielibyśmy tutaj totalnie przebudować

16:08naszą tabelkę, zrobić dodatkową logikę, która wysyła zapytania.

16:14Jeżeli chodzi o filtry, o sortowanie z za pomocą Primy.

16:19Natomiast zalążek takiej logiki masz już w

16:22swoim kodzie, bo generalnie dane które sobie pobieramy na chwilę

16:26obecną w naszym komponencie subskrypcji to zobacz, że mamy tutaj order by.

16:31I mamy eksperyment

16:34i możemy sobie tak naprawdę sortować to po obojętnie jakim polu.

16:38Jeżeli tutaj sobie zobaczymy zobaczy.

16:40Możesz to sortować po obojętnie jakim

16:42polu, po name, po ono, id, po payment, po cenie.

16:46Możemy sobie to sortować po cenie i wtedy

16:48dostaniemy te dane posortowane pod względem ceny.

16:52Zróbmy sobie taki przykład, a teraz usuniemy sobie ten pierwszy

16:57i zobacz w jaki sposób zmienią się dane tutaj wyświetlone.

16:59Zobacz, że mamy od najtańszej subskrypcji do najdroższej.

17:03Jeżeli sobie użyjemy cennik to mamy od najdroższej subskrypcji do

17:07najtańszej i w taki sposób moglibyśmy tutaj budować sobie

17:11czy to filtrowanie tych rekordów, czy to sortowanie tych rekordów.

17:15Natomiast ja tutaj sobie wrócę, zostawmy ten eksperyment, niech to będzie.

17:18Tak było domyślnie firmie oczywiście potem.

17:22Jeżeli chodzi o aktywny aktywne style danej kolumny, to jak na

17:27rzucimy sobie jakiś jakiś filter, jakiś sortowanie to możemy sobie też aktywnie

17:31tutaj wystylizować tą kolumnę i wszystkie te elementy w tej kolumnie.

17:35Myślę, że jeżeli chodzi o

17:37element z tą tabelką to mamy chyba za sobą Sprawdź jeszcze tą firmę.

17:40A jeszcze mamy ten guzik tutaj do edycji.

17:43Czyli możemy sobie jaką jakąś zaślepkę zrobić.

17:46To będzie nasze ostatnie CTRL czyli wtedy.

17:51No i tutaj będzie potrzebny jakiś button.

17:54Jeżeli chodzi o ten button to zróbmy na

17:56razie statyczny baton czyli i zróbmy sobie.

18:01Skorzystamy znowu z Icon Remix Icons i tu będzie.

18:05I to akurat nazwę pamiętam pensję.

18:10Line.

18:12Margin Lite ustawimy sobie na jeden tekst na LG.

18:16Jeżeli chodzi o kolejny element no to mamy edit.

18:22Czyli możemy zrobić lepiej.

18:24EDIT W środku tego P możemy zrobić jeszcze

18:27jako ESL only dla osób, które korzystają z czytników, żeby wiedziały, którą

18:33subskrypcję będą edytowałem, czyli tutaj Class name.

18:37Chcę troszeczkę zasad

18:39zalążek accessibility i dla tej aplikacji ESL only.

18:43I tutaj wpisujemy np. tak.

18:47Czyli wiadomo, że ktoś będzie wiedział jak się tutaj edytuje.

18:50Zapisujemy to sobie, sprawdźmy.

18:52No już nam się tutaj coś wyświetla.

18:55Przejdźmy teraz do rysowania tego batona, czyli klasy.

18:58I w tym momencie zrobiłem sobie Flex Items Center.

19:05DET MD.

19:08Leasing na 200.

19:12I tekst.

19:13Kolor tekstu ustawimy sobie na 600.

19:16Już mamy nasz guzik przygotowany.

19:19Jeszcze brakuje nam tutaj jakiś przecinków.

19:22Tak, także możemy sobie ustawić jeszcze X na 2.

19:27Zapiszemy to sobie. No i już.

19:28Wygląda to de facto praktycznie tak samo jak w naszym Maku.

19:34Sprawdźmy jeszcze na kolor tego tekstu.

19:36Ten tekst jest jednak troszeczkę za jasny.

19:39Mam wrażenie, że możemy sobie zrobić tekst z e-ink, spróbować na 700 ustawić.

19:43No teraz to już wygląda lepiej.

19:45Także mamy przygotowany widok

19:47subskrypcji, mamy statystyki, jakąś pierwszą logikę na nasze statystyki,

19:52mamy tabelkę związaną z widokiem naszych danych.

19:55Teraz przejdźmy do logiki, która będzie związana z dodawaniem subskrypcji.