MUTE APP

Spis treści

• Instalacja
• Screenshoty
• SOLID
• Wzorce projektowe
• Wykaz testów

Instalacja

Aplikacja jest do pobrania tutaj

Screenshoty

SOLID

• Single Responsibility Principle - Każdy komponent w naszej apce jest odpowiedzialny za tylko jedną rzecz. Na przykład komponent MutedLocalizationsItem pokazuje informacje o pojedynczej wyciszonej lokalizacji na liście, albo komponent DayPicker pozwala użytkownikowi na wybranie jednego dnia tygodnia.
• Open — Closed Principle - Każdy komponent w naszej aplikacji działa na bazie 'propsów' czyli wartości przekazywanych między rodzicem i jego dzieckiem. Np. komponent DayPicker otrzymuje funkcję onCancel, która może być zdefiniowana w dowolny sposób w różnych miejscach, co umożliwia dodawanie funkcjonalności, bez potrzeby modyfikacji. Ponadto, najlepszym przykładem na 'O' w apce jest komponent Screens, który pozwala na dodanie nowych routów nawigacji bez potrzeby modyfikacji istniejącego kodu.
• Liskov Substitution Principle - Nasza aplikacja używa OOP w bardzo małym stopniu bez potrzeby dziedziczenia.
• Interface Segregation Principle - Wszystkie interfejsy w kodzie są podzielone na dużo małych. Np. interfejs Localizations zamiast mieć w sobie wszystkie fieldy adresu, używa dodatkowego interfejsu Address.
• Dependency Inversion Principle - Nasze komponenty polegają na funkcjach które zdefiniowane są gdzie indziej i tylko je wywołuja, a implementacja ukryta jest w innym miejscu. Np. w App na starcie aplikacji wywoływane są 3 funkcje wczytujące interesujące nas dane:

useEffect(() => {
    loadAllLocalizations();
    loadIntervals();
    loadSettings();
}, []);

Wzorce projektowe

Flux pattern

Bazą naszej aplikacji jest Flux pattern, który polega na tym że przepływ zmiennych pomiędzy komponentami dzieje się w storach. Każdy komponent w dowolnym momencie jest w stanie używać funkcje i zmienne które są w nim zdefiniowane. W naszym kodzie:

• View: Komponenty
• Store: Miejsce w którym jest przechowywany state aplikacji
• Action: Funkcje wywołujące dispatcher ze store
• Dispatcher: Powodują zmiane state aplikacji

Conditional rendering pattern

Jest to pattern który polega na renderowaniu komponentów jedynie przy spełnieniu jakichś założeń. Np. w Map chcemy renderować LocalizationModal tylko i wyłącznie jeśli wartość poi istnieje.

{
    poi && (
        <LocalizationModal
            isClosed={isLocModalOpened}
            closeModal={setLocModalOpened}
            placeId={poi.placeId}
            coordinates={poi.coordinate}
        />
    );
}

Pomaga to w utrzymaniu czystości kodu, nie trzeba zwracać kilka razy różnych elementów w zależnośći od zmiennych, zamiast tego jest to rozwiązane w ten prosty sposób

Wykaz testów

.