Next.js 13 w Praktyce: Dialog do dodania nowej subskrypcji

0:00Czas zająć się w naszej aplikacji funkcjonalnością, która umożliwi naszemu

0:04użytkownikowi dodawanie nowej subskrypcji do istniejących już w naszym systemie.

0:09I to generalnie tutaj wyjdziemy poza komponenty po stronie serwera.

0:16Bo jeżeli wchodzą w grę jakieś interakcje, które będą zmieniały stan naszego

0:21komponentu, to prawdopodobnie będziemy musieli troszeczkę sobie tutaj zrewidować

0:24naszą logikę, bo póki co zarówno nasz dashboard jak i

0:28komponent z naszymi subskrypcja to są komponenty tak naprawdę po stronie

0:33serwera i wszystkie dane, które są tutaj są zapisywane po stronie serwera.

0:38No i nie można tutaj wprowadzać żadnych zmian już z poziomu użytkownika.

0:43Dlatego pierwszą rzeczą, którą sobie zrobimy to stworzymy sobie dialog,

0:48który będzie wyskakiwał po naciśnięty tego przycisku.

0:51Będzie to się działo podobnie jak mamy tutaj komponent po stronie klienta.

0:54Natomiast my tutaj stworzymy sobie nasz własny komponent, który będzie wyskakiwał

1:01nam dialog, który umożliwi nam dodawanie subskrypcji.

1:05Jeżeli chodzi o to jak on wygląda, to

1:07możesz teraz sobie zobaczyć na swoim ekranie.

1:10Będzie to nic innego jak prosty formularz.

1:13Jeżeli chodzi o dodatkowe funkcjonalności sobie to zostawimy, natomiast postaramy

1:16się jak najbliżej tego tutaj też wystylizować nasz komponent, nasz popup

1:21dialog, który będzie pokazywał formularz, którym będziemy mieli nazwę subskrypcji.

1:25Kategorie Adres URL naszego awatara wpiszemy sobie

1:29prawdopodobnie na sztywno na chwilę obecną koszt jakiś billing information czy next

1:35payment i po prostu guzik do zapisania nowej subskrypcji.

1:40Oczywiście po tak wykonanej akcji prawdopodobnie będziemy musieli jakoś

1:44zrewidować dane, które mamy już wygenerowane po stronie klienta.

1:48Jako że teraz nasze tabelki są

1:51tak naprawdę pól Server Components, nie ma tam mowy o żadnej modyfikacji danych.

1:56Możemy sobie rewidować dane po stronie serwera.

2:00Natomiast pierwszy

2:01pierwszy efekt, który użytkownik zobaczy po takim dodaniu takiej nowej zwróci byłby

2:06po tym jak jakby użytkownik odświeżył naszą stronę.

2:09Nie chcemy odświeżać strony, dlatego też skorzystamy sobie tutaj prawdopodobnie z

2:12jakiejś takiej po stronie serwera, która pozwoli nam robić mutacje po stronie

2:16klienta i już pokazywać aktualne dane po wykonaniu np.

2:21akcji zapisywania nowej edycji.

2:23Na chwilę obecną przejdźmy

2:26do naszego, do naszego kodu i implementujemy sobie najpierw ten

2:30dialog, który będzie wyskakiwał po naciśnięciu na guziki.

2:32W tym celu wykorzystamy sobie bibliotekę Radix.

2:37I tutaj mamy komponent dialogu,

2:39który będzie komponentem, który sobie wykorzystamy na nasze potrzeby.

2:43Generalnie już wykorzystywaliśmy i z tego co wiem, to

2:46mamy top down menu już wykorzystane w naszej aplikacji.

2:50Natomiast teraz będzie kolejny komponent z

2:51tej biblioteki, którą bardzo Ci polecam do.

2:55Wykorzystamy dialog do tego, żeby wyświetlić nasz formularz dodawania.

3:00Przejdźmy do edytora kodu.

3:03Otwórzmy sobie miejsce, w którym tak

3:04naprawdę będziemy potrzebować dodawać nową subskrypcję.

3:08I z tego co pamiętam mieliśmy to w aplikacji i w layoucie.

3:12Tutaj gdzieś był guzik do dodawania nowej subskrypcji.

3:16Sprawdźmy sobie API user ten komponent

3:19i tutaj mamy guzik do dodawania nowej subskrypcji.

3:22Tutaj już mamy drop menu z Radix a,

3:25natomiast to tutaj tą logikę będziemy musieli sobie za chwilkę teraz

3:28przerobić na to, co pozwoli nam dodawać nową subskrypcję.

3:33Czyli pierwsza rzecz, którą potrzebujemy

3:35to na pewno będziemy musieli sobie zainstalować ten komponent u nas.

3:40Weźmy sobie tutaj.

3:41W instalację kopiujemy sobie npm Install radix dialog.

3:45Przejdźmy do naszego terminala

3:48i zainstalujemy najpierw nasz dialog w naszej w naszej aplikacji.

3:53Dobrze, dialog mamy już zainstalowany.

3:55Możemy sobie znowu odpalić naszą aplikację.

3:57Wróćmy do naszego edytora kodu i zaczniemy sobie tutaj pisać naszą logikę.

4:02Otóż opiekujemy sobie nasz guzik jeżeli

4:05chodzi o dodawanie nowej subskrypcji w właśnie w komponent Dialog.

4:11Będzie to komponent Dialog Root.

4:14Jak wiemy już ten komponent jest

4:16komponentem po stronie klienta, dlatego też możemy skorzystać z dynamicznego

4:19komponentu, bo i tak tu już jest komponent po stronie klienta.

4:22Tak naprawdę ten API User button.

4:24Przypominam Ci, że ten komponent to jest wszystko to, co mamy tutaj w tym miejscu.

4:30To tutaj to jest komponent po stronie

4:32klienta, jako że mamy tutaj bardzo wysoką interaktywność z klientem, dlatego musimy

4:36sobie tutaj zostawić to po stronie klienta.

4:39Pakujemy to w dialog.

4:42I pierwszą rzecz, którą będziemy potrzebowali to na pewno root.

4:45Za importujemy to z Radix Dialog.

4:49Jeżeli chodzi o root też musimy zaimportować z radix dialog.

4:53Natomiast tutaj mamy standardowy import.

4:56My sobie to przerobimy, żeby już po prostu ten ród był zaimportowany.

5:00Zrobimy to coś takiego Path Dialog już w tym momencie.

5:05Ród mamy też zaimportowany wraz z tą paczką tutaj.

5:10Dobrze. Ród mamy już z głowy.

5:12Teraz kolejna rzecz, którą potrzebujemy jeżeli chodzi o dialog, to jak każdy

5:16dialog będzie potrzebował triggera, czyli dialog Trigger.

5:21W naszym przypadku trikiem będzie właśnie

5:23nasz guzik nowej subskrypcji, czyli możemy przenieść do triggera.

5:28Zapiszemy to sobie.

5:30Póki co jeszcze nam się nic nie będzie działo.

5:32Nie mamy żadnego dialogu, nic się nie otwiera.

5:35Możemy zmniejszyć ten ekran.

5:38Na razie się nic nie dzieje.

5:39Natomiast za chwilkę zacznie się dziać.

5:41Otóż możemy dodać sobie już teraz portal.

5:44Portal to jest rzecz też dostarczana nam właśnie z dialogiem

5:49z Radix Suite i to jest jakby nakładka na portal i tutaj w środku będziemy mogli

5:57sobie wyrenderować nasz overlay i dialog content.

6:01Zaczniemy od naszego overlay i

6:03odpowiedniego usytuowania go, żeby po prostu wszystko było zaciemnione.

6:07Jeżeli mamy dialog otwarty, czyli dialog overlay.

6:10I tutaj potrzebujemy tak naprawdę tylko i wyłącznie żadnych żadne niepotrzebne.

6:17Potrzebujemy tylko style class name.

6:19I w naszym przypadku będzie to wyglądało

6:21tak, że chcemy tak naprawdę, żeby ten overlay zajmował nam całą tutaj

6:26powierzchnię naszego, naszego, naszej aplikacji, czyli fixed.

6:33Pozycja fix zrobimy sobie insert 0.

6:37Jeżeli chodzi o zet zróbmy na 10, żeby to

6:39było troszeczkę wyżej w hierarchii naszych komponentów.

6:42BG ustawimy sobie na 950 bardzo ciemne tło, BG Opactwo ustawimy na

6:5180, żeby była jakaś jednak przezroczystość.

6:55Zróbmy sobie jeszcze jeżeli chodzi o date data.

7:00Tutaj wykorzystamy też

7:03customowe State Open równa się Open i tutaj możemy to animować Animate.

7:12I overlay slow.

7:14Zauważ, że nie mamy tutaj podpowiedzi naszego IDE z tego względu, że jeszcze nie

7:18rozszerzyliśmy sobie konfiguracji naszej CSS.

7:22Jeżeli wrócimy tutaj do dokumentacji.

7:25Jeżeli chodzi o time in CSS to zobacz, że

7:27musimy tutaj tak naprawdę sobie rozszerzyć naszą konfigurację, żeby móc

7:32korzystać z tych samych animacji, z których korzystają twórcy dialogu.

7:38Kolory nie potrzebujemy, natomiast key frames jak najbardziej overlay content.

7:43Możemy to tutaj już rozszerzyć.

7:46Wskakujemy sobie do naszego rozszerzenia, do naszych frames.

7:50Jeżeli chodzi o animacje, potrzebujemy te dwie animacje.

7:54Potrzebujemy rozszerzyć sobie tutaj nasz

7:56config i wklejamy sobie te dwie animacje, które są nam potrzebne.

8:00Zapiszemy to sobie i już możemy sobie konflikt zamknąć.

8:03Już w tym momencie.

8:04Jeżeli zacznę pisać animacje overlay tą już powinienem mieć podpowiedź.

8:09Animate No i już mamy overlay.

8:12Już teraz wszystko działa poprawnie.

8:13To znaczy, że dobrze sobie.

8:15Zanim pracowaliśmy, zaimplementowali śmy zmianę w tych stylach.

8:18Zgodnie z dokumentacją dialogu przejdźmy sobie do naszego, do naszych.

8:24To nasi tutaj.

8:27I do naszej strony i widzisz, że już mamy

8:30overlay, który został poprawnie wyświetlony.

8:34Przejdźmy teraz do importu i implementacji

8:40dialogu panelu, który się będzie wyświetlał.

8:42Czyli potrzebujemy na pewno dialog content i dialog content.

8:47Możemy sobie tak naprawdę ustawić tutaj wszystko co chcemy.

8:51Natomiast pierwsza rzecz, którą ja bym

8:52chciał najpierw sobie tutaj ustawić, to na pewno chciałbym ustawić

8:58dialog close button tak, żebyśmy mogli sobie to jakoś zamykać.

9:03I w tym momencie sobie tutaj skopiuję z boku przykładowy button.

9:06Zapiszemy to sobie. Jeżeli chodzi tu o logikę, no to tak

9:09naprawdę dialog chcemy zaznaczyć, bo chcemy dodać swój customowe komponent.

9:15Tutaj są proste style, żeby to jakoś wystylizować.

9:18Czyli przejdźmy do Content class name.

9:23No i zacznijmy od tego, że

9:25możemy mieli pozycje fixed i left ustawimy sobie na 50% i right albo top.

9:34Tak naprawdę powinno nam wystarczyć.

9:36Też ustawimy sobie na 50%, ustawimy dziesiątkę max.

9:43Ustawimy sobie maksymalną wysokość tego komponentu na wartość custom.

9:50Niech to będzie uchwyt i jeżeli chodzi o

9:54szerokość tego komponentu to chciałbym żeby to było maksymalnie 480 pikseli.

10:00Jeżeli chodzi o animację i translate to zaczniemy sobie tutaj to dodawać.

10:06Zamkniemy bocznej teraz jak translate i pierwsza rzecz którą chcemy zrobić to

10:11chcemy przesuwać po X i też zróbmy

10:15tutaj 50% translate y, tutaj też 50%.

10:23Round.

10:25Zróbmy sobie 3 x zaokrąglamy rogi.

10:29Beginning ustawimy na 50 p.

10:36Padding ustawimy tu na.

10:39Niech będzie 6.

10:40W naszym przypadku Shadow.

10:43Ustalimy sobie na wartość customowe to wszystko jeżeli chodzi o Shadow.

10:49Ja sobie tutaj przykleję te style, bo to

10:51jest coś, co ja po prostu sobie wygenerowałem w internecie.

10:55Jeżeli chodzi o shadow

10:57style CSS to jest mnóstwo generatorów do shadow, które możesz sobie wykorzystać.

11:03No i już mamy coś nam się pojawia, Możemy nasz element tutaj zamknąć.

11:09Sprawdźmy sobie czy wszystko tutaj mamy też dobrze wystylizowane.

11:15Może to przesunięcie, ale na razie sobie kasujemy.

11:19No mamy już teraz na środku wszystko wygląda ok.

11:23Mamy nasz nasz panel, mamy nasz dialog, content.

11:27Oczywiście musimy tutaj teraz postarać się

11:29o to, żeby tak naprawdę wszystko było lepiej widoczne.

11:33No bo póki co mamy ten overlay, który jest na dziesiątkę.

11:38Spróbujmy sobie tą dziesiątkę tutaj

11:40skasować i zobaczmy, jaki sposób to teraz wyglądało.

11:43Cały czas mamy problem z wyświetlaniem tego panelu.

11:46Sprawdźmy nasze style.

11:48No i co tutaj mamy źle?

11:49To oczywiście literówka nam się wkradła.

11:52Tego nam tutaj brakuje.

11:53W tym momencie mamy jakiś dialog z jakimś guzikiem do zamykania go.

11:57Oczywiście jeszcze nie wygląda to

11:59dosyć atrakcyjnie, natomiast zajmijmy się teraz tym contentem,

12:02czyli tym formularzem, który będziemy potrzebować do tego, żeby dodawać nową.

12:07Subskrypcje. Czyli funkcjonalność dialogu mamy za sobą.

12:10Jeżeli chodzi o accessibility, to jest to wszystko tutaj pomyślane dobrze.

12:13Teraz zajmiemy się tym, co będziemy wyświetlać tutaj, w środku.