Improved locale handling

graphql/UserProfileQuery.js

@@ -7,6 +7,7 @@ export default gql(`
       name
       avatar
       about
+      locationName
       location {
         name
       }

pages/profile/_slug.vue

@@ -26,12 +26,12 @@
               {{ user.name }}
             </ds-heading>
             <ds-text
-              v-if="user.location && user.location.length"
+              v-if="user.location"
               align="center"
               color="soft"
               size="small"
             >
-              <ds-icon name="map-marker" /> {{ user.location[0].name }}
+              <ds-icon name="map-marker" /> {{ user.location.name }}
             </ds-text>
             <ds-text
               align="center"

pages/settings/index.vue

@@ -13,12 +13,11 @@
     <!-- eslint-disable vue/use-v-on-exact -->
     <ds-select
       id="city"
-      v-model="city"
+      v-model="form.locationName"
       :options="cities"
       icon="map-marker"
       label="Deine Stadt"
       placeholder="Deine Stadt"
-      @input="handleCitySelection"
       @input.native="handleCityInput"
     />
     <!-- eslint-enable vue/use-v-on-exact -->
@@ -51,18 +50,16 @@ import { CancelToken } from 'axios'
 import find from 'lodash/find'
 
 let timeout
-const mapboxToken =
-  'pk.eyJ1IjoiaHVtYW4tY29ubmVjdGlvbiIsImEiOiJjajl0cnBubGoweTVlM3VwZ2lzNTNud3ZtIn0.KZ8KK9l70omjXbEkkbHGsQ'
+const mapboxToken = process.env.MAPBOX_TOKEN
 
 export default {
   data() {
     return {
       axiosSource: null,
       cities: [],
-      city: null,
       form: {
         name: null,
-        locationId: null,
+        locationName: null,
         about: null
       }
     }
@@ -78,7 +75,7 @@ export default {
       handler: function(user) {
         this.form = {
           name: user.name,
-          locationId: user.locationId,
+          locationName: user.locationName,
           about: user.about
         }
       }
@@ -93,18 +90,18 @@ export default {
             mutation(
               $id: ID!
               $name: String
-              $locationId: String
+              $locationName: String
               $about: String
             ) {
               UpdateUser(
                 id: $id
                 name: $name
-                locationId: $locationId
+                locationName: $locationName
                 about: $about
               ) {
                 id
                 name
-                locationId
+                locationName
                 about
               }
             }
@@ -113,14 +110,14 @@ export default {
           variables: {
             id: this.user.id,
             name: this.form.name,
-            locationId: this.form.locationId,
+            locationName: this.form.locationName,
             about: this.form.about
           },
           // Update the cache with the result
           // The query will be updated with the optimistic response
           // and then with the real result of the mutation
           update: (store, { data: { UpdateUser } }) => {
-            this.$store.dispatch('auth/refresh', UpdateUser)
+            this.$store.dispatch('auth/fetchCurrentUser')
 
             // Read the data from our cache for this query.
             // const data = store.readQuery({ query: TAGS_QUERY })
@@ -154,15 +151,6 @@ export default {
       clearTimeout(timeout)
       timeout = setTimeout(() => this.requestGeoData(value), 500)
     },
-    handleCitySelection(value) {
-      console.log('SET CURRENT VALUE', value)
-      const item = find(this.cities, { value: value })
-      console.log('ID:', item.id)
-      this.form.locationId = item.id
-    },
-    handleCityEnter() {
-      console.log('SET CURRENT VALUE')
-    },
     processCityResults(res) {
       if (
         !res ||
@@ -199,7 +187,7 @@ export default {
 
       this.$axios
         .get(
-          `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?access_token=${mapboxToken}&types=region,postcode,district,place,country&language=de`,
+          `https://api.mapbox.com/geocoding/v5/mapbox.places/${value}.json?access_token=${mapboxToken}&types=region,postcode,district,place,country&language=${this.$i18n.locale()}`,
           {
             cancelToken: this.axiosSource.token
           }

store/auth.js

@@ -49,8 +49,8 @@ export const getters = {
 }
 
 export const actions = {
-  async init({ commit }) {
-    if (process.client) {
+  async init({ commit, dispatch }) {
+    if (!process.server) {
       return
     }
     const token = this.app.$apolloHelpers.getToken()
@@ -58,20 +58,20 @@ export const actions = {
       return
     }
 
-    const user = await jwt.verify(token, 'b/&&7b78BF&fv/Vd')
-    if (user.id) {
-      commit('SET_USER', {
-        id: user.id,
-        name: user.name,
-        slug: user.slug,
-        email: user.email,
-        avatar: user.avatar,
-        role: user.role,
-        locationId: user.locationId,
-        about: user.about
-      })
-      commit('SET_TOKEN', token)
+    const payload = await jwt.verify(
+      token,
+      process.server
+        ? require('dotenv').parse(require('fs').readFileSync('.env')).JWT_SECRET
+        : null
+    )
+    if (!payload.id) {
+      return
     }
+    commit('SET_TOKEN', token)
+    commit('SET_USER', {
+      id: payload.id
+    })
+    await dispatch('fetchCurrentUser')
   },
   async check({ commit, dispatch, getters }) {
     if (!this.app.$apolloHelpers.getToken()) {
@@ -79,20 +79,32 @@ export const actions = {
     }
     return getters.isLoggedIn
   },
-  refresh({ state, commit }, { id, name, locationId, about, avatar }) {
-    if (!state.user.id || id !== state.user.id) {
-      return
-    }
-    commit('SET_USER', {
-      id: state.user.id, // do not change
-      name: name || state.user.name,
-      slug: state.user.slug, // do not change
-      email: state.user.email, // do not change
-      avatar: avatar || state.user.avatar,
-      role: state.user.role,
-      locationId: locationId || state.user.locationId,
-      about: about || state.user.about
-    })
+  async fetchCurrentUser({ commit, getters }) {
+    await this.app.apolloProvider.defaultClient
+      .query({
+        query: gql(`
+          query User($id: ID!) {
+            User(id: $id) {
+              id
+              name
+              slug
+              email
+              avatar
+              role
+              locationName
+              about
+            }
+          }
+        `),
+        variables: { id: getters.user.id }
+      })
+      .then(({ data }) => {
+        const user = data.User.pop()
+        if (user.id && user.email) {
+          commit('SET_USER', user)
+        }
+      })
+    return getters.user
   },
   async login({ commit }, { email, password }) {
     commit('SET_PENDING', true)
@@ -100,20 +112,20 @@ export const actions = {
       const res = await this.app.apolloProvider.defaultClient
         .mutate({
           mutation: gql(`
-          mutation($email: String!, $password: String!) {
-            login(email: $email, password: $password) {
-              id
-              name
-              slug
-              email
-              avatar
-              role
-              locationId
-              about
-              token
+            mutation($email: String!, $password: String!) {
+              login(email: $email, password: $password) {
+                id
+                name
+                slug
+                email
+                avatar
+                role
+                locationName
+                about
+                token
+              }
             }
-          }
-        `),
+          `),
           variables: { email, password }
         })
         .then(({ data }) => data && data.login)