Przez prawie dwa tygodnie nic nie opublikowałem na blogu, ale to nie przez to, że straciłem zapał po prostu miałem bardzo intensywny czas i przez milion innych spraw blog trochę ucierpiał. Czas nadrobić zaległości! W dzisiejszym poście opiszę jak idą prace nad listingiem w moim projekcie Atena, który realizuje w ramach konkursu Daj się poznać 2017

Dlaczego idzie mi to tak wolno?

NIe ukrywam, że prace programistyczne  w tym projekcie idą mi strasznie powoli. Mam ograniczony czas i jak się okazuję to większość tego czasu musiałem przeznaczyć na poznanie podstaw teoretycznych Reacta i Reduxa. Wiedzę czerpię z książki https://www.fullstackreact.com/ Pewnie w przyszłości napiszę recenzję tej książki. Na pewno jest godna polecenia!

Prace nad listingiem

Pierwsze prace nad listingiem opisywałem w tym poście. Kolejnym krokiem jaki musiałem zrobić było nadanie komponentom stylów tak aby to wyglądało podobnie jak na makietach. Na tym etapie skupiłem  się tylko nad layoutem. W przyszłości będzie trzeba ostylować skórkę nadając jej  kolory i efektowny wygląd. 🙂 Poniżej efekty mojej pracy:

Atena - prace nad listingiem - grid Atena - prace nad listingiem - lista

Atena - prace nad listingiem - filtry

Nie będę tutaj wchodził w techniczne szczegóły. Jedyną ważną informacją jest to, że layout opieram na flexboxie, a metodyka stylowania to połączenie Atomic Design z BEM.

Dodanie interakcji

W kolejnym etapie musiałem dodać obsługę kilku interakcji takich jak:

  • pokazywanie/ukrywanie panelu filtrów
  • zmiana trybu pokazywania postu lista/grid

Pokazywanie/ukrywanie panelu filtrów

Aby obsłużyć tą funkcjonalność dodałem state filtersOpened, który przyjmuje wartości true/false. Na podstawie stanu dodawana jest odpowiednia klasa, która sprawia, że filtry się otwierają lub zamykają. Animacja zrobiona jest za pomocą CSS. Do obsługi klas w JSX użyłem biblioteki classnames.

ListingComponent.js

W filtersComponent wystarczy dodać bindowanie przekazanej funkcji na przycisku:

FiltersComponent.js

Ostatnim krokiem było dodanie stylów.

filters.scss

Podsumowując: Po kliknięciu w przycisk dodawana/usuwana jest klasa filters-opened, która sprawia, że panel filtrów jest otwarty albo zamknięty.

Zmiana trybu pokazywania postu lista/grid

Do listingComponent dodałem state viewMode, który odpowiada za to jaki tryb ma być ustawiony. Do tego potrzebna jest funkcja w viewSwitcherComponent wysyłająca żądanie zmiany stanu do ListingComponent i oczywiście funkcja, która przechwytuje to żądanie.

listingComponent.js

ToolbarComponent.js

ViewSwitcherComponent.js

Ostatnią zmianą jaką musiałem wykonać jest zmiana komponentu PostComponent tak aby wyrenderował odpowiedni content w zależności od tego jaki viewMode został wybrany. Na tym etapie będzie to tylko różnica klas na kontenerze, ale w przyszłości być może będę musiał pomyśleć o odzielnych komponentach post-item dla widoku listy i dla widoku grida.

PostsComponents.js

Podsumowanie

Listing już wygląda jak na makietach i podstawowe interakcje zostały zaimplementowane. Kolejnym krokiem będzie dodanie dynamicznych danych z zewnątrz i to właśnie będzie temat następnego posta. Jeśli masz jakieś pytania lub sugestie pisz w komentarzach!

Share on FacebookTweet about this on TwitterShare on LinkedIn
  • Rafal Makara

    Jak tam listing na dzień dzisiejszy? 🙂

    • Marcin Kwiatkowski

      Niestety ostatnio nie udało się tematu pchnąć do przodu. W czerwcu może coś się ruszy.