Ten weekend był wyjątkowo piękny pod względem pogody i atmosfery więc postanowiłem wykorzystać ten czas by popracować nad UI mojej aplikacji. Projektowanie UI nigdy nie jest łatwą sprawą, ponieważ trudno dogodzić wszystkim. Przy tworzeniu aplikacji jest to dla mnie szczególnie trudna część, ponieważ dopiero sobie wyrabiam pewien zmysł artystyczny i estetyczny. Jednak nie poddaję się i ostro z tym walczę.
Jak już wspominałem o tym wcześniej w mojej aplikacji chciałbym sam popracować nad UI i dlatego zrezygnowałem z framework’a takiego jak Bootstrap na rzecz własnych klas napisanych w SCSS i flexboxgrida. Dzięki temu czuję wiekszą władzę nad tym co tworzę. Korzystanie z flexboxgrida zacząłem od zainstalowania go przy pomocy yarna używając tego polecenia
yarn add flexboxgrid
Następnie musiałem tylko dodać w głównym komponencie linijkę która importuje plik flexboxgrida do aplikacji
import 'flexboxgrid/dist/flexboxgrid.min.css'
Od tego momentu mogłem używać klas z tego pliku w mojej aplikacji.
Jednak nie samym gridem żyje człowiek więc napisałem swoje pierwsze klasy. I tu się pojawił pierwszy problem. Okazało się, że aplikacja nie widziała plików scss pomimo tego że były poprawnie napisane oraz dołączone we właściwy sposób. Po dłuższym szukaniu błędu winnym okazał się brakujący plik .env, który nie dodał się do repozytorium githuba i brakowało go po pobraniu kodu na innej maszynie. Jeśli więc korzystacie z kitze/custom-react-scripts sprawcie czy macie plik .env z wartością REACT_APP_SASS ustawioną na true.
Oprócz ulepszenia UI aplikacji uznałem, że dobrym pomysłem będzie także przejrzenie gotowych komponentów do tworzenia kalendarzy. Dlaczego go nie robię sam? Ponieważ pomimo tego, że wydaje się to dosyć proste to jest to materiał na osobny projekt więc postanowiłem poszukać gotowych rozwiązań. Wśród kilku obecnych na githubie kalendarzy znalazłem w końcu react-big-calendar. Zdecydowałem się na niego ponieważ opiera się na znanym mi Full Calendar oraz wygląda na to że będzie miał wszystkie potrzebne mi opcje.
Dodanie kalendarza do projektu było proste i polegało na użyciu komendy
yarn add react-big-calendar
Oprócz tego w komponencie w którym będę korzystał z kalendarza zaiportowałem plik css tak jak radzi to dokumentacja na githubie przy pomocy poniższej linijki
import 'react-big-calendar/lib/css/react-big-calendar.css'
Minimalny kod jaki jest potrzebny by dodać kalendarz do komponentu jest pokazany poniżej
FSGeek<BigCalendar events={[]} />
Nie da się opuścić opcji events ponieważ jest ona obowiązkowa. Należy również pamiętać by element w którym znajduje się kalendarz miał dokładnie określoną wysokość ponieważ w innym przypadku widok dla całego miesiąca się nie wyrenderuje.
To jak aktualnie wygląda aplikacja możecie sprawdzić tutaj. Nie czuję się póki co bardzo uzdolnionym designerem więc chętnie przyjmę porady i wskazówki co do wyglądu. Dążyłem do minimalistycznego układu i mam nadzieję, że taki udało mi się osiągnąć.
Następnym krokiem będzie dodanie Redux’a do aplikacji tak aby stała się czymś więcej niż tylko zbiorem widoków. Dzięki temu będziemy mogli tworzyć akcje i wypełniać widok danymi. Będzie z tym pewnie trochę problemów na początku ale na pewno będzie to warte wysiłku. Do następnego razu 🙂