Make API requests to edit note

src/components/user_note/user_note.js

@@ -6,7 +6,8 @@ const UserNote = {
   data () {
     return {
       localNote: '',
-      editing: false
+      editing: false,
+      frozen: false
     }
   },
   computed: {
@@ -23,7 +24,19 @@ const UserNote = {
       this.editing = false
     },
     finalizeEditing () {
-      this.editing = false
+      this.frozen = true
+
+      this.$store.dispatch('editUserNote', {
+        id: this.user.id,
+        comment: this.localNote
+      })
+        .then(() => {
+          this.frozen = false
+          this.editing = false
+        })
+        .catch(() => {
+          this.frozen = false
+        })
     }
   }
 }

src/components/user_note/user_note.vue

@@ -15,6 +15,7 @@
         <button
           v-show="editing"
           class="button-default btn"
+          :disabled="frozen"
           @click="finalizeEditing"
         >
           {{ $t('user_card.edit_note_apply') }}
@@ -22,6 +23,7 @@
         <button
           v-show="editing"
           class="button-default btn"
+          :disabled="frozen"
           @click="cancelEditing"
         >
           {{ $t('user_card.edit_note_cancel') }}
@@ -30,9 +32,8 @@
     </div>
     <input
       v-show="editing"
+      v-model="localNote"
       class="note-text"
-      type="string"
-      :model="localNote"
     >
     <span
       v-show="!editing"

src/modules/users.js

@@ -56,6 +56,11 @@ const removeUserFromFollowers = (store, id) => {
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
+const editUserNote = (store, { id, comment }) => {
+  return store.rootState.api.backendInteractor.editUserNote({ id, comment })
+    .then((relationship) => store.commit('updateUserRelationship', [relationship]))
+}
+
 const muteUser = (store, id) => {
   const predictedRelationship = store.state.relationships[id] || { id }
   predictedRelationship.muting = true
@@ -335,6 +340,9 @@ const users = {
     unblockUsers (store, ids = []) {
       return Promise.all(ids.map(id => unblockUser(store, id)))
     },
+    editUserNote (store, args) {
+      return editUserNote(store, args)
+    },
     fetchMutes (store) {
       return store.rootState.api.backendInteractor.fetchMutes()
         .then((mutes) => {

src/services/api/api.service.js

@@ -70,6 +70,7 @@ const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute`
 const MASTODON_REMOVE_USER_FROM_FOLLOWERS = id => `/api/v1/accounts/${id}/remove_from_followers`
 const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe`
 const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe`
+const MASTODON_USER_NOTE_URL = id => `/api/v1/accounts/${id}/note`
 const MASTODON_BOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/bookmark`
 const MASTODON_UNBOOKMARK_STATUS_URL = id => `/api/v1/statuses/${id}/unbookmark`
 const MASTODON_POST_STATUS_URL = '/api/v1/statuses'
@@ -321,6 +322,17 @@ const removeUserFromFollowers = ({ id, credentials }) => {
   }).then((data) => data.json())
 }
 
+const editUserNote = ({ id, credentials, comment }) => {
+  return promisedRequest({
+    url: MASTODON_USER_NOTE_URL(id),
+    credentials,
+    payload: {
+      comment
+    },
+    method: 'POST'
+  })
+}
+
 const approveUser = ({ id, credentials }) => {
   const url = MASTODON_APPROVE_USER_URL(id)
   return fetch(url, {
@@ -1667,6 +1679,7 @@ const apiService = {
   blockUser,
   unblockUser,
   removeUserFromFollowers,
+  editUserNote,
   fetchUser,
   fetchUserByName,
   fetchUserRelationship,