- frontend implementation location query

- remove mapboxtoken from .env template

webapp/.env.template

@@ -1,4 +1,3 @@
-MAPBOX_TOKEN="pk.eyJ1IjoiYnVzZmFrdG9yIiwiYSI6ImNraDNiM3JxcDBhaWQydG1uczhpZWtpOW4ifQ.7TNRTO-o9aK1Y6MyW_Nd4g"
 SENTRY_DSN_WEBAPP=
 COMMIT=
 PUBLIC_REGISTRATION=false

webapp/graphql/location.js

@@ -0,0 +1,10 @@
+import gql from 'graphql-tag'
+
+export const queryLocations = () => gql`
+  query($place: String!, $lang: String!) {
+    queryLocations(place: $place, lang: $lang) {
+      place_name
+      id
+    }
+  }
+`

webapp/pages/settings/index.vue

@@ -41,17 +41,15 @@
 
 <script>
 import { mapGetters, mapMutations } from 'vuex'
-import { CancelToken } from 'axios'
 import UniqueSlugForm from '~/components/utils/UniqueSlugForm'
 import { updateUserMutation } from '~/graphql/User'
+import { queryLocations } from '~/graphql/location'
 
 let timeout
-const mapboxToken = process.env.MAPBOX_TOKEN
 
 export default {
   data() {
     return {
-      axiosSource: null,
       cities: [],
       loadingData: false,
       loadingGeo: false,
@@ -123,51 +121,36 @@ export default {
       clearTimeout(timeout)
       timeout = setTimeout(() => this.requestGeoData(value), 500)
     },
-    processCityResults(res) {
+    processLocationsResult(places) {
-      if (!res || !res.data || !res.data.features || !res.data.features.length) {
+      if (!places.length) {
         return []
       }
-      const output = []
+      const result = []
-      res.data.features.forEach((item) => {
+      places.forEach((place) => {
-        output.push({
+        result.push({
-          label: item.place_name,
+          label: place.place_name,
-          value: item.place_name,
+          value: place.place_name,
-          id: item.id,
+          id: place.id,
         })
       })
 
-      return output
+      return result
     },
-    requestGeoData(e) {
+    async requestGeoData(e) {
-      if (this.axiosSource) {
-        // cancel last request
-        this.axiosSource.cancel()
-      }
-
       const value = e.target ? e.target.value.trim() : ''
       if (value === '' || value.length < 3) {
         this.cities = []
         return
       }
       this.loadingGeo = true
-      this.axiosSource = CancelToken.source()
 
       const place = encodeURIComponent(value)
       const lang = this.$i18n.locale()
 
-      this.$axios
+      const { data: { queryLocations: res }} = await this.$apollo.query({ query: queryLocations(), variables: { place, lang } })
-        .get(
+      
-          `https://api.mapbox.com/geocoding/v5/mapbox.places/${place}.json?access_token=${mapboxToken}&types=region,place,country&language=${lang}`,
+      this.cities = this.processLocationsResult(res)
-          {
+      this.loadingGeo = false
-            cancelToken: this.axiosSource.token,
-          },
-        )
-        .then((res) => {
-          this.cities = this.processCityResults(res)
-        })
-        .finally(() => {
-          this.loadingGeo = false
-        })
     },
   },
 }