Fix stuff

src/App.vue

@@ -20,19 +20,20 @@ export default {
     ...mapState([
       'jobs',
       'jobsBox',
+      'mapViewport',
     ]),
   },
   methods: {
     ...mapActions([
       'updateJobsBox',
       'getJobs',
     ]),
-    updateJobs(viewport) {
-      if (this.jobsBox !== null && this.jobsBox.contains(viewport)) {
+    updateJobs() {
+      if (this.jobsBox !== null && this.jobsBox.contains(this.mapViewport)) {
         return;
       }
 
-      this.updateJobsBox(viewport.pad(0.05));
+      this.updateJobsBox(this.mapViewport.pad(0.3));
       this.getJobs('');
     },
   },
@@ -50,6 +51,13 @@ html, body, #app {
   margin: 0;
 }
 
+#map {
+  position: absolute;
+  left: 25%;
+  right: 0;
+  width: 75%;
+}
+
 ul.list-inline li {
   display: inline-block;
 }

src/api.js

@@ -0,0 +1,5 @@
+import * as algoliasearch from 'algoliasearch';
+
+const client = algoliasearch('CSEKHVMS53', 'YmUwMzBiNjg3MDY4M2M3MGJiNGNkODdiOTZmOTZjZTZlMzA3NDZiZGZhM2VkY2NjMjY1OWEwMzhjMWI5M2IwMmZpbHRlcnM9d2Vic2l0ZV9pZHMlM0ExODc');
+
+export const jobsIndex = client.initIndex('wk_jobs_production');

src/components/WKMap.vue

@@ -15,7 +15,7 @@
 
 <script>
 import L from 'leaflet';
-import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
+import { LMap, LTileLayer, LMarker, LPopup, LRectangle } from 'vue2-leaflet';
 import { mapState, mapActions } from 'vuex';
 import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';
 import iconRetinaUrl from '../../node_modules/leaflet/dist/images/marker-icon-2x.png';
@@ -37,6 +37,7 @@ export default {
     LTileLayer,
     LMarker,
     LPopup,
+    LRectangle,
     'v-marker-cluster': Vue2LeafletMarkerCluster,
   },
   data() {
@@ -64,11 +65,10 @@ export default {
     },
     emitMapMove() {
       const map = this.$refs.map.mapObject;
-
       const viewport = map.getBounds();
-      const center = map.getCenter();
+      const center = viewport.getCenter();
       this.updateMapPositions({ viewport, center });
-      this.$emit('mapMove', viewport);
+      this.$emit('mapMove');
     },
   },
   mounted() {

src/helpers/GeoHelper.js

@@ -1,5 +1,5 @@
-export function sortByDistance(coordRef, array, geoProj) {
-  return array.map((e, i) => ({ index: i, dist: coordRef.distanceTo(geoProj(e)) }))
+export function sortByDistance(coordRef, data, geoProj) {
+  return data.map((e, i) => ({ index: i, dist: coordRef.distanceTo(geoProj(e)) }))
     .sort((a, b) => a.dist - b.dist)
-    .map(e => array[e.index]);
+    .map(e => data[e.index]);
 }

src/store/actions.js

@@ -1,3 +1,5 @@
+import { jobsIndex } from '../api';
+
 export function updateJobsBox({ commit }, jobsBox) {
   commit('updateJobsBox', jobsBox);
 }
@@ -10,7 +12,7 @@ export async function getJobs({ commit, state }, query) {
     state.jobsBox.getSouthWest().lng,
   ];
 
-  const res = await state.index.search({
+  const res = await jobsIndex.search({
     query,
     hitsPerPage: 1000,
     insideBoundingBox: [boundingBox],

src/store/index.js

@@ -1,19 +1,18 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import * as algoliasearch from 'algoliasearch';
 
 import * as actions from './actions';
 import * as mutations from './mutations';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  strict: process.env.NODE_ENV !== 'production',
   state: {
     jobs: [],
     jobsBox: null,
     mapViewport: null,
     mapCenter: null,
-    index: algoliasearch('CSEKHVMS53', 'YmUwMzBiNjg3MDY4M2M3MGJiNGNkODdiOTZmOTZjZTZlMzA3NDZiZGZhM2VkY2NjMjY1OWEwMzhjMWI5M2IwMmZpbHRlcnM9d2Vic2l0ZV9pZHMlM0ExODc').initIndex('wk_jobs_production'),
   },
   mutations,
   actions,