Refactor user search api, better api error response handling

src/components/user_search/user_search.js

@@ -35,15 +35,13 @@ const userSearch = {
     },
     search (query) {
       if (!query) {
-        this.users = []
         return
       }
       this.loading = true
+      this.userIds = []
       this.$store.dispatch('searchUsers', query)
-        .then((res) => {
-          this.loading = false
-          this.userIds = map(res, 'id')
-        })
+        .then((res) => { this.userIds = map(res, 'id') })
+        .finally(() => { this.loading = false })
     }
   }
 }

src/components/user_settings/user_settings.js

@@ -17,7 +17,6 @@ import Autosuggest from '../autosuggest/autosuggest.vue'
 import Importer from '../importer/importer.vue'
 import Exporter from '../exporter/exporter.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
-import userSearchApi from '../../services/new_api/user_search.js'
 import Mfa from './mfa.vue'
 
 const BlockList = withSubscription({
@@ -322,11 +321,8 @@ const UserSettings = {
       })
     },
     queryUserIds (query) {
-      return userSearchApi.search({ query, store: this.$store })
-        .then((users) => {
-          this.$store.dispatch('addNewUsers', users)
-          return map(users, 'id')
-        })
+      return this.$store.dispatch('searchUsers', query)
+        .then((users) => map(users, 'id'))
     },
     blockUsers (ids) {
       return this.$store.dispatch('blockUsers', ids)

src/modules/users.js

@@ -1,5 +1,4 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import userSearchApi from '../services/new_api/user_search.js'
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, merge, last, concat, uniq } from 'lodash'
 import { set } from 'vue'
@@ -356,14 +355,7 @@ const users = {
       })
     },
     searchUsers (store, query) {
-      // TODO: Move userSearch api into api.service
-      return userSearchApi.search({
-        query,
-        store: {
-          state: store.rootState,
-          getters: store.rootGetters
-        }
-      })
+      return store.rootState.api.backendInteractor.searchUsers(query)
         .then((users) => {
           store.commit('addNewUsers', users)
           return users

src/services/api/api.service.js

@@ -65,6 +65,7 @@ const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials'
 const MASTODON_REPORT_USER_URL = '/api/v1/reports'
 const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin`
 const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin`
+const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
 
 const oldfetch = window.fetch
 
@@ -76,7 +77,7 @@ let fetch = (url, options) => {
   return oldfetch(fullUrl, options)
 }
 
-const promisedRequest = ({ method, url, payload, credentials, headers = {} }) => {
+const promisedRequest = ({ method, url, params, payload, credentials, headers = {} }) => {
   const options = {
     method,
     headers: {
@@ -85,6 +86,11 @@ const promisedRequest = ({ method, url, payload, credentials, headers = {} }) =>
       ...headers
     }
   }
+  if (params) {
+    url += '?' + Object.entries(params)
+      .map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value))
+      .join('&')
+  }
   if (payload) {
     options.body = JSON.stringify(payload)
   }
@@ -837,6 +843,18 @@ const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
   })
 }
 
+const searchUsers = ({ credentials, query }) => {
+  return promisedRequest({
+    url: MASTODON_USER_SEARCH_URL,
+    params: {
+      q: query,
+      resolve: true
+    },
+    credentials
+  })
+    .then((data) => data.map(parseUser))
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -899,7 +917,8 @@ const apiService = {
   fetchFavoritedByUsers,
   fetchRebloggedByUsers,
   reportUser,
-  updateNotificationSettings
+  updateNotificationSettings,
+  searchUsers
 }
 
 export default apiService

src/services/backend_interactor_service/backend_interactor_service.js

@@ -147,6 +147,8 @@ const backendInteractorService = credentials => {
   const retweet = (id) => apiService.retweet({ id, credentials })
   const unretweet = (id) => apiService.unretweet({ id, credentials })
 
+  const searchUsers = (query) => apiService.searchUsers({ query, credentials })
+
   const backendInteractorServiceInstance = {
     fetchStatus,
     fetchConversation,
@@ -205,7 +207,8 @@ const backendInteractorService = credentials => {
     unfavorite,
     retweet,
     unretweet,
-    updateNotificationSettings
+    updateNotificationSettings,
+    searchUsers
   }
 
   return backendInteractorServiceInstance

src/services/new_api/user_search.js

@@ -1,20 +0,0 @@
-import utils from './utils.js'
-import { parseUser } from '../entity_normalizer/entity_normalizer.service.js'
-
-const search = ({ query, store }) => {
-  return utils.request({
-    store,
-    url: '/api/v1/accounts/search',
-    params: {
-      q: query,
-      resolve: true
-    }
-  })
-    .then((data) => data.json())
-    .then((data) => data.map(parseUser))
-}
-const UserSearch = {
-  search
-}
-
-export default UserSearch

src/services/new_api/utils.js

@@ -1,36 +0,0 @@
-const queryParams = (params) => {
-  return Object.keys(params)
-    .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
-    .join('&')
-}
-
-const headers = (store) => {
-  const accessToken = store.getters.getToken()
-  if (accessToken) {
-    return { 'Authorization': `Bearer ${accessToken}` }
-  } else {
-    return {}
-  }
-}
-
-const request = ({ method = 'GET', url, params, store }) => {
-  const instance = store.state.instance.server
-  let fullUrl = `${instance}${url}`
-
-  if (method === 'GET' && params) {
-    fullUrl = fullUrl + `?${queryParams(params)}`
-  }
-
-  return window.fetch(fullUrl, {
-    method,
-    headers: headers(store),
-    credentials: 'same-origin'
-  })
-}
-
-const utils = {
-  queryParams,
-  request
-}
-
-export default utils