Next.js 13 w Praktyce: Kontrola formularza

0:01Teraz, kiedy mamy już

0:02jakiś w miarę dobrze wyglądający formularz, tutaj możemy zająć się

0:06podpięciem naszej logiki do dodawania naszych nowych subskrypcji i tym, żeby

0:11nasza tabelka odpowiednio aktualizował się.

0:14Zaczniemy od tego, że stworzymy sobie kontroler komponent jeżeli chodzi o te

0:19wszystkie importy, czyli potrzebujemy stanu.

0:21Jeżeli chodzi o te wszystkie importy, czyli myślę, że dobrym pomysłem tutaj

0:25będzie wyciągnięcie tak naprawdę tego komponentu.

0:29Jeżeli chodzi o ten guzik dodawania nowej

0:30subskrypcji, wyciągniemy go sobie na zewnątrz jako nowy komponent.

0:34Po prostu będziemy sobie go tutaj używać,

0:36bo tutaj jeżeli zaczniemy wpisywać tam całą logikę.

0:38Myślę, że generalnie API user button to nie jest odpowiednia nazwa też do miejsca

0:43na tę logikę także stworzymy sobie w tym momencie nowy komponent.

0:47Natomiast jeszcze zanim za to, zanim zaczniemy zalecam Ci zainstalowanie

0:51sobie rozszerzenia, mianowicie inline fold.

0:54I to jest rozszerzenie, które pomaga.

0:57Lepiej. Pracować z talią inne.

0:59No bo to co tutaj mamy.

0:59Jeżeli sobie zobaczysz, że jeżeli ja sobie zrobię teraz wrap wrap Toggle workshop,

1:04zobacz, że te klasy zaczynają być po prostu mało czytelne, prawda?

1:07Dlatego też zachęcam Cię serdecznie do zainstalowania sobie inline fold.

1:13Ja sobie teraz to włączę w mojej tutaj w moim edytorze kodu i zobacz w tym momencie

1:19klasy, które tak naprawdę były nieczytelne, stają się czytelne.

1:23Mogę sobie tutaj kliknąć do środka i tak

1:25naprawdę w każdym momencie mogę sobie edytować tą klasę.

1:27Jeżeli wejdę no to mam tylko tutaj.

1:29Czy kropeczki czytaj mój plik staje się dużo bardziej czytelny.

1:33Także zachęcam Cię serdecznie do zainstalowania sobie

1:36tego rozszerzenia jeszcze raz i może pokaże Install Extensions.

1:40To jest rozszerzenie o nazwie inline fold autorstwa Mohammeda Mori.

1:45Przejdźmy teraz sobie do naszego nowego komponentu.

1:47Będziemy potrzebowali tak naprawdę nowy komponent tutaj sobie stworzyć.

1:51Będzie to Add subskrypcją Button.

1:54Myślę, że to będzie lepsza nazwa dla tego,

1:56co my tutaj sobie razem w tym momencie robimy.

2:00Także add subskrypcję BTN.

2:04Możemy zrobić X.

2:08I tutaj export.

2:09Default function in btn.

2:17To będzie zwyczajna funkcja return.

2:21Zwrócimy ten nasz dialog. Tak.

2:24To co mamy. Tutaj?

2:26Możemy tak naprawdę wziąść całość tutaj, skopiować albo wyciąć i wkleić.

2:33Tu to tutaj w tym miejscu.

2:37Zapiszemy sobie.

2:38Oczywiście trzeba teraz tutaj nasze importy

2:42przenieść w odpowiednie miejsce, czyli przeniesiemy sobie ten import do nowego

2:45komponentu, zapiszę i już nie mam żadnego błędu.

2:49I tutaj możemy już wykorzystać add on button nasz nowy komponent.

2:53Generalnie rzecz biorąc nic się nie powinno zmienić w wyświetlaniu

2:57naszego komponentu i to też cały czas tutaj ten komponent się wyświetla dobrze.

3:05Przejdźmy teraz do naszego Association Button i tutaj zaczniemy sobie

3:10budować logikę naszego formularza naszego komponentu.

3:14Potrzebujemy stany.

3:15Tak naprawdę potrzebujemy stany na.

3:17Każdy z tych importów także rozpoczniemy od name czyli const name.

3:23Set name. Jest równy.

3:26Juz.

3:28Stad i jako domyślną wartość zrobimy sobie

3:32empty string za Importujemy nasz wstyd i prawdopodobnie

3:39dostaniemy błąd tutaj z tego względu, że mamy

3:43jeszcze nie używamy stanu, natomiast to też musi być komponent po stronie klienta,

3:47także już możemy sobie to od razu już client zaaplikować w tym momencie i już.

3:53To jest komponent po stronie klienta,

3:55także spokojnie będziemy mogli sobie używać naszego stanu.

3:58Dobrze, Jeżeli chodzi o name. I.

4:00Name to zwróćmy się tutaj do naszego do naszej form.

4:04I. Tutaj mamy label.

4:06Input. Input, typ text i name.

4:09To zróbmy sobie. Value, niech to będzie name.

4:15I standardowo tutaj mamy event,

4:20event, set name i target Baju.

4:29W tym momencie jak będziemy tutaj wpisywać

4:31jakąkolwiek wartość netto, tak naprawdę nasz status zostaje

4:35aktualizowany i to sobie przechwytuje dobrze.

4:39Kolejna rzecz, którą potrzebujemy to kategorie, czyli const i osobny stan.

4:45Category Set Category.

4:50I tutaj.

4:53Jeżeli chodzi o kategorię to możemy sobie zostawić jako.

4:59Empty String.

5:01Wróćmy teraz do importu do SELECT a jeżeli

5:03chodzi o nasze kategorie i musimy tutaj po prostu podpiąć naszą

5:07logikę jeżeli chodzi i logikę związaną z kategoriami, czyli select.

5:14Tutaj będzie miał value i tym value będzie category.

5:20I on ciągle.

5:29Tutaj będziemy mieli event i set kategorii.

5:37Target Vario.

5:42Jako że tutaj mamy problem, bo target pewnie pokaże nam, że nie jest undefined.

5:50Zróbmy, sprawdźmy o co tutaj chodzi i możemy na sztywno podać jako wartość.

5:59Możemy sobie zrobić tak naprawdę z

6:02kategorii nie mamy naszego użytkownika, musielibyśmy je pobrać z backendu.

6:07Także możemy na chwilę obecną tak naprawdę zrobić stream.

6:09Jeżeli mielibyśmy jakieś opcje użytkownika to jak najbardziej moglibyśmy sobie tutaj

6:14użyć pobrać te kategorie, które nasz użytkownik dany zalogowany użytkownik ma

6:18w swoim systemie i jako możliwą wartość do wyboru moglibyśmy tutaj dać kategorię.

6:25Natomiast jako że pozwalamy tworzyć

6:27użytkownikowi nową subskrypcję z obojętnie jaką kategorią, także myślę, że może tu

6:31być obojętnie jakiś string tak naprawdę jako value.

6:34My tutaj bardziej.

6:38Jakby ważne byłoby to, jeżeli chodzi o pole kategorii, które mamy tutaj.

6:43Myślę, że dużo ważniejsze byłoby to tutaj odczytywanie tego, co nasz użytkownik ma w

6:48swoich opcjach, żeby wyświetlać odpowiednie opcje.

6:52My na chwilę obecną mamy Entertainment

6:54Instruments, natomiast myślę, że tutaj powinna być spięta logika, która odczytuje

6:59kategorie, które dany użytkownik ma zdefiniowane w swojej aplikacji.

7:04Czyli tu mamy już.

7:05Myślę, że kategorie mamy załatwione.

7:08Przechodzimy dalej.

7:09Następnym polem jest avatar URL.

7:13Czyli const i avatar.

7:18URL set avatar world.

7:24I tu ty też sobie zrobimy.

7:25Juz możemy sobie od razu zrobić to jako string i jako domyślną wartość.

7:33Mam przygotowany adres

7:35avatara dla google, żebyśmy nie musieli tego po prostu wpisywać przy testach.

7:38Tego to już wkleję tutaj.

7:40Już w tym momencie jak sobie podepniemy tą wartość avatar URL do naszego importu.

7:46Z.

7:47Avatar URL em to powinniśmy tak naprawdę

7:50dostać naszą wartość, czyli znajdźmy sobie ten input.

7:54Avatar URL nie są tutaj i możemy sobie tutaj użyć jako.

7:59Value avatar url i.

8:04Możemy sobie zrobić po prostu standardowo.

8:08Event i set.

8:10Avatar i URL jako.

8:11Event target value.

8:15Zapiszemy to sobie już jako tworzymy nasz komponent.

8:19To już mamy domyślnie. Tutaj.

8:21Wrzucony adres naszego awatara.

8:26Myślę, że to możemy sobie tak zostawić tak jak jest teraz.

8:30Przejdźmy teraz do kosztów, czyli do stanu związanego z kosztem.

8:37Możemy tak naprawdę nazwać.

8:38Zostawmy te nazwy.

8:40Myślę, że Price byłaby tu może bardziej odpowiednia nazwa.

8:43Natomiast zgodnie z nazewnictwem tych pól zostawimy sobie cost, czyli seat cost.

8:50I tu równa się to będzie typu.

8:55Myślę, że Amber jako domyślny stan możemy sobie dać zero.

9:00Czyli przejdźmy do.

9:02KOD. Tutaj mamy ten.

9:04Input. Typu number i tutaj.

9:06Kowalu podamy sobie kostki i jako on podamy sobie event i set koszt.

9:18I Target Vario.

9:23Sprawdźcie sobie dlaczego teraz.

9:24Tutaj.

9:26String jest nasrane bo.

9:29Sprawdźmy, czy my tu mamy string.

9:30Nie możemy wykorzystać coś takiego.

9:37Prawdopodobnie musimy sobie zrobić parę.

9:43I możemy zamknąć to w nawias.

9:45Już w tym momencie mamy. Niejako.

9:47Numer, czyli otwórzmy.

9:49Mamy koszt domyślnie ustawiony jako.

9:53Jako number.

9:55Natomiast musimy zwrócić uwagę na miejsca po przecinku.

9:59Dlatego myślę, że to rozwiązanie z polskim tutaj nie jest za bardzo fortunne.

10:03Zróbmy inną logikę zróbmy najpierw const value i tutaj sobie zrobimy parser float.

10:11Tak naprawdę musimy sprawdzić tutaj.

10:14Jaki jest i target value.

10:20I możemy sobie też zrobić taką walidację, że jeżeli if.

10:26Jest nan.

10:28I nasz value.

10:34Czyli jeżeli nasz walił jest liczbą, no to możemy sobie zrobić set.

10:40Cost.

10:41I wpisać nasze wania.

10:43Natomiast jeżeli chodzi o to, to tutaj będziemy potrzebowali.

10:492 miejsc. Po przecinku.

10:50Czyli możemy sobie zrobić Polską.

10:54I tu fixed do dwóch miejsc po przecinku.

10:58To możemy usunąć.

11:01Musimy zamknąć nawias.

11:03I zapisujemy nasze zmiany.

11:05Już możemy teraz tutaj wpisywać wartości

11:07po przecinku i nie ma z tym żadnego problemu.

11:10Kolejną rzeczą, którą musimy sobie zrobić

11:12to tutaj obsługa billing period, czyli przechodzimy do naszych stanów.

11:17Mamy Aviator, mamy koszt.

11:19Poniżej jeszcze potrzebujemy kontrolę na billing.

11:22Czyli Billing period.

11:26Set billing period.

11:30I tutaj ostatni.

11:34I tu możemy sobie ustawić jako state jako string.

11:38Typ. I myślę, że domyślne wartości na razie

11:41sobie nie będziemy tutaj wrzucać albo wrzucimy sobie.

11:43Tak naprawdę możemy sobie wrzucić Billing period monthly

11:49i od razu sobie sprawdzimy tutaj w jaki sposób mamy nasze wartości

11:53przekazywane i myślę, żeby tutaj troszeczkę bezpiecznie

11:57było, to możemy wykorzystać od razu skryptem billing period i.

12:01Tutaj w tym. Momencie będzie Monthly.

12:03Jeżeli chodzi o następne wartości.

12:05To musimy tutaj wykorzystać subskrypcję Billing Period.

12:10Tu jest quarterly i subskrypcja Billing period.

12:14Jeśli tak, mamy miesięcznie.

12:18Kwartalnie i rocznie i to możemy sobie ustawić jako opcję Selected.

12:22Jest to opcja domyślna.

12:24No i tworzymy tutaj nasz i mamy domyślną opcję Selected jako

12:29monthly, czyli użytkownik tak naprawdę nie musi tego wybierać.

12:32Nie mamy tutaj jako domyślny pola, które wymagamy.

12:37Jest to domyślnie wybrane za użytkownika.

12:39Kolejna rzecz to mamy naszą date, czyli Next Payment, czyli connect.

12:47Next payment i set next payment. I juz.

12:55Stad jako typ.

12:58Możemy zrobić string.

13:00Tak naprawdę zapiszemy go.

13:03Wróćmy do naszego pola Experiment, gdzie mamy pole na eksperyment.

13:06Mamy tutaj typ Input Date.

13:10Musimy tutaj kilka rzeczy wprowadzić.

13:13Na pewno value potrzebujemy next payment.

13:17Na pewno będziemy potrzebowali tutaj

13:19może minimum value, bo nie chcemy, żeby payment był w przeszłości.

13:23Jeżeli ktoś dodaje swoją subskrypcję.

13:25Zakładamy, że po prostu

13:27albo ją dzisiaj rozpoczyna w momencie, w którym ją dodaje.

13:30Czyli jeżeli chodzi o minimum date.

13:33Jeżeli chodzi o next payment

13:34to możemy tutaj użyć format date i w tym momencie wykorzystamy New.

13:41Date i jako.

13:43Format rok rok. W.

13:46Rok taki jak mamy napisany w naszym imporcie.

13:50DD.

13:51W tym momencie jest jak najbardziej ok i musimy sobie ustawić, że to będzie event.

14:00Ileś set next payment ustawimy na i targetowania.

14:08Zapisujemy to sobie. Sprawdźmy teraz jak działa nasz komponent.

14:12Mamy eksperyment, mamy minimum.

14:14Wallu, czyli jeżeli otworzymy

14:16nasz kalendarz, no to wiadomo, nie możemy wybrać wartości, która była w przeszłości.

14:20Myślę, że to jest w porządku jak na razie

14:22na tą logikę i jeżeli chodzi o stan to myślę, że mamy wszystko.

14:27Spróbujmy sobie teraz wylogować.

14:29Czy rzeczywiście te wartości zostają uaktualnione?

14:34Czyli name potrzebujemy kategorii avatar URL.

14:42Dodatkowo koszt billing period.

14:46Zapiszę to sobie teraz.

14:47Zrobimy sobie tutaj Console log,

14:49sprawdzimy sobie wartości, zmienimy sobie name np.

14:53na Netflix.

14:56Sprawdźmy nasze wartości powiedziałam no

14:58name, wprowadziliśmy na Netflix i jest wszystko w porządku.

15:01Billing mamy na monthly jako domyślnie avatar URL też jest ustawiony.

15:04Domyślnie kategoria jest undefined, czyli

15:07tutaj też możemy sobie pomyśleć o domyślnie wybranej kategorii.

15:13Jeżeli chodzi o nasze kategorie, możemy

15:15sobie tutaj tak naprawdę na sztywno wpisać entertainment.

15:19Wiadomo, że w produkcyjnej aplikacji

15:21chcielibyśmy raczej mieć mapowanie kategorii, które użytkownik ma

15:25natomiast wrzucając tutaj do naszej kategorii.

15:28Jeżeli chodzi o nasz select to wywalił Entertainment zrobimy jako sealed

15:32selected, żeby był domyślnie wybrany w naszym polu.

15:36Czyli teraz jak sobie zamkniemy nasz.

15:38Input i wpiszemy Netflix.

15:41To tutaj Teraz mamy już kategorię Entertainment.

15:45Domyślnie koszt 0 i Netflix.

15:48Dobrze, Myślę, że. To.

15:50Byłoby na tyle.

15:51Podpięcie stanu pod nasz nasz formularz mamy za sobą.

15:54Teraz przejdziemy do funkcji, która będzie dodawała.

15:58Nową subskrypcję. Do naszego serwera.