Save language for the user permanently when changing the language

backend/src/schema/resolvers/registration.spec.js

@@ -390,7 +390,7 @@ describe('SignupVerification', () => {
         nonce: $nonce
         about: $about
         termsAndConditionsAgreedVersion: $termsAndConditionsAgreedVersion
-        locale: $language
+        locale: $locale
       ) {
         id
         termsAndConditionsAgreedVersion

webapp/components/LocaleSwitch/LocaleSwitch.vue

@@ -37,6 +37,8 @@ import Dropdown from '~/components/Dropdown'
 import find from 'lodash/find'
 import orderBy from 'lodash/orderBy'
 import locales from '~/locales'
+import { mapGetters, mapMutations } from 'vuex'
+import { localeMutation } from '~/graphql/User.js'
 
 export default {
   components: {
@@ -64,15 +66,44 @@ export default {
       })
       return routes
     },
+    ...mapGetters({
+      currentUser: 'auth/user',
+    }),
   },
   methods: {
     changeLanguage(locale, toggleMenu) {
       this.$i18n.set(locale)
+      this.change()
       toggleMenu()
     },
     matcher(locale) {
       return locale === this.$i18n.locale()
     },
+
+    ...mapMutations({
+      setCurrentUser: 'auth/SET_USER',
+    }),
+    async change() {
+      try {
+        await this.$apollo.mutate({
+          mutation: localeMutation(),
+          variables: {
+            id: this.currentUser.id,
+            locale: this.$i18n.locale(),
+          },
+          update: (store, { data: { UpdateUser } }) => {
+            const { locale } = UpdateUser
+            this.setCurrentUser({
+              ...this.currentUser,
+              locale,
+            })
+          },
+        })
+        this.$toast.success(this.$t('contribution.success'))
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
   },
 }
 </script>

webapp/graphql/User.js

@@ -153,3 +153,14 @@ export const checkSlugAvailableQuery = gql`
     }
   }
 `
+
+export const localeMutation = () => {
+  return gql`
+    mutation($id: ID!, $locale: String) {
+      UpdateUser(id: $id, locale: $locale) {
+        id
+        locale
+      }
+    }
+  `
+}