DiscoverPlaces Raport #8 – eslint, geolocation, lista komentarzy

Pora na kolejny raport odnośnie rozwoju projektu DiscoverPlaces. W tym wpisie przedstawione zostaną: konfiguracja eslinta, pobieranie wiadomości na podstawie lokalizacji oraz wyświetlanie listy komentarzy.

Eslint

Eslint jest narzędziem pozwalającym na automatyczne sprawdzanie poziomu napisanego kodu oraz informowanie o błędach. Możliwości lintera prezentują się następująco:

  • sprawdzanie poprawności wcięć
  • informowanie o nieużywanych zmiennych, brakujących średnikach, błędach w składni etc.
  • utworzenie własnej konfiguracji

Mój plik konfiguracyjny do projektu DiscoverPlaces w React Native przedstawiony został poniżej:

{
    "env": {
        "browser": false,
        "node": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-native"
    ],
    "rules": {
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "react/jsx-uses-react": 2,
        "react/jsx-uses-vars": 2,
        "react/react-in-jsx-scope": 2,
        "no-console": 0
    },
    "globals": {
      "fetch": false
    }
}

Dodatkowo zostały zainstalowane pluginy do Eslinta takie jak: react, react-native. Aby zapobiec zgłaszaniu błędów w stylu:

React is defined but never used

do konfiguracji dodane zostały linie:

"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2,

Pobieranie wiadomości na podstawie lokalizacji

Pierwszą rzeczą jaką należy wykonać, aby skorzystać z geolocation jest dodanie odpowiednich uprawnień aplikacji. W przypadku androida sprowadza się to do dodania poniższej linijki do pliku AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Więcej można znaleźć w dokumentacji.

Pobieranie współrzędnych wygląda w następujący sposób:

getPosition () {
   navigator.geolocation.getCurrentPosition(position => {
     this.setState({
       position: {
         lat: position.coords.latitude,
         long: position.coords.longitude
       }
     });
     this.fetchMessages();
   }, error => {
     console.log(error.message);
   }, {
     enableHighAccuracy: true,
     timeout: 20000
   });
 }

Metoda getCurrentPosition() w ostatnim parametrze przyjmuje jeszcze  maximumAge i tak jest podane w dokumentacji, jednak przy takim argumencie wyskakiwał błąd „Location request timed out„. Po usunięciu maximumAge wszystko wydaje się działać poprawnie, komunikatu timed out brak.

Współrzędne odświeżane są co 15 sekund, co zostało zrealizowane poprzez następujący kod:

componentDidMount () {
    this.getPosition();

    this.setInterval(() => {
      this.getPosition();
    }, REFRESH_TIME);
  }

Metoda setInterval() pochodzi z TimerMixin. Aby wykorzystać mixiny w klasach reactowych instalujemy React Mixin i odpowiednio załączamy do danej klasy:

ReactMixin.onClass(List, TimerMixin);

 Immutability helper

Pozwala na stworzenie kopii danych i jej modyfikację, bez naruszania oryginalnego źródła. Poniżej zastosowanie w opisywanym projekcie użyte do aktualizacji danej wiadomości i wyświetleniu lub ukryciu komentarzy z tej wiadomości.

toggleComments (message, show) {
    const index = this.state.messages.findIndex(item => item.id === message.id);
    const messages = update(this.state.messages, {
      [index]: {
        showComments: {
          $set: show
        }
      }
    });
    this.setState({
      messages: messages
    });
  }

 Dalsze prace

Obecnie zrobiona jest lista wiadomości oraz rozwijanie komentarzy. W kolejnych dniach pracował będę nad wyświetlaniem wideo i zdjęć oraz trzeba trochę poprawić odświeżanie wiadomości tak, aby nie ukrywało otwartych komentarzy danej wiadomości.

Udostępnij: