[PL] React i walidacja. Mówię jak jest.

Nie sądziłem, że będę miał taki problem. Coś co wydawało się proste zajmuje zbyt wiele czasu. Masa bibliotek, które nie pomagają.

Mówię o walidacji danych w Reactcie. Sądziłem, że to będzie szybka sprawa. Znajdę jakąś bibliotekę i w pół dnia wszystko będzie zrobione. Nie.

W poprzednim wpisie powiedziałem, że zatrzymałem się na walidacji danych i że muszę poszukać rozwiązania. Szukałem. W tym wpisie podzielę się tylko moimi przemyśleniami na ten temat.

Poprzednie wpisy z serii:

Biblioteki

Pierwsze co przyszło mi do głowy to znalezienie odpowiedniej biblioteki, która doda mi prostą walidację w aplikacji. Większość poprzednich problemów w ten sposób rozwiązałem (nawet jak nie zaczynałem od szukania biblioteki to od razu jakąś odpowiednią znajdowałem). Ale nie tym razem.

Najpierw zacząłem szukać czegoś co nie wymaga pisania więcej kodu niż dodanie walidacji samodzielnie. Sporo bibliotek wymagało napisania tak dużej ilości zawiłego kodu, że od razu je odrzucałem. Potrzebuję tylko sprawdzać czy pole nie jest puste albo czy adres email jest poprawny.

Jak znalazłem jakieś biblioteki to okazało się, że połączenie ich z Bootstrapem nie będzie łatwe bo korzystają z własnych komponentów do wyświetlania błędów i obsługi inputów.

Ok, nie można się poddawać. Zacząłem szukać bibliotek, które są przygotowane stricte do działania z React-Bootstrap. Znalazłem kilka. Większość albo wymagała znowu dużej ilości kodu, albo nie oferowała sprawdzania niektórych podstawowych warunktów.

W końcu trafiłem na bibliotekę react-bootstrap-validation. Była wymieniana najczęściej i najwięcej materiałów na jej temat znalazłem. Pobrałem, dodałem do projektu i uruchomiłem. Pojawił się błąd po wejściu na stronę. Po kolejnym przejrzeniu wyników Googla znalazłem przyczynę problemu – react-bootstrap zmienił jakieś pół roku temu nazwy niektórych komponentów. Biblioteka react-bootstrap-validation nie została jeszcze zaktualizowana. Nie wiadomo nawet kiedy jest planowana poprawa. Więc odpowiedź na pytanie czy da się to porawić brzmi NIE. Trzeba czekać aż autor łaskawie zajmie się problemem. Można też edytować bibliotekę, ale kto ma ochotę robić coś co powinno być zrobione już dawno?

Ręczna walidacja

Po porażce z gotowymi bibliotekami i po dyskusji na konkursowym Slacku postanowiłem ręcznie sprawdzać wpisywane dane. Nie ma ich bardzo dużo, ani nie sprawdzam zbyt wielu warunków. Będę musiał napisać trochę więcej kodu, ale będzie to kod prosty i zrozumiały dla mnie.

Dodałem odpowiednie pola do stanu komponentu i znalazłem sposób jak w Bootstrapie włącza się kolorowanie inputów w przypadku błędu. Zabrałem się za pisanie walidacji.

Sprawdzanie adresu email przy logowaniu poszło łatwo. Działa. Przyszła pora na sprawdzanie czy pole z hasłem nie jest puste. I tutaj zdziwienie. Mimo, że oba pola nie są poprawne to wyświetla mi się tylko jeden błąd. Dopiero teraz znalazłem przyczynę problemu – zmiana stanu w przypadku jak mamy zagnieżdżone obiekty nie działa tak jak myślałem. Wiem, że to wynika z mojej niewiedzy ale mimo wszystko wprowadza frustrację.

Chodzi o to, że jeśli zmieniam w obiekcie „validation” tylko wartości podobiektu „username” to muszę w metodzie  this.setState() podać wszystkie pozostałe podobiekty bo inaczej cała zawartość obiektu „validation” będzie zamieniona tylko na to co zmieniałem.

Pierwsze co przyszło mi do głowy to przepisywanie za każdym razem wszystkich pozostałych wartości z obecnego stanu. Działa. Ale przy większym formularzu będzie bardzo niewygodne.

Poszukałem dalej i znalazłem dwa kolejne rozwiązania – albo użycie odpowiednich bibliotek, albo skorzystanie z jednego z featurów nowego standardu JavaScriptu. Wybrałem opcję nr 2.

Chodzi o operator  ... , który pozwala skopiować pozostałe wartości obiektu czy tablicy (https://github.com/tc39/proposal-object-rest-spread). Musiałem tylko włączyć tą funkcjonalność w Babelu. Działa. Wszystkie wartości, których nie zmieniałem są przenoszone. Pojawił się ostatni problem – edytor. Korzystam z Visual Studio Code. Nie wspiera on pokazanego przed chwilą operatora w kodzie JavaScriptu. Więc jak tylko wpisuję linijkę zaczynającą się od  ... to połowa kodu zaczyna być podkreślana na czerwono. Znalazłem wzmianki, że powinno to działać w TypeScripcie. Jedyna opcja to wyłączenie walidacji w plikach JS, albo zmiana edytora… Na razie wybrałem to pierwsze.

Podsumowując

Wiem, że to co tutaj opisałem wynika częściowo z tego, że jestem początkującym użytkownikiem Reacta. Poza tym chcę szybko osiągać efekty. Ale jednak mam wrażenie, że przez takie problemy więcej początkujących osób może się zniechęcić. To jest problem świata JavaScriptu – mamy bardzo dużo gotowych rozwiązań tylko żadnego dobrego.

Dalej walczę z projektem. Kod staje się brzydki, ale i z tym sobie poradzę :)

Przypominam, że w miarę aktualny kod znajdziecie na GitHubie.

2 thoughts on “[PL] React i walidacja. Mówię jak jest.”

Dodaj komentarz

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