Wracamy do formy!

W programowaniu zawsze warto się nie poddawać. Po serii porażek i stania w miejscu przychodzi moment kiedy znajdujesz rozwiązanie i wszystko wraca na właściwy tor.

Dokładnie tak miałem po kilku dniach walczenia z formularzami, o czym możecie przeczytać w poprzednich wpisach. Teraz mogę powiedzieć tylko, że bitwę chwilowo wygrywam ja – co miało działać, działa.

Poprzednie wpisy z serii:

Tytuł tego posta jest dwuznaczny. Z jednej strony powrót do formy odnosi się do ponownego wejścia w rytm kodowania, którego nie miałem w ostatnim czasie. Z drugiej jednak strony formularze to była ostatnio rzecz, przy której miałem ochotę się poddać i to one są dzisiaj tematem wpisu.

 

Mamy to!

Po męczarniach z próbami dodania walidacji do formularza logowania w końcu to mamy! Nie jest idealnie i na razie są to raczej podwaliny pod porządną walidację, ale działa. W przyszłości dojdzie jeszcze walidacja po stronie serwera więc formularz będzie np. jeszcze sprawdzał czy użytkownik w ogóle istnieje.

Chyba nigdy wcześniej pojawienie się błędu mówiącego o pustym polu nie było tak satysfakcjonujące :D

Co się zmieniło po stronie kodu?

Login.js

W pliku Login.js zacząłem korzystać z komponentu biblioteki redux-form.

Ostatnie 3 linijki są potrzebne żeby biblioteka mogła zarządzać wartościami z formularza. Wartość  form zawiera unikalną nazwę tego formularza. Jest to potrzebne ponieważ biblioteka redux-form korzysta z reduxa, a jak wiadomo reduxowy store jest globalny w aplikacji.

Komponent  Field pochodzi z biblioteki redux-form i obudowuje inputy. Wyświetlanie samych inputów przeniosłem do osobnego pliku. Tutaj korzystam już z gotowych komponentów.

render-fields.js

W tym pliku mam teraz komponenty wyświetlające bootstrapowe inputy. Z tymi komponentami był właśnie największy problem kiedy pierwszy raz próbowałem korzystać z biblioteki redux-form.

Parametr  touched informuje o tym czy pole było „dotknięte” czyli czy użytkownik miał na nim focus. Pole  error przechowuje treść błędu dla danego pola. Sprawdzanie tych dwóch wartości pozwala określić czy powinniśmy wyświetlić błąd.

W tym momencie mam komponenty dla 3 różnych inputów, ale w przyszłości pewnie pojawią się kolejne.

login-container.js

Kontener dla naszego widoku. Perełka ostatnich dni :D Tutaj odbywa się walidacja formularza (druga część pliku). Regex do sprawdzania poprawności adresu email wziąłem ze StackOverflow i wygląda strasznie. Ale działa.

Promise w metodzie  loginUser pochodzi z przykładu do biblioteki redux-form i po podłączeniu serwera będzie usunięty. Metoda  then() raczej jest oczywista – wykonuje się kiedy Promise zadziała. Metoda  catch() wywoływana jest kiedy wystąpi wyjątek, który rzucam w metodzie walidującej formularz. Normalnie biblioteka sama to ogarnia, ale ja dodatkowo potrzebowałem odblokować w tym momencie widok.

Co było nie tak z biblioteką redux-form?

W poprzednim wpisie mówiłem m.in. o tym, że nie działają przykłady podane na stronie tej biblioteki. W tym momencie powiem, że warto przeglądać w takich momentach GitHub danej biblioteki. Wiecie co się okazało? Że na stronie w przykładzie kod formularza wygląda tak:

A na GitHubie już ten sam formularz jest generowany w ten sposób:

Widzicie różnicę? W pierwszym input jest wstawiony bezpośrednio w komponencie. W drugim wykorzystana jest osobna metoda, którą widzieliście też u mnie.

Pierwszy za cholerę nie działał. Drugi działa. Nie wiem z czego to wynika, ale spodziewałbym się, że jeśli ktoś pokazuje mi jak mam użyć jego kodu to robi to tak, że nie trzeba się przekopywać przez repozytorium.

Dziękuję dobranoc.

Dlatego nie lubię tak dynamicznych dziedzin jak aplikacje w JS bo twórcy bibliotek nie starają się zachować jakości materiałów, których z powodu dynamiki zmian i tak nie ma za wiele.

Biegniemy dalej

Tak jak pani na obrazku rozpoczynającym wpis tak i my biegniemy dalej po programistycznych schodach.

Po tym jak zadziałała mi pierwsza walidacja postanowiłem zabrać się za najważniejsze funkcjonalności aplikacji czyli tworzenie opowiadań. Mam nadzieję, że po świętach będzie więcej mięska do pokazania ;)

Jeśli chcesz śledzić mój brzydki kod to odwiedź GitHuba.

Żeby nie przegapić żadnych newsów i śledzić na bieżąco postępy polub też mój fanpage na Facebooku.

 

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *