Show error message when visit profile page of invalid user

5 files changed, 19 insertions, 3 deletions

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 37179ce1..44192e9a 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -4,6 +4,11 @@ import Timeline from '../timeline/timeline.vue'
 import FollowList from '../follow_list/follow_list.vue'
 
 const UserProfile = {
+  data () {
+    return {
+      error: false
+    }
+  },
   created () {
     this.$store.commit('clearTimeline', { timeline: 'user' })
     this.$store.commit('clearTimeline', { timeline: 'favorites' })
@@ -13,6 +18,9 @@ const UserProfile = {
     this.startFetchFavorites()
     if (!this.user.id) {
       this.$store.dispatch('fetchUser', this.fetchBy)
+        .catch(() => {
+          this.error = true
+        })
     }
   },
   destroyed () {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 09fb93de..ccebe20b 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -55,7 +55,8 @@
       </div>
     </div>
     <div class="panel-body">
-      <i class="icon-spin3 animate-spin"></i>
+      <span v-if="error">{{ $t('user_profile.profile_does_not_exist') }}</span>
+      <i class="icon-spin3 animate-spin" v-else></i>
     </div>
   </div>
 </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 64753f1d..c482ecb6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -383,7 +383,8 @@
     "mute_progress": "Muting..."
   },
   "user_profile": {
-    "timeline_title": "User Timeline"
+    "timeline_title": "User Timeline",
+    "profile_does_not_exist": "Sorry, this profile does not exist."
   },
   "who_to_follow": {
     "more": "More",
diff --git a/src/modules/users.js b/src/modules/users.js
index 77df7168..eabfe5ae 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -140,7 +140,7 @@ const users = {
   getters,
   actions: {
     fetchUser (store, id) {
-      store.rootState.api.backendInteractor.fetchUser({ id })
+      return store.rootState.api.backendInteractor.fetchUser({ id })
         .then((user) => store.commit('addNewUsers', [user]))
     },
     fetchBlocks (store) {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 3d2e8823..d8716596 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -244,6 +244,12 @@ const denyUser = ({id, credentials}) => {
 const fetchUser = ({id, credentials}) => {
   let url = `${USER_URL}?user_id=${id}`
   return fetch(url, { headers: authHeaders(credentials) })
+    .then((data) => {
+      if (!data.ok) {
+        throw Error(data.statusText)
+      }
+      return data
+    })
     .then((data) => data.json())
     .then((data) => parseUser(data))
 }