Next.js 13 w Praktyce: Funkcja dodająca nową subskrypcję
Projekt aplikacji SaaS
8 godz. 8 min · Next.js · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Pełne zrozumienie architektury i możliwości frameworka Next.js
- Zdolność tworzenia bezpiecznej autoryzacji i autentykacji z Clerk
- Efektywne zarządzanie danymi za pomocą Prismy i PostgreSQL na DigitalOcean
- Umiejętność budowania intuicyjnej nawigacji za pomocą routingu Next.js
- Umiejętność wdrożenia aplikacji na Vercel
- Dogłębne zrozumienie zarządzania stanem i wykorzystywania server actions
Autoryzacja i autentykacja z Clerk
Naucz się tworzyć bezpieczne systemy uwierzytelniania i autoryzacji, korzystając z Clerk. Pokażę Ci, jak to robić krok po kroku, aby Twoje aplikacje były bezpieczne i profesjonalne.
Integracja z bazą danych za pomocą Prismy
Zrozumiesz, jak skutecznie i bezboleśnie połączyć swoją aplikację Next.js z bazą danych PostgreSQL na DigitalOcean. Pokażę Ci, jak używać Prismy, aby ułatwić ten proces.
Routing i nawigacja
Dowiesz się, jak zarządzać routingiem i nawigacją w swojej aplikacji, aby użytkownicy mogli łatwo i intuicyjnie poruszać się po Twojej stronie.
Deployment na Vercel
Pokażę Ci, jak z łatwością wdrożyć swoją aplikację na Vercel, jednym z najpopularniejszych środowisk hostingowych dla aplikacji Next.js.
Zarządzanie stanem i server actions
Nauczysz się zarządzać stanem aplikacji i jak wykorzystać server actions w praktyce, co pozwoli Ci na tworzenie bardziej zaawansowanych i dynamicznych funkcji.
Dla kogo jest ten kurs?
Ten kurs jest dla osób, które już mają pewne doświadczenie z JavaScript i chcą zgłębić swoje zrozumienie Next.js. Zakładamy, że znasz podstawy TypeScript, TailwindCSS, ale nie potrzebujesz doświadczenia z Next.js - wszystko wyjaśnię Ci od podstaw!
Kolejną rzeczą po poprawnym podpięciu już tego formularza,
którą będziemy potrzebować, to musimy sobie przemyśleć strategię, jaką
przyjmiemy do tego, żeby dodawać nowe subskrypcje.
Otóż jeżeli chodzi o interakcji z użytkownikiem przypominam Ci, że póki co
tak naprawdę jeżeli sobie zobaczymy nasz dashboard page nie ma już.
Czyli dane, które przekazujemy do tabelki
data, którą używamy jest ładowana po stronie serwera.
Co to oznacza dla nas?
Otóż jeżeli tutaj sobie dodasz nową
subskrypcję, to tak naprawdę jeżeli wywołamy funkcję w piśmie i dodamy nową
subskrypcję, ona zostanie dodana po stronie backendu.
Natomiast jest jeden problem nasza strona
się nie odświeży i my tej zmiany nie zobaczymy.
Dlatego musimy teraz przemyśleć naszą
strategię i myślę, że jak najbardziej tutaj będziemy musieli sobie skorzystać z
mutacji już po stronie klienta, z tego względu, że ten formularz tutaj
jest formularzem interaktywnym po stronie klienta i musimy w jakiś sposób
poinformować naszą aplikację o zmianie w naszych danych.
Generalnie Next jest pozwala Ci rewidować dane po stronie serwera bardzo łatwo.
Za pomocą tak zwanych tagów możesz sobie rewidować całe adresy URL.
Natomiast tutaj w naszym przypadku my chcemy konkretnie sobie rewidować
Dashboard i subskrypcje to są nasze adresy URL chcemy rewidować.
Natomiast rywalizacja
działa w taki sposób domyślnie, że żeby zobaczyć zmiany użytkownik musi
jeszcze raz wejść na stronie lub musi tą stronę odświeżyć.
My nie chcemy takiego mówić dla naszego
użytkownika, dlatego będziemy musieli tutaj sobie troszeczkę pokombinować.
I pierwsza rzecz jaką zrobimy to zamienimy sobie nasz komponent Data Table.
Zaczniemy sobie od naszego dashboard na komponent po stronie klienta.
Mianowicie stworzymy sobie tutaj nowy komponent i dashboard.
Data table.
Zróbmy sobie test X i tutaj export.
Tutaj sobie zwrócimy tak naprawdę to co
mieliśmy w naszym komponencie powyżej musimy sobie zaimportować znowu i mieć.
Musimy sobie zaimportować format date.
Myślę, że reszta powinna być w porządku.
I sprawdźcie sobie tutaj nasz eksport
default oczywiście nie default export czyli zapiszemy sobie nasz komponent.
I teraz możemy tak naprawdę w miejsce tego komponentu tutaj wstawić nasz dashboard.
No i ok, z tym, że jest jeden problem.
Otóż nie mamy żadnych danych.
Tak, data jest undefined i w tym momencie
musimy zadbać o to, żebyśmy mogli tutaj przekazywać jakieś
dane I jeżeli o to chodzi myślę, że najlepiej zrobić to za pomocą prosów.
Czyli ustawimy sobie tutaj props.
I tutaj otwierając nawias wejdziemy do środka.
I myśl.
Data będzie dla nas typu.
End.
Otwieramy tutaj obiekt i tutaj Payments.
Typ payment.
Importujemy dwa typy, których nam brakuje.
Tutaj jest Prime i myślę, że to będzie to będą nasze dane.
I w tym momencie generalnie rzecz biorąc możemy sobie wykorzystać tych initial
data, skorzystać sobie z tego tutaj kropka initial data, czyli kropka initial data.
Zapiszemy to sobie.
Oczywiście nic nie widzimy. Dlaczego nic nie widzimy?
Otóż nie przekazujemy sobie tutaj Initial data, czyli Initial Data.
W naszym przypadku to będzie data i
sprawdźmy tutaj typ Jest to Toshiba Payment.
Sprawdźmy sobie jeszcze raz, czy zrobiliśmy dobrze typowanie.
Może być undefined if not data to jest return.
Czyli możemy sobie tak naprawdę.
Skopiować ten typ.
Sprawdziłem jeszcze raz czy dobrze tutaj użyliśmy naszych typów.
Zapiszemy ten komponent.
Teraz jest wszystko w porządku. Dostajemy nasze dane.
Natomiast problem w tym, jak mówiłem.
Jako, że patch jest po stronie serwera renderowane,
to te dane są zachowane tylko raz, jeżeli użytkownik odwiedza tą stronę.
No i w tym momencie. Dlaczego nazwałem to Initial Data?
Bo dla nas będziemy musieli wprowadzić
dodatkową logikę, która będzie musiała rewidować te dane.
One są tylko na początku przy pierwszym render.
Natomiast jeżeli użytkownik
doda sobie nową subskrypcję, to będziemy musieli sobie ten widok tutaj aktualnie.
Tak samo będziemy musieli powiadomić next.
Czy jest o tym, że te dane na tej stronie, jeżeli ktokolwiek inny na nią wejdzie,
powinny zostać realizowane, czyli powinny zostać ściągnięte nowe
pozycje, które zostały dodane do konta użytkownika.
I w tym pomoże nam ten stack query i just motion, czyli mutację po stronie klienta.
Tak naprawdę, bo tego będziemy
potrzebowali do zrobienia tej mutacji i wysłania tych danych do naszego serwera.
Natomiast zanim to, to zaczniemy sobie odtworzenia tutaj Server Actions, który
pozwoli nam pobrać wszystkie nasze subskrypcje.
I tak naprawdę jeżeli chodzi o Server Actions możemy sobie to tutaj wrzucić do
naszego folderu Applications i tutaj wykorzystamy sobie Actions ts x.
No i tu w tym momencie na pewno będziemy
potrzebowali funkcji, która będzie zwracała nam wszystkie subskrypcje.
Czyli analogicznie
to co robimy tutaj tak naprawdę możemy sobie skopiować do naszych akcji.
I tutaj zróbmy sobie export async
function i tutaj pozostawimy na normalną funkcję get subskrypcje.
Natomiast chciałbym tutaj te funkcje trochę sobie jednak przerobić.
Ten trik jest jak najbardziej w porządku.
Musimy tutaj zaznaczyć, że jest to akcja po stronie serwera.
Wykorzystujemy Prisma czyli juz serwer.
Jest to bardzo ważne
jeżeli chodzi o User ID, które sobie tutaj będziemy przekazywać.
No to przekażemy to wprost, czyli User ID.
Niech to będzie stream.
Tak naprawdę nie musimy już tutaj tego sprawdzać, czy to przekazujemy czy nie.
Dodatkowo co sobie przekażemy w propsie, to chciałbym, żebyśmy mieli możliwość
wykorzystania tej funkcji zarówno na subskrypcja jak i na boardzie.
Jako że sortowanie na tych dwóch widokach jest zmienne.
Otóż tutaj mamy Next Payment data.
Jak przejdziemy do subskrypcji na Page.
To tutaj Zauważ, że nasze dane pobieramy po Next Payment, natomiast Descent Link.
Chcemy móc dynamicznie przekazywać
ten obiekt, dlatego też stworzyłem tutaj property, które pozwoli nam dynamicznie
przekazywać obiekt sortowania i teraz order by możemy tutaj wykorzystać.
Nie będzie to jakoś bardzo skomplikowane.
Otóż tutaj możemy sobie skorzystać z
interpolacji stringa i tutaj order by i ki.
Natomiast tu jeżeli chodzi o wywalił to order by walił.
Tak.
Już w tym momencie możemy sobie dynamicznie przekazywać obiekt
jak chcemy mieć posortowane nasze dane i myślę, że to wystarczy.
Jeżeli chodzi o funkcję gets.
W naszym przypadku teraz musimy przejść do instalacji.
To jest tak query.
Odejdźmy sobie najpierw dokumentację ten stack query.
To powinna być szybka instalacja installation.
Potrzebujemy npm install.
Ten stary jak query to jest biblioteka,
która służy nam do do mutacji po stronie klienta.
Czyli przejdźmy teraz do naszego terminala i zainstalujemy sobie tą bibliotekę.
Instalujemy NPM Installer Query.
Czekamy aż bijatyka się zainstaluje.
Teraz kolejna rzecz, którą musimy zrobić,
żeby w ogóle móc korzystać z tej biblioteki.
Musimy zainteresować nasz provider.
Przejdźmy do aplikacji naszej aplikacji
Nexto Jest i tutaj w głównym folderze zrobimy sobie plik provider to jest X.
No i w dokumentacji możemy sobie znaleźć coś takiego.
Musimy stworzyć provider w naszej aplikacji.
Jest to komponent po stronie klienta.
I tutaj realizujemy naszego providera.
No i tak naprawdę
robimy tutaj kontekst z naszym liderem strasznym query, klientem, który z którego
będą mogły nasze komponenty korzystać z naszej aplikacji.
Natomiast zanim to możemy użyć, no to musimy przejść tutaj teraz do naszego
globalnego layoutu i wykorzystać sobie tego providera, czyli provider.
I musimy rapować naszą aplikację w nasze provider.
Zapisujemy to sobie i już teraz możemy korzystać swobodnie z query z klienta.
Funkcja Get Subskrypcja jak najbardziej przyda nam się.
Teraz przejdźmy do tak naprawdę data forsa.
Musimy. Możemy tutaj sobie.
Już to tak naprawdę nie powtarzam.
Nie musimy już sobie tego używać.
Dlatego z tego względu, że możemy sobie już użyć GET
subskrypcje naszej funkcji i tutaj musimy sobie przekazywać dane.
Potrzebujemy User ID i potrzebujemy Order by.
W naszym przypadku jeżeli chodzi o User ID no to potrzebujemy to najpierw tutaj
wyciągnąć z obiektu user i to jest komponent po stronie serwera.
Dlatego też musimy możemy sobie jak najbardziej tutaj myślę wykorzystać.
Ten sam punkt, który wykorzystaliśmy w
naszej funkcji i User id przekazujemy do User ID.
Zapisujemy const.
I kolejna rzecz Order Bay.
Tutaj będzie nasz obiekt.
I jeżeli chodzi o kino to w naszym przypadku to jest next payment date.
Jeżeli chodzi o walutę to w naszym przypadku to będzie deseń User ID.
Sprawdźmy sobie czy możemy sobie to pobrać.
String model null.
Możemy sobie póki co zrobić Escape i za komentuje sobie tą funkcję.
Sprawdźmy czy dalej mamy dane
w naszej stronie subskrypcji i przejdźmy do naszej aplikacji.
Jeżeli wejdziemy do subskrypcji
Server actions require experimental server actions option enabled Tak, musimy sobie
jeszcze włączyć eksperymentalne akcje po stronie serwera, żebyśmy mogli w ogóle
tutaj cokolwiek zrobić, czyli Server Actions true.
W naszej konfiguracji zapiszemy to sobie
sprawdźmy czy już nasza aplikacja teraz po budowaniu się dobrze będzie działać.
Wygląda na to, że wszystko jest porządku jeżeli chodzi o subskrypcje.
Sprawdźmy sobie tą stronę.
Tak, te dane tutaj są, także wszystko jest jak najbardziej ok.
Możemy sobie już skasować te funkcje.
Mamy jedną globalną funkcję do pobierania naszej subskrypcji.
Możemy to samo teraz zrobić
w naszym komponencie z Dashboard, tam gdzie zaczniemy sortowanie tej całej
logiki, czyli tutaj cała data to zamienimy Engelsa w skrypcie.
On sobie importujemy tą funkcję z naszej
akcji i tutaj możemy sobie jak najbardziej już zrezygnować z tej funkcji.
Ja tu jeszcze zrobię organizer import na
tej stronie i tak samo na tej, żeby lepiej te importy zorganizować.
No i wróćmy czy dashboard dalej działa.
Mamy nasze dane z naszego serwera.
Teraz przejdźmy do implementacji mutacji,
która pozwoli nam dodawać nową subskrypcję i rewidować te dane po stronie serwera.
I teraz żeby w ogóle aktualizować
naszą walidację danych to potrzebujemy kilku rzeczy.
Otóż w naszym dashboard.
Mamy tutaj Initial Data.
To jeżeli sobie przejdziemy teraz to.
Czyli te dane czytane po stronie serwera
tak naprawdę są tylko i wyłącznie danymi po stronie serwera.
Tak? Czyli teraz jak przejdziemy sobie do DATA
to tutaj musimy zrobić całą logikę związaną z realizacją tych danych.
Pierwsza rzecz, którą będziemy potrzebować
to na pewno pobrać nasze User ID, czyli const.
User ID równa się just out.
No i pobieramy User ID.
Pierwsza rzecz mamy za sobą.
Teraz użyjemy query i mutacji danych, czyli tak naprawdę te
dane, które dostajemy z procesów to są tylko dane interesujące nas widok.
I po tym jeżeli użytkownik będzie tutaj robił jakieś mutacje, czyli
dodawał edytował nasze subskrypcje, musimy to rewidować.
I to już jest tutaj, dzieje się po stronie klienta, czyli tutaj content i w naszym
przypadku jest data i link i tutaj użyjemy User Query.
Jak to jest tak queer?
Jeżeli chodzi o queer.
Czy wykorzystamy Initial Data do naszego query?
To są nasze props initial data, które przekazujemy do tego komponentu.
Tak, to są dane realizujące nasz widok.
Jeżeli chodzi o query function,
na którą chcemy nasłuchiwać to tutaj jest gets, no i jako opcję podajemy User ID.
I tutaj jako obiekt przekazujemy ki next payment, tj.
jako value przekazujemy async.
No i ostatnia rzecz, którą też musimy sobie tutaj wykorzystać to są query ki.
Dlaczego jest to tak bardzo ważne?
Z tego względu, że gdy będziemy aktualizować te dane, czyli jeżeli
będziemy dodawać sobie nową subskrypcję, to musimy powiedzieć też RI jak to jest?
Query potrafi rewidować po tagach i po prostu za pomocą tego tego taga który tu
używamy, żeby sobie zrewidował tą wartość, którą
jakby wartości tych subskrypcji, które chcemy pokazywać użytkownikowi za chwilę
to stanie się troszeczkę bardziej jasne, mam wrażenie.
I teraz widzisz dostajemy.
Po zapisaniu tego wszystkiego dostajemy tutaj błąd z tego względu, że to już musi
być komponent po stronie klienta, czyli US Client.
Musimy to powiedzieć z tego względu, że chcemy tutaj tak naprawdę rewidować nasze
dane, Czyli to tutaj ta cząstka naszego widoku musi być
realizowana po stronie klienta, bo umożliwiamy naszemu klientowi, naszemu
użytkownikowi naszej aplikacji po prostu wprowadzenie nowych subskrypcji.
I teraz jedna rzecz, którą musimy zrobić
to podepniemy tą logikę do wprowadzania nowej subskrypcji.
Otóż przejdziemy teraz do AD Tyrion Button
i tutaj na dół musimy najpierw wyciągnąć naszą mutację.
Jeżeli chodzi o. A co w szybszym button?
Potrzebujemy naszą mutację.
W tym celu robimy sobie coś takiego tutaj
Connect klient US Query Client Pobieramy naszego klienta.
Jeżeli chodzi o mutację to Connect Motion.
Tutaj robimy user rotation i jako opcję potrzebujemy tutaj kilka rzeczy.
My Nation Function potrzebujemy a subskrypcji.
Za chwilkę sobie stworzymy funkcję do dodawania subskrypcji.
Jeżeli chodzi o sukces, to chcemy zrobić tutaj jedną rzecz.
Tak naprawdę w tym momencie chcemy sobie rewidować dane
na nasz boardzie czyli client i tutaj invalid chat query jest.
I możemy podać jako opcję niewielki
i w naszym przypadku to będzie dash, bo dash, bo data.
Tak to musi być podane jako jako tablica.
Potrzebujemy funkcji do subskrypcji,
czyli przejdźmy do naszych Server Actions, gdzie mamy wszystkie funkcje związane z
dodawaniem czy pobieraniem danych, czyli nasze Actions.
I tutaj potrzebujemy sobie stworzyć funkcję Tak, tak.
A co w skrypcie?
Czyli export async add subskrypcje?
Już to powinno nam tutaj pomóc.
Zaimportować tą funkcję mamy.
Możemy ją sobie zaimportować także tutaj już wszystko jest porządku.
Musimy sobie jeszcze tutaj skończyć logikę naszej funkcji.
A co jeżeli chodzi o logikę tej funkcji?
No to tak naprawdę możemy tutaj zawołać od razu Prisma subskrypcją Create.
No i w naszym przypadku musimy podać data data i co tutaj jest potrzebne?
Primo name Potrzebujemy Category
Potrzebujemy jeszcze Avatar URL Next Payment Date.
Price.
Start date.
I kolejne rzeczy, czyli opcjonalnie billing period karencji, ND i TID.
Zróbmy sobie billing period, że też będziemy podawać.
Generalnie rzecz biorąc pozwalamy na to narzeczu naszemu użytkownikowi.
Karencji też przekazujemy z naszego formularza NDT nie będziemy wydawać.
Onder it jak najbardziej.
Myślę, że jest w porządku, żebyśmy przekazywali.
Jeżeli chodzi o Payments.
To możemy chyba zrobić od razu tak
naprawdę Create i jeżeli chodzi o to potrzebujemy amount,
czyli to będzie nasz price, czyli ten sam, który mamy tutaj.
Przekażemy z naszego kom z naszego formularza.
Dodatkowo jeżeli chodzi o datę
to sobie też możemy tutaj od razu stworzyć new date na bazie tak naprawdę na Next
payment fit to też przyjdzie z naszego formularza.
I kolejna rzecz, którą możemy tutaj zrobić to status i status.
Możemy sobie zrobić payment status
na ustawiać na active nano odpady, czyli to będzie po prostu payment.
Nowy payment tworzymy, który jeszcze nie jest zapłacony.
Zapiszemy sobie wszystko. Oczywiście tych tutaj wartości nie mamy,
dlatego musimy sobie tworzyć prawdopodobnie jakieś tutaj
propsy do naszego komponentu, naszej funkcji, które będziemy przekazywać,
czyli interfejs i w naszym przypadku będzie to accept props.
No i co potrzebujemy name, który będzie string Kategorie.
Który będzie też treningiem.
Możemy już użyć tego typu tutaj
i wyciągnąć sobie wszystkie wartości, których potrzebujemy, czyli tutaj, na tym.
Jest.
Równa się props.
Dajemy sobie te propsy i mamy tak name category.
To już są dwie rzeczy, które są w porządku.
Avatar.
My sobie to podamy w taki sposób. String.
Możesz sobie zachować tą nazwę tego tak jak tutaj mamy, czyli avatar URL.
Możemy sobie to od razu tutaj wyciągnąć.
Avatar URL next payment Datę możemy sobie darować.
Next payment to będzie w postaci screena.
Jak wiesz, tutaj podajemy datę postaci po prostu ciągu tekstowego.
Natomiast tutaj będziemy musieli sobie zrobić new date i next payment.
Tak, już mamy to za sobą.
Print to będzie number.
Dodatkowo start Date Potrzebujemy tutaj starej daty.
Tak naprawdę myślę, że
możemy to ustawić zawsze jako dzień dzisiejszy czyli New Date.
Uprościłem sobie trochę sprawę, czyli w momencie w którym użytkownik dodaje
subskrypcję ustalamy, że to jest moment, którym zaczyna po prostu za nią płacić.
Myślę, że jest to jak najbardziej w porządku w tym momencie.
Tutaj sobie pociągniemy jeszcze ten promise.
Brakuje nam jeszcze billing period.
To jest subskrypcja billing period.
Sprawdźmy sobie, w jaki sposób my to tutaj przekazujemy w naszym komponencie
subskrypcji, jakiego typu jest billing period.
Niestety string, czyli musimy tutaj to coś zamienić.
I wyciągnąć tutaj billing period.
I tu będzie problem.
Z tego względu, że string sable tutaj undefined.
Czyli możemy tak naprawdę, jako że nasz nasz formularz przygotujemy sami.
I tutaj jeżeli chodzi o wartości billing
to wiemy jakie to są wartości i sami używamy tego value.
Czyli myślę, że nie będzie tutaj
ogromnym błędem jeżeli sobie pójdziemy i zrobimy subskrypcję Billing period.
Jeżeli chodzi o currency to też możemy przekazać.
W jaki sposób ustawiamy kadencje.
U nas też to jest SELECT i mamy nasze wartości, które też kontrolujemy.
Także nasze currency nasz jest już jest typu
currency, także możemy sobie jak najbardziej myślę tutaj przekazać.
Po prostu kadencje są skrócone kadencje.
Wyciągniemy Karen Sys i One RAID.
Też musimy to
wyciągnąć, chociaż sprawdźmy, czy nie możemy sobie wykorzystać po prostu one
raid Chucka po stronie serwera, czyli Connect User ID.
I powinniśmy móc wykorzystać tutaj po prostu User ID.
Tam sobie wykrzyknik z tego względu, że tak naprawdę.
Myślę, że to będzie ok.
Next payment.
Mamy literówkę, no i mamy już logikę dodawania nowej subskrypcji za sobą.
Połączmy sobie to teraz do guzika.
Czyli mamy tutaj naszą mutację, a co 1.
Czyli teraz potrzebujemy użyć tej mutacji w naszym przycisku.
Przejdźmy do przycisku Add new 1.
Czyli w tym momencie tutaj Nutrition new that.
Nie. Musimy podać wszystkie dane, których
potrzebujemy, czyli name w naszym przypadku kategorie Avatar i URL.
Zaraz sobie sprawdzimy jeżeli chodzi o typy czy wszystko gra.
Zapiszemy. I tak pokazuje nam, że
tu potrzebujemy Avatar URL czyli avatar URL jest ok Billing period.
My to nazywamy w naszym formularzu Billing period.
Eksperyment.
Tutaj mam problem z tego względu, że może to być undefined.
Czyli musimy sobie teraz robić jakiś szczeg.
I tutaj mieliśmy cos jeszcze jeżeli chodzi o next payment.
No zróbmy na razie to.
Nie możemy sobie zrobić tutaj wykrzyknika tak naprawdę.
Czyli musimy sobie zrobić tutaj sprawdzenie if the next payment Writeln.
Zapiszemy to sobie. No już wiadomo, że na produkcji
musielibyśmy tutaj zrobić sobie tę walidację dużo lepiej.
Natomiast ja chcę Ci pokazać tutaj, jeżeli chodzi o funkcjonalności związane z
server Action i z tym jak możesz sobie rewidować dane po stronie klienta.
I zróbmy sobie od razu.
Jeżeli dodamy tę subskrypcję, to żeby nasz popas się zamknął, tzn.
tutaj musimy zmienić ten komponent na
komponent kontrolowany Control, komponent Open i On Open.
Więc zrobimy sobie funkcję, która ma status Open.
I tutaj będzie satis kupon na open.
Musimy stworzyć tutaj
stan, który będzie kontrolował to, czy nasz Popa jest otwarty.
Czyli const jest open i set jest open.
Równa się just state.
Na początku ustawiłem sobie to na false.
Zapisujemy to wszystko I teraz tutaj na
końcu po całej mutacji możemy jak najbardziej.
Set i są pen na false. Dobrze.
Zrobimy Tobie teraz test czy udało nam się
podpiąć tą akcję dodawania nowej subskrypcji do naszej aplikacji.
Mamy na razie tutaj.
Tak naprawdę sprawdźcie sobie tutaj 11 aktywnych subskrypcji.
PLN Też niepotrzebnie mamy to w tym miejscu.
Natomiast mamy aktywne subskrypcje.
Jest 11.
Przejdźmy teraz do naszego przycisku dodawania nowej subskrypcji.
Tutaj też mam problem ze stylami, też warto byłoby to zaadresować.
Natomiast weźmy sobie dodajmy subskrypcję o nazwie Test.
Niech to będzie kategoria inne, niech zostawi.
Zostawimy sobie adres URL awatara taki jaki jest domyślny.
Na potrzeby naszego testu zrobiłem sobie koszt 29 229 dolarów.
Tak naprawdę przełóż sobie to na uzdę.
Sprawdźcie, czy mamy jeszcze całą serię szkoleń.
OK. Dodatkowa rzecz piling Peel Monthly i
ustawmy na Next payment datę na 29 czerwca.
I teraz jeżeli wszystko zadziała, to po
naciśnięciu guzika pompa powinien się zamknąć i powinna zostać dodana nowa
funkcja, co zrealizuje nam dane zarówno tutaj jak i po stronie Dashboard.
Sprawdźmy czy to działa.
Jeszcze sprawdźmy czy walidacja tak naprawdę walidacja działa też po stronie.
Jeśli nie.
Jeszcze nie podłączyliśmy tutaj walidacji do po stronie subskrypcji.
Subskrypcja też byśmy musieli sobie tak
naprawdę przerobić ten ten komponent z danymi.
Także sprawdźmy to sobie na razie w widoku Dashboard.
Jeżeli wszystko będzie ok, to tutaj na tym widoku tak naprawdę powinny się pojawić.
Powinna się pojawić nasza nowa subskrypcja
o nazwie Test i do kategorii Insurance, czyli kod 29.
Niech będzie tak jak jest.
Monthly 29 Dobrze, sprawdźmy sobie to add subskrypcję.
No i nic póki co się nie stało
i musieliśmy tutaj poczynić jakiś błąd związany z akcjami.
Prawdopodobnie chodzi tutaj o out.
Wróćmy do naszego terminala.
Zobaczmy tutaj na błędy.
No i mamy tutaj Clark about user only supported App Router.
Możemy sobie tak naprawdę przekazać User ID do naszej mutacji.
Nie musimy tego wykorzystywać z naszej funkcji.
Wróćmy do naszego edytora, czyli tutaj.
Jeżeli chodzi o User ID sobie to wyciągniemy, przekażemy to w propsie.
Trust right string i tutaj możemy sobie wyciągnąć te user ID.
Już będzie tutaj w porządku.
Myślę, że już możemy teraz zrezygnować z tego mapowania.
No i tutaj musimy sobie tak naprawdę dodać User ID.
No i zrobiłem sobie sprawdźmy czy w ogóle ten user mamy.
W komponencie mamy obiekt User, czyli możemy tak naprawdę wykorzystać User ID.
To będzie user.
Idę.
Zapisujemy to wszystko sobie.
Teraz próbujemy jeszcze raz na naszym show.
Zróbcie. Generalnie widzisz, że Pola się nie
wyczyściła, także to też warto byłoby sobie zrobić dodatkową funkcję, która
czyści te wszystkie pola po dodaniu nowej subskrypcji.
Natomiast teraz jak naciśniemy sobie.
Sprawdźmy sobie znowu na meldunki, które dostajemy.
Z tego co widać to wszystko jest w porządku.
Nie wrzucaliśmy żadnego błędu, odświeżamy naszą stronę.
No mamy tutaj test.
Strona została odświeżona, natomiast
została odświeżona dopiero po odświeżeniu tej strony.
Spróbujmy jeszcze raz sobie zrobić test 2.
Niech będzie Entertainment Host 2 120 12
Euro Monthly i ustawmy sobie datę na 26 ty też na subskrypcję.
No wyraźnie nie mamy tutaj tego odświeżania.
Sprawdźmy jeszcze raz, gdzie mogliśmy popełnić błąd.
Oczywiście tutaj, gdzie mamy już dane z skóry.
My ich nie używamy dalej w komponencie, bo
tutaj ma Podajemy cały czas dane inicjalizacji,
czyli tutaj musimy sobie to zamienić na datę i tutaj też data ma.
Teraz zapiszemy sobie nasz komponent.
No już zmiany będą od razu widoczne, czyli
jeszcze raz przejdziemy do dodawania nowej subskrypcji.
Zbudujmy subskrypcję TS3 Entertainment.
Niech będzie miała koszt 120 Euro Monthly i Next.
Mandaty ustawimy na 28.
No i już nam się tutaj to wszystko dodało.
Jeżeli chodzi o subskrypcje, oczywiście
tutaj nie będziemy mieli rywalizacji tych danych.
Musielibyśmy odświeżyć stronę.
Z tego względu, że nie przerobiliśmy
jeszcze subskrypcji Data table cały czas jeżeli chodzi o naszym page
subskrypcje zobacz, że tutaj mamy Cały czas używamy tylko tych danych z serwera.
Tutaj nie mamy jeszcze podpiętej tej logiki.
To jest zadanie dla Ciebie.
Możesz sobie przerobić tak samo jak ja to zrobiłem tutaj.
Jeżeli chodzi o dashboard Data table.
Możesz sobie stworzyć komponent tutaj
subskrypcje Data table i w taki sam sposób tutaj przekazać najpierw
te dane, a potem w razie walidacji Później możesz sobie przekazywać nowe dane.
Natomiast tutaj jak widzisz cała logika
dodawania nowych subskrypcji jest jak najbardziej pożądana.
To tyle ode mnie.
Dzięki Ci bardzo za czas spędzony na tym kursie.
Jako zadanie domowe proszę zaimplementować sobie Edit button
Cały czas pamiętaj jestem dostępny na edu, jestem dostępny na Ahoj!
Także zadawaj pytania, śmiało pisz.
Teraz przejdźmy sobie krótkie podsumowanie
tego kursu i kilka rad ode mnie dla Ciebie jak możesz sobie budować swoje produkty?
Jak możesz dalej rozwijać sobie tą aplikację?