React: Konfiguracja formika

16.8.x

0:00Cześć, w tej lekcji z skonfigurujemy sobie Formik'a, który pozwoli nam na

0:04poprawne funkcjonowanie naszego formularza. Oczywiście moglibyśmy to zakodować

0:09samodzielnie od podstaw, ale formik czy React final form

0:13to są takie biblioteki, które niewiele ważą a naprawdę bardzo ułatwiają

0:17nam pracę z formularzami. Poza tym fajnie, żeby ci to pokazać, żeby po prostu żebym

0:22mógł się tego nauczyć, więc pierwsze, co musimy zrobić to zainstalować sobie Formik'a w

0:26naszym projekcie, okej i skoro

0:32już nam się zainstalował, teraz możemy zerknąć sobie na dokumentację i zobaczyć,

0:36że mamy tutaj takie dwa boilerplate'y z czego jeden jest bardzo długi, ponieważ

0:40zawiera natywne elemente z html'a. Po prostu

0:44musimy to wszystko wpisać sami. Natomiast formik udostępnia nam też komponenty,

0:49które pomagają nam właśnie skrócić ten kod na przykład tutaj, jak field, czyli

0:53pole albo error message, która wyświetla się pod naszym field'em,

0:57więc to co teraz zrobimy to po prostu spróbujemy wykorzystać

1:01sobie tą logikę, którą mamy tutaj i spróbujemy wykorzystać te gotowe komponenty,

1:05które mamy tutaj, w taki sposób, że połączymy je ze stylem, ze stylami, które mamy w naszej

1:10aplikacji. Zobaczymy jak nam to wyjdzie, jedyne co widzę, że może nam nie wyjść, to ten

1:14tekst area, ale to sobie zostawimy najwyżej na koniec i najwyżej jakoś to tam poprawimy,

1:18więc pierwsze co musimy zrobić to pobrać sobie formik do

1:22naszego komponentu podobnie jak form field i

1:27error message i następnie

1:36to co widzimy to, że formik tutaj pod header'em już

1:40odpala swój komponent, więc możemy go teraz sami zacząć pisać pod

1:44naszym header'em i podawać mu odpowiednie

1:48props'y, initial values to

1:53po prostu obiekt, który ma elementy, które chcemy podać w

1:57naszym komponencie. Mamy tutaj title,

2:01content article url, twitter name

2:05i created. Chyba o niczym nie zapomniałem, kolejnym

2:10props'em jest validate i na

2:14razie validate sobie ominiemy i podamy on submit, czyli

2:18podajmy tutaj funkcję, która ma się wykonać w momencie, kiedy nasz

2:23button submit się odpali. Podajmy tutaj values, czyli to będzie pewnie cały

2:27ten obiekt uzupełniony w naszym formularzu i wydaje mi się że ten set submitting

2:31jest opcjonalny chociaż nie jestem pewien.

2:35Dobra, spróbujemy go też tutaj dać i to co chcemy zrobić to

2:39wywołać tutaj add item w naszym page context

2:44i wydaje mi się, że z values, ale nie jestem

2:48pewien czy to tak będzie działać, więc pierwsze co sobie zrobimy to wylogujemy sobie values

2:52i podobnie jak tutaj mamy

2:56w przykładzie set submitting ustawimy na false. Zresztą zobaczmy

3:00teraz co znaczy to set submitting. Pewnie będzie gdzieś w dokumentacji.

3:06On nam po prostu mówi czy teraz submittujemy

3:10czy nie. Wydaje mi się, że jak już po prostu wyjdziemy sobie z tej

3:15funkcji, to nie musimy tutaj ustawiać, że skończyliśmy submittować.

3:19No zobaczymy jak to wyjdzie. Wracamy sobie do naszego przykładu i skoro

3:24on submit już mamy zrobione to teraz możemy przykleić sobie zawartość

3:30naszego form'a do formik'a. Już

3:39widzę, że on tutaj potrzebował set submitting po to, żeby ustawić

3:43sobie is submitting, bo to jest powiązane jakby jedno z drugim set submitting

3:47ustawia czy w momencie kiedy na przykład klikniemy button, mamy

3:52go disable'ować, ponieważ się submittuje czy niech będzie włączony. Dzięki temu możemy zapobiec

3:56temu, że ktoś wciśnie 10 razy button i 10 razy wyśle nam na

4:01przykład notatkę, okej. Teraz musimy opleść nasz komponent

4:05form, który zaimportowaliśmy sobie z formik'a,

4:14to on submit możemy wywalić, ponieważ tutaj wystarczy,

4:18że damy type submit i wtedy po

4:22wykonaniu submit odpali nam się ta funkcja w tym miejscu i tak

4:26jak już mówiłem to text area na razie sobie wywalmy, a spróbujmy

4:32wykorzystać nasz styled input, ale

4:36powiedzieć, że on ma się renderować jako film i wtedy

4:40film może dostać jeszcze type, który będzie text i name, który

4:44będzie title. Podobnie zresztą zrobimy tutaj w pozostałych

4:49input'ach tutaj będzie to twitter name, a tutaj

4:54article url, okej i teraz teoretycznie

4:58zrobiliśmy wszystko o co formik nas prosił, więc

5:02teraz jeśli odpalimy sobie naszą aplikacje trochę rozszerzymy,

5:07żebyśmy widzieli konsole, po

5:12dodaniu czegokolwiek tutaj powinniśmy zobaczyć to w konsoli jako values, okej. Niestety

5:17to się nie udało sprawdźmy, co możemy zrobić, żeby

5:21wykorzystać styled-components i formik'a. Okej,

5:30widzę tutaj w tym artykule, że gość próbuje podobnie jak my wykorzystać formik'a

5:35razem ze staled-components i on po prostu podaje te wszystkie props'y, które

5:39formik wymaga w tym dłuższym przykładzie, więc wydaje mi się że my również tego nie

5:43unikniemy. Możemy sobie teraz wrócić do naszego kodu i tutaj

5:49gdzie podawaliśmy jeszcze submitting, musimy podać jeszcze kilka innych props'ów. Możemy

5:55w takim razie wrócić sobie z naszym komponentem

6:00styled text area, wywal

6:05my sobie te field'y, które tutaj podaliśmy, w propsie has

6:13i zerknijmy co musimy tutaj podać naszych input'ach

6:17żeby one zadziałały, type mamy, name mamy, on change,

6:22on

6:26blur i value. Tutaj

6:37mamy akurat twitter name, tutaj

6:50będzie title i mamy

6:56content, okej i teraz powinno zadziałać.

7:00Dodajmy sobie cokolwiek i

7:04znowu coś nie działa. Dobra

7:09w takim razie spróbujmy sobie skopiować

7:14treść tego błędu i wpisać w formik, zobaczmy na pewno ktoś wpadł już na ten

7:18problem, okej. Wydaje

7:22mi się, że problemem może być nazwa props'a, nie inititial value a nie values. Kolejna

7:29próba, teraz nic się nie wywala. Uwaga

7:41i na submit'ie dostajemy nasze

7:46values, który jest obiektem i dodatkowo jest obiektem takim dokładnie jakim chcemy,

7:50żeby było w naszej akcji do redux'a. Pojawił się jednak kolejny problem

7:54wynikający z tego że teraz nasz form oplata te elementy,

7:58więc musimy stworzyć sobie osobny styled component, nazwiemy

8:02go styled form. On

8:07będzie przyjmował w form jako argument. Musimy

8:13po prostu powiedzieć że słuchaj, to jest nadal display flex z

8:17kolumną. Teraz

8:25jak sobie to podamy tu, okej

8:32to nasz formularz wygląda z powrotem tak jak trzeba, więc

8:36ostatnie co nam zostało to dyspatch'owanie naszej akcji, teoretycznie

8:41to powinno działać, ponieważ te values, które przekazujemy są dokładnie takie

8:45jak wymagane w naszym reducerze. No

8:50spróbujmy czy to zadziała, taki mały eksperyment. Jak

8:55widzisz nasza notatka została

8:59dodana. Jeśli chcesz możesz skorzystać z dokumentacji

9:04formik'a i wprowadzić tutaj walidację dotyczącą błędów, natomiast

9:11my na potrzeby tego kursu nie musimy tego robić, powiedzmy że tworzymy taką wersję nvp,

9:15gdzie po prostu tworzymy podstawowe elementy. Natomiast ta

9:19dokumentacja w zupełności ci wystarczy, żeby te błędy tutaj wprowadzić, ponieważ

9:24ona wykorzystuje tutaj error message i właściwie to jest jedyne, co trzeba dodać,

9:28żeby to się zaczęło pojawiać pod naszymi input'ami. Ostatnią

9:33rzeczą którą jeszcze możemy zrobić, to żeby po submicie zamykał

9:37się, zamykała się nasza kartę i żeby to zrobić musimy odpalić sobie grid-template

9:42i padać to handle

9:46new item bar toggle, właściwie to to się powinno nazywać po prostu toglle new

9:51item bar. Działa?

9:56Działa. Możemy teraz to podać do naszego new item bar jako

10:02handle close. Jak

10:16wrócimy sobie do new item bar, zdestrukturyzujemy sobie handlu close

10:20to wystarczy, że po tym add

10:25item dodamy sobie te funkcje i ona

10:29powinna zadziałać. Spróbujmy, dokładnie,

10:36więc dotarliśmy

10:40do końca naszego działu, gdzie zarządzamy sobie naszym stanem, dodajemy

10:44i usuwamy notatki, możemy je dodawać, możemy je usuwać, wszystko działa, a w

10:49następnym dziale zaczniemy to wszystko podpinać do backendu, który sami sobie skonfigurujemy

10:53i postawimy, także najciekawsze przed nami.