Add clickable provinces (#100)

* Update geojson data to include Brussels

* Don't enforce lines between class members

* Get demographic data

* Extend province model

* Add provinces to store

* Disable bugged rule

See issue jsx-eslint/eslint-plugin-react#1875

* Make provinces individually selectable

Author: Michiel Leyman

frontend/.eslintrc

@@ -17,6 +17,8 @@
         "ImportDeclaration": "never",
         "ExportDeclaration": { "multiline": true, "minProperties": 5 }
       }],
-      "react/prop-types": ["error", { "ignore": ["store"] }]
+      "react/prop-types": ["error", { "ignore": ["store"] }],
+      "lines-between-class-members": 0,
+      "react/destructuring-assignment": 0
     }
   }

frontend/src/api/BaseAPI.js

@@ -10,4 +10,8 @@ export default class BaseAPI {
   getHospitals() {
     return fetch(`${this.BASE_URL}/hospitals`, { headers: this.headers }).then(r => r.json());
   }
+
+  getDemographics() {
+    return fetch(`${this.BASE_URL}/population`, { headers: this.headers }).then(r => r.json());
+  }
 }

frontend/src/assets/data/be-provinces.geo.json

@@ -6,35 +6,45 @@ import provincesGeoJSON from '../../assets/data/be-provinces.geo.json';
 
 import 'leaflet/dist/leaflet.css';
 import '../../assets/css/explorer/map.css';
-import Province from '../../models/Province';
 
 const MapLeaflet = ({ store }) => {
-  const provinces = [];
-  const { hospitals } = store;
+  store.addProvince(...provincesGeoJSON.features);
+
+  const getProvinceById = id => store.provinces.find(province => province.id === id);
 
-  const getColor = feature => ((feature.properties.TX_PROV_DESCR_EN === 'Antwerp') ? 'red' : 'yellow');
-  const styleMap = feature => ({
-    fillColor: getColor(feature),
-    weight: 3,
-    opacity: 0.65
-  });
+  const getColor = (province) => {
+    if (province.selected) return 'yellow';
+    return '';
+  };
+
+  const toggleProvinceSelection = (province) => {
+    province.toggleSelection();
+    province.layer.setStyle({
+      fillColor: getColor(province)
+    });
+  };
 
   const onEachProvince = (feature, layer) => {
-    const province = feature.properties.TX_PROV_DESCR_EN;
-    provinces.push(new Province(feature.properties, layer));
+    const province = getProvinceById(feature.properties.ID);
     layer.on({
-      click: () => { console.log(province); }
+      click: () => { toggleProvinceSelection(province); }
     });
+    province.setLayer(layer);
   };
 
+  const { hospitals } = store;
   return (
     <Map className="leaflet-container" center={[50.52, 4.3517]} zoom={8} dragging={false} zoomControl={false} scrollWheelZoom={false}>
       <TileLayer
         url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
       />
       <GeoJSON
         data={provincesGeoJSON}
-        style={styleMap}
+        style={{
+          fillColor: 'yellow',
+          weight: 3,
+          opacity: 0.65
+        }}
         onEachFeature={onEachProvince}
       />
       {

frontend/src/components/Explorer/Map.jsx

@@ -1,11 +1,20 @@
-import uuid from 'uuid';
+import { observable, action } from 'mobx';
 
 export default class Province {
-  constructor(province, layer) {
+  @observable selected = true;
+
+  constructor(province) {
     Object.keys(province).forEach((prop) => {
       this[prop] = province[prop];
     });
-    this.mapLayer = layer;
-    this.id = uuid();
+    this.id = this.ID;
+  }
+
+  @action setLayer = (layer) => {
+    this.layer = layer;
+  }
+
+  @action toggleSelection = () => {
+    this.selected = !this.selected;
   }
 }

frontend/src/models/Province.js

@@ -2,21 +2,26 @@ import { observable, configure } from 'mobx';
 
 import API from '../api/BaseAPI';
 import Hospital from '../models/Hospital';
+import Province from '../models/Province';
 
 configure({ enforceActions: true });
 
 class Store {
+  demographics = [];
+  hospitals = [];
+  @observable provinces = [];
+
   static init = async () => {
     const api = new API();
     const initialState = {};
+    initialState.demographics = await api.getDemographics();
     initialState.hospitals = await api.getHospitals();
     return new Store(initialState);
   };
 
-  @observable hospitals = [];
-
-  constructor({ hospitals }) {
+  constructor({ demographics, hospitals }) {
     this.api = new API();
+    this.demographics = [...demographics];
     this._addHospital(...hospitals);
   }
 
@@ -25,6 +30,12 @@ class Store {
       this.hospitals.push(new Hospital(hospital));
     });
   }
+
+  addProvince = (...provinces) => {
+    provinces.forEach((province) => {
+      this.provinces.push(new Province(province.properties));
+    });
+  }
 }
 
 export default Store;