Use lookup endpoint to obtain users by nickname

src/components/user_profile/user_profile.js

@@ -45,7 +45,7 @@ const UserProfile = {
   },
   created () {
     const routeParams = this.$route.params
-    this.load(routeParams.name || routeParams.id)
+    this.load({ name: routeParams.name, id: routeParams.id })
     this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
   unmounted () {
@@ -106,12 +106,17 @@ const UserProfile = {
       this.userId = null
       this.error = false
 
+      const maybeId = userNameOrId.id
+      const maybeName = userNameOrId.name
+
       // Check if user data is already loaded in store
-      const user = this.$store.getters.findUser(userNameOrId)
+      const user = this.$store.getters.findUser(maybeId || maybeName)
       if (user) {
         loadById(user.id)
       } else {
-        this.$store.dispatch('fetchUser', userNameOrId)
+        (maybeId
+          ? this.$store.dispatch('fetchUser', maybeId)
+          : this.$store.dispatch('fetchUserByName', maybeName))
           .then(({ id }) => loadById(id))
           .catch((reason) => {
             const errorMessage = get(reason, 'error.error')
@@ -150,12 +155,12 @@ const UserProfile = {
   watch: {
     '$route.params.id': function (newVal) {
       if (newVal) {
-        this.switchUser(newVal)
+        this.switchUser({ id: newVal })
       }
     },
     '$route.params.name': function (newVal) {
       if (newVal) {
-        this.switchUser(newVal)
+        this.switchUser({ name: newVal })
       }
     },
     '$route.query': function (newVal) {

src/modules/users.js

@@ -285,6 +285,13 @@ const users = {
           return user
         })
     },
+    fetchUserByName (store, name) {
+      return store.rootState.api.backendInteractor.fetchUserByName({ name })
+        .then((user) => {
+          store.commit('addNewUsers', [user])
+          return user
+        })
+    },
     fetchUserRelationship (store, id) {
       if (store.state.currentUser) {
         store.rootState.api.backendInteractor.fetchUserRelationship({ id })

src/services/api/api.service.js

@@ -50,6 +50,7 @@ const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home'
 const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}`
 const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context`
 const MASTODON_USER_URL = '/api/v1/accounts'
+const MASTODON_USER_LOOKUP_URL = '/api/v1/accounts/lookup'
 const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships'
 const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses`
 const MASTODON_LIST_URL = id => `/api/v1/lists/${id}`
@@ -318,6 +319,25 @@ const fetchUser = ({ id, credentials }) => {
     .then((data) => parseUser(data))
 }
 
+const fetchUserByName = ({ name, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_USER_LOOKUP_URL,
+    credentials,
+    params: { acct: name }
+  })
+    .then(data => data.id)
+    .catch(error => {
+      if (error && error.statusCode === 404) {
+        // Either the backend does not support lookup endpoint,
+        // or there is no user with such name. Fallback and treat name as id.
+        return name
+      } else {
+        throw error
+      }
+    })
+    .then(id => fetchUser({ id, credentials }))
+}
+
 const fetchUserRelationship = ({ id, credentials }) => {
   const url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}`
   return fetch(url, { headers: authHeaders(credentials) })
@@ -1481,6 +1501,7 @@ const apiService = {
   blockUser,
   unblockUser,
   fetchUser,
+  fetchUserByName,
   fetchUserRelationship,
   favorite,
   unfavorite,